SUPER MARIO CANVAS PROJECT

-


This was a hard project and it took a lot of hours, but at the same time I had a lot of fun with it. I learned so much from spending a lot of hours on it. I spent about 2 hours before even being able to start it to figure out how I was going to do it. I finally figured it all about by using Illustrator to figure out my coordinates, and I was able to put the composition together and draw the shapes to find the right coordinates. 



 Code:
//// BACKGROUND

var RadialBkgrnd = context.createRadialGradient(400,300,100,400,300,500);

 RadialBkgrnd.addColorStop(0,"rgba(168,230,255,1)");
RadialBkgrnd.addColorStop(0.4,"rgba(131,184,204,1)");
RadialBkgrnd.addColorStop(1,"rgba(35,102,127,1)");
RadialBkgrnd

 context.beginPath();

context.rect(0,0,800,600);

context.closePath();

 context.fillStyle = RadialBkgrnd;
context.fill();

 // PIPE 1
var pipe1 = context.createLinearGradient(428,480,515,480);

 pipe1.addColorStop(0,"rgba(27,150,70,1)");
pipe1.addColorStop(0.4,"rgba(192,216,46,1)");
pipe1.addColorStop(1,"rgba(27,150,70,1)");

context.beginPath();

context.rect(428,469,87,91);

context.closePath();

context.fillStyle = pipe1;
context.fill();
// PIPE PART 2

var pipe2 = context.createLinearGradient(420,440,550,440);

 pipe2.addColorStop(0,"rgba(27,150,70,1)");
pipe2.addColorStop(0.2,"rgba(192,216,46,1)");
pipe2.addColorStop(1,"rgba(27,150,70,1)");

context.beginPath();

context.rect(420,420,103,50);

context.closePath();

context.fillStyle = pipe2;
context.fill();

 // CLOUD 

context.beginPath();

context.moveTo(586,88);
context.quadraticCurveTo(604,40,634,78);
context.quadraticCurveTo(666,27,698,77);
context.quadraticCurveTo(751,53,749,100);
context.quadraticCurveTo(803,121,747,159);
context.quadraticCurveTo(732,203,689,168);
context.quadraticCurveTo(664,201,630,164);
context.quadraticCurveTo(571,191,580,142);
context.quadraticCurveTo(523,103,586,88);

context.closePath();

context.fillStyle = "rgba(255,255,255,1)";
context.fill();


// BUSH 1

context.beginPath();

context.moveTo(670,552);
context.lineTo(726,476);
context.quadraticCurveTo(748,452,768,475);
context.lineTo(821,552);

context.closePath();

context.fillStyle = "rgba(27,150,70,1)";
context.fill();
context.stroke();

var bush = context.createLinearGradient(623,520,679,552);

 bush.addColorStop(0,"rgba(27,150,70,1)");
bush.addColorStop(0.4,"rgba(192,216,46,1)");
bush.addColorStop(1,"rgba(27,150,70,1)");


context.beginPath();

context.moveTo(623,552);
context.lineTo(679,496);
context.quadraticCurveTo(701,473,721,495);
context.lineTo(774,552);

context.closePath();

context.fillStyle = bush;
context.fill();
context.stroke();



 // GROUND

 var ground = context.createLinearGradient(400,550,400,600);

 ground.addColorStop(0,"rgba(119,31,17,1)");
ground.addColorStop(0.4,"rgba(136,44,30,1)");
ground.addColorStop(1,"rgba(187,61,41,1)");

context.beginPath();

context.rect(0,550,800,50);

context.closePath();

 context.fillStyle = ground;
context.fill();
context.stroke();

// BLOCK ONE


context.beginPath();

context.rect(26,341,51,51);

context.closePath();

 context.fillStyle = "rgba(187,61,41,1)";
context.fill();
context.stroke();

 // ? BLOCK

 var block = context.createRadialGradient(102.5,366.5,10,102.5,366.5,40);


block.addColorStop(0,"rgba(132,136,30,1)");
block.addColorStop(1,"rgba(92,94,39,1)");

context.beginPath();

context.rect(77,341,51,51);

context.closePath();

 context.fillStyle = block;
context.fill();
context.stroke();

 // THIRD BLOCK

context.beginPath();

context.rect(128,341,51,51);

context.closePath();

 context.fillStyle = "rgba(187,61,41,1)";
context.fill();
context.stroke();

 //// RIGHT BLOCK LINES
// HORIZONTAL LINE 1
context.beginPath();

context.moveTo(128,358);
context.lineTo(179,358);

context.closePath();

context.stroke();

 // HORIZONTAL LINE 2
context.beginPath();

context.moveTo(128,375);
context.lineTo(179,375);

context.closePath();

context.stroke();


 // VERTICAL LINE 1
context.beginPath();

context.moveTo(153.5,341);
context.lineTo(153.5,358);

