Tuesday, July 10, 2012

Finished HTML Project

I am excited to say that my project is finally finished. The concept of this image was to create the iconic mouse head of the electronic music artist Deadmau5. I started off this project by graphing everything out on paper and using a compass to help me make sure the proportions of the mouse head and ears were correct. I then used an arc and bezier curve to create the mouth. For the eyes I also used bezier curves for the top and bottom parts of each eye, before adding the Xs.

The mouse that I originally created was red, but I decided to change it to lime green because bright colors are often associated with the type of music that Deadmau5 plays. I also thought the lime green color would look better with the background that I was planning to create.

I wanted my background to resemble how a DJ booth at one of Deamau5’s concerts would be like. I created both parts of the background on two separate documents before placing them behind the mouse head.
I then combined the two backgrounds and the mouse head all together and added color to the rectangles to create the look of my final piece. The grey quadratic curve is supposed to symbolize a DJ booth. I added radial gradient to it because I liked how it looked, and it helped to add depth and direct the viewers eyes to the mouse head. I really liked the example that was posted where the student used different size rectangles that were all different colors, so I decided to do something similar to symbolize a LED light screen that is often behind DJ booths.

I think my piece was successful because it accurately portrays the mouse head of Deadmau5, and has a variety of different shapes and colors that all work well together to create a bright, exciting image. My favorite part of this project was getting to experiment with all the different bright colors and chose which ones I liked the best. I definitely thought the most difficult part was getting the proportions of the mouse head to be accurate. This project was challenging, but it was a great learning experience and I’m really happy with the way my final piece ended up looking.



 Full Code

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//BACKGROUND BOXES
context.beginPath();
        context.rect(0, 0, 200, 100);
        context.fillStyle = '#FF3333';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(0, 100, 50, 100);
        context.fillStyle = '#3399FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(50, 100, 250, 100);
        context.fillStyle = '#FFFF00';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(0, 200, 200, 100);
        context.fillStyle = '#FF0099';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(0, 300, 100, 200);
        context.fillStyle = '#33FF00';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

        context.beginPath();
        context.rect(0, 500, 300, 100);
        context.fillStyle = '#8ED6FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        // ROW 2
        context.beginPath();
        context.rect(200, 0, 100, 100);
        context.fillStyle = '#FF33FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(100, 300, 100, 100);
        context.fillStyle = '#0099FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(200, 300, 300, 100);
        context.fillStyle = '#FF3333';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(100, 400, 400, 100);
        context.fillStyle = '#FF0099';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

//ROW 3
context.beginPath();
        context.rect(300, 100, 100, 400);
        context.fillStyle = '#FF3300';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(300, 500, 100, 100);
        context.fillStyle = '#FFFF33';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

context.beginPath();
        context.rect(300, 0, 200, 100);
        context.fillStyle = '#33FF00';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(400, 100, 100, 100);
        context.fillStyle = '#FFFF33';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(400, 200, 300, 100);
        context.fillStyle = '#3399FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

//    ROW 4
context.beginPath();
        context.rect(500, 0, 200, 200);
        context.fillStyle = '#FF3333';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(500, 300, 100, 200);
        context.fillStyle = '#FF33CC';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(400, 500, 200, 100);
        context.fillStyle = '#FFFF00';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        //ROW 5
        context.beginPath();
        context.rect(700, 0, 100, 50);
        context.fillStyle = '#FFFF00';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(700, 50, 100, 250);
        context.fillStyle = '#33FF00';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(600, 300, 200, 100);
        context.fillStyle = '#FF3399';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();
       
        context.beginPath();
        context.rect(600, 400, 200, 200);
        context.fillStyle = '#3399FF';
        context.fill();
        context.lineWidth = 5;
        context.strokeStyle = 'black';
        context.stroke();