context.closePath();

context.stroke();

// VERTICAL LINE 2

context.beginPath();

context.moveTo(153.5,375);
context.lineTo(153.5,392);

context.closePath();

context.stroke();

// VERTICAL LINE 3

 context.beginPath();

context.moveTo(145,358);
context.lineTo(145,375);

context.closePath();

context.stroke();

// VERTICAL LINE 4

context.beginPath();

context.moveTo(162,358);
context.lineTo(162,375);

context.closePath();

context.stroke();

//// LEFT BLOCK LINES

// HORIZONTAL LINE 1
context.beginPath();

context.moveTo(26,358);
context.lineTo(77,358);

context.closePath();

context.stroke();

 // HORIZONTAL LINE 2
context.beginPath();

context.moveTo(26,375);
context.lineTo(77,375);

context.closePath();

context.stroke();


 // VERTICAL LINE 1
context.beginPath();

context.moveTo(51.5,341);
context.lineTo(51.5,358);

context.closePath();

context.stroke();

// VERTICAL LINE 2

context.beginPath();

context.moveTo(51.5,375);
context.lineTo(51.5,392);

context.closePath();

context.stroke();

// VERTICAL LINE 3

 context.beginPath();

context.moveTo(41,358);
context.lineTo(41,375);

context.closePath();

context.stroke();

// VERTICAL LINE 4

context.beginPath();

context.moveTo(62,358);
context.lineTo(62,375);

context.closePath();

context.stroke();

// QUESTIONMARK

var credits = "?";
context.beginPath();
context.font = 'bold 40px Arial';
context.fillStyle = "rgba(187,61,41,1)";
context.fillText(credits, 90, 380);
context.closePath();

///// SUPER MARIO


// NOSE

context.beginPath();

context.moveTo(400,302);

 context.bezierCurveTo(488,241,488,384,414,345);


context.closePath();
context.lineWidth=4;
context.fillStyle = "rgba(233,205,130,1)";
context.fill();
context.stroke();



// HEAD

context.beginPath();

context.moveTo(335,185);

context.lineTo(390,246);
context.quadraticCurveTo(500,369,375,433);
context.quadraticCurveTo(340,500,272,448);
context.quadraticCurveTo(236,446,216,414);
context.bezierCurveTo(137,436,137,307,180,323);
context.lineTo(180,258);

context.closePath();

context.fillStyle = "rgba(233,205,130,1)";
context.fill();
context.stroke();

// HIDE FACE OUTLINE

context.beginPath();

context.rect(420,291,25,60);

context.closePath();

context.fillStyle = "rgba(233,205,130,1)";
context.fill();

 // HAIR 

context.beginPath();

context.moveTo(189,284);
context.quadraticCurveTo(209,321,226,315);
context.bezierCurveTo(244,308,256,333,240,344);
context.bezierCurveTo(256,368,211,381,209,355);
context.quadraticCurveTo(197,326,169,311);


context.closePath();

context.fillStyle = "rgba(68,16,10,1)";
context.fill();
context.stroke();


// MOUTH 

context.beginPath();

context.moveTo(300,384);

context.quadraticCurveTo(327,408,359,405);
context.bezierCurveTo(359,453,296,438,300,384);


 context.closePath();

context.fillStyle = "rgba(238,28,37,1)";
context.fill();
context.stroke();

// MOUTH LINE

context.beginPath();

context.moveTo(359,405);
context.lineTo(355,422);
context.lineTo(303,405);
context.lineTo(300,384);
context.quadraticCurveTo(327,408,359,405);

context.closePath();

context.fillStyle = "rgba(255,255,255,1)";
context.fill();
context.stroke();
// MUSTACHE

context.beginPath();

context.moveTo(269,329);

context.quadraticCurveTo(362,383,444,346);
context.quadraticCurveTo(460,366,440,376);
context.quadraticCurveTo(437,391,417,391);
context.quadraticCurveTo(397,413,380,394);
context.quadraticCurveTo(345,413,335,383);
context.quadraticCurveTo(296,404,288,369);
context.quadraticCurveTo(249,362,269,329);

 context.closePath();

context.fillStyle = "black";
context.fill();
context.stroke();


// HAT PART 1

 context.beginPath();

context.moveTo(182,326);

context.bezierCurveTo(125,389,73,277,142,266);
context.bezierCurveTo(171,91,430,91,377,235);
context.quadraticCurveTo(273,152,182,326);

context.closePath();

context.fillStyle = "rgba(238,28,37,1)";
context.fill();
context.stroke();


// CIRCLE HAT

context.beginPath();

context.arc(300,186,40,0,Math.PI*2,true);

context.closePath();

context.fillStyle = "white";
context.fill();
context.stroke();

// HAT M

context.beginPath();