//BACKGROUND CURVE
context.beginPath();
context.moveTo(0, 450);
context.quadraticCurveTo(400, 350, 800, 450);
context.lineTo(800, 600);
context.lineTo(0, 600);
context.lineTo(0, 450);
context.lineWidth = 2;
// line color
context.closePath();
context.lineWidth = 2;
context.fill();
context.strokeStyle = "black";
context.stroke();

 // create radial gradient
        var grd = context.createRadialGradient(400, 500, 400, 350, 50, 100);
        // light grey
        grd.addColorStop(0, "#CCCCCC");
        // black
        grd.addColorStop(1, "#000000");
        context.fillStyle = grd;
        context.fill();

        // add stroke
        context.lineWidth = 5;
        context.strokeStyle = "black";
        context.stroke();
       


//MOUSE HEAD
context.beginPath();
context.arc(400, 380, 140, 0, 2 * Math.PI, false);
context.fillStyle = "#66FF33";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#66FF33";
context.stroke();

//LEFT EAR
context.beginPath();
context.arc(235, 230, 130, 0, 2 * Math.PI, false);
context.fillStyle = "#66FF33";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#66FF33";
context.stroke();

//RIGHT EAR
context.beginPath();
context.arc(565, 230, 130, 0, 2 * Math.PI, false);
context.fillStyle = "#66FF33";
context.fill();
context.lineWidth = 2;
context.strokeStyle = "#66FF33";
context.stroke();

//MOUTH-TOP LINE
context.beginPath();
context.moveTo(270, 385);
context.quadraticCurveTo(400, 398, 530, 385);
context.lineWidth = 5;
// line color
context.strokeStyle = "white";
context.stroke();

//MOUTH-BOTTOM LINE
context.beginPath();
context.moveTo(270, 385);
context.bezierCurveTo(280, 540, 520, 540, 530, 385);
context.lineWidth = 5;
// line color
context.strokeStyle = "white";
context.stroke();
//COLOR
context.closePath();
context.lineWidth = 5;
context.fillStyle = "white";
context.fill();
context.strokeStyle = "white";
context.stroke();

//LEFT EYE-TOP LINE
context.beginPath();
context.moveTo(288, 355);
context.bezierCurveTo(260, 315, 295, 255, 355, 275);
context.lineWidth = 1;
//COLOR
context.closePath();
context.lineWidth = 1;
context.fillStyle = "white";
context.fill();
context.strokeStyle = "white";
context.stroke();

//LEFT EYE-BOTTOM LINE
context.beginPath();
context.moveTo(288, 355);
context.bezierCurveTo(330, 360, 370, 330, 355, 275);
context.lineWidth = 1;
//COLOR
context.closePath();
context.lineWidth = 1;
context.fillStyle = "white";
context.fill();
context.strokeStyle = "white";
context.stroke();

//RIGHT EYE-TOP LINE
context.beginPath();
context.moveTo(457, 275);
context.bezierCurveTo(525, 255, 540, 320, 520, 348);
context.lineWidth = 5;
// line color
context.strokeStyle = "white";
context.stroke();
//COLOR
context.closePath();
context.lineWidth = 1;
context.fillStyle = "white";
context.fill();
context.strokeStyle = "white";
context.stroke();

//RIGHT EYE BOTTOM LINE
context.beginPath();
context.moveTo(457, 275);
context.bezierCurveTo(447, 310, 480, 350, 520, 348);
context.lineWidth = 1;
// line color
context.strokeStyle = "white";
context.stroke();
//COLOR
context.closePath();
context.lineWidth = 1;
context.fillStyle = "white";
context.fill();
context.strokeStyle = "white";
context.stroke();

//LEFT EYE X-\
context.beginPath();
context.moveTo(285, 305);
context.lineTo(349, 324);
context.lineWidth = 7;
context.strokeStyle = "black";
context.stroke();

//LEFT EYE X-/
context.beginPath();
context.moveTo(308, 349);
context.lineTo(310, 278);
context.lineWidth = 7;
context.strokeStyle = "black";
context.stroke();

//RIGHT EYE X-/
context.beginPath();
context.moveTo(464, 310);
context.lineTo(522, 300);
context.lineWidth = 7;
context.strokeStyle = "black";
context.stroke();

//RIGHT EYE X-\
context.beginPath();
context.moveTo(496, 275);
context.lineTo(500, 342);
context.lineWidth = 7;
context.strokeStyle = "black";
context.stroke();



///////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)