context.moveTo(270,191);
context.lineTo(287,154);
context.lineTo(304,167);
context.lineTo(309,153);
context.lineTo(327,172);
context.lineTo(318,175);
context.lineTo(311,167);
context.lineTo(306,179);
context.lineTo(292,169);
context.lineTo(284,198);


context.closePath();

context.fillStyle = "rgba(238,28,37,1)";
context.fill();
context.stroke();
 // HAT PART 2

context.beginPath();

context.moveTo(207,283);

context.bezierCurveTo(362,81,470,209,397,254);
context.bezierCurveTo(327,193,225,295,207,283);

 context.closePath();

context.fillStyle = "rgba(177,31,36,1)";
context.fill();
context.stroke();


// LEFT EYE OUTER

context.beginPath();

context.moveTo(281,270);

context.bezierCurveTo(311,260,337,322,311,333);
context.bezierCurveTo(282,347,254,280,281,270);

 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
context.fill();
context.stroke();

// LEFT EYE (1) INNER

context.beginPath();

context.moveTo(278,280);

context.bezierCurveTo(295,273,321,315,300,327);
context.bezierCurveTo(284,335,256,289,278,280);

 context.closePath();

context.fillStyle = "rgba(61,127,193,1)";
context.fill();
context.stroke();

// LEFT EYE (2) INNER

context.beginPath();

context.moveTo(280,295);

context.bezierCurveTo(291,290,310,319,295,326);
context.bezierCurveTo(284,333,264,301,280,295);

 context.closePath();

 context.fillStyle = "rgba(0,0,0,1)";
context.fill();
context.stroke();

// LEFT EYE FLARE

context.beginPath();

context.moveTo(280,292);

context.bezierCurveTo(284,292,286,304,282,304);
context.bezierCurveTo(278,305,276,293,280,292);

 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
context.fill();


// RIGHT EYE OUTER

context.beginPath();

context.moveTo(365,310);

context.lineTo(400,295);
context.bezierCurveTo(388,239,337,252,365,310);

 context.closePath();

context.fillStyle = "rgba(255,255,255,1)";
context.fill();
context.stroke();

// RIGHT EYE (1) INNER

context.beginPath();

context.moveTo(365,310);

context.bezierCurveTo(340,266,378,257,387,300);
context.lineTo(365,310);

context.closePath();

 context.fillStyle = "rgba(61,127,193,1)";
context.fill();
context.stroke();

// RIGHT EYE (2) INNER


context.beginPath();

context.moveTo(365,310);

context.bezierCurveTo(348,283,370,272,377,305);
context.lineTo(365,310);

context.closePath();

 context.fillStyle = "rgba(0,0,0,1)";
context.fill();
context.stroke();

// RIGHT EYE FLARE

context.beginPath();

context.moveTo(370,281);

context.bezierCurveTo(374,281,374,291,370,291);
context.bezierCurveTo(366,291,366,281,370,281);

 context.closePath();

 context.fillStyle = "rgba(255,255,255,1)";
context.fill();
// NOSE CONTOUR

context.beginPath();

context.moveTo(360,325);

context.quadraticCurveTo(368,299,425,289);
context.quadraticCurveTo(374,304,360,325);

 context.closePath();

 context.fillStyle = "black";
context.fill();
context.stroke();

// EAR CONTOUR 

context.beginPath();

context.moveTo(200,392);

context.quadraticCurveTo(187,370,166,375);
context.quadraticCurveTo(173,367,182,368);
context.quadraticCurveTo(176,357,170,358);
context.quadraticCurveTo(192,347,200,392);

context.closePath();

 context.fillStyle = "black";
context.fill();
context.stroke();
// LEFT EYEBROW

context.beginPath();

context.moveTo(257,272);

context.quadraticCurveTo(241,200,311,250);
context.quadraticCurveTo(266,230,257,272);

 context.closePath();

 context.fillStyle = "black";
context.fill();
context.stroke();

 // RIGHT EYEBROW

context.beginPath();

context.moveTo(348,247);

context.quadraticCurveTo(369,160,387,242);
context.quadraticCurveTo(367,200,348,247);

 context.closePath();

 context.fillStyle = "black";
context.fill();
context.stroke();

Comments

Post a Comment

Popular posts from this blog

AUTOSCOPY

-
Image
This ended up being quite the challenge. The assignment was basically to blend ourself with something that was holding us back. I spent a looong time trying to figure out what I was going to do for this assignment. The best I came up with was making myself into a robot, which also sounded pretty cool. The idea behind it was that sometimes everyday life can become very robotic, and you just forget to enjoy life. But, actually turning myself into one, wasn't as easy as I thought. I spent a good 7 hours trying to get those "glowing" stripes in place while looking at a million tutorials trying to figure it out. JPG 100%, 618 KB JPG 75%, 256 KB JPG 50%, 119 KB JPG 25%, 69 KB JPG 0%, 38 KB
Read more