INSPIRATION:
CODED IMAGE:
I decided to make Kirby for my final coding project, because he is one of my favorite video game characters. I decided to make the background a yellow gradient since the two colors compliment each other very well. Overall, this project took me about a week to complete after working on it a couple hours a day. Since, his arms, legs, outer eyes, cheeks, and mouth are made with bezier and quadratic curves, it was a lot harder than I thought. Im extremely happy with how it turned out and I enjoyed the challenges I was faced with.
CODE: ABOUT 250 LINES
//BACKGROUND
var grd1 = context.createLinearGradient(400,0,400,450);
grd1.addColorStop(0 , "rgba(249,246,76,0.9)");
grd1.addColorStop(0.25 , "rgba(249,246,76,0.7)");
grd1.addColorStop(0.5 , "rgba(249,246,76,0.5)");
grd1.addColorStop(0.75 , "rgba(249,246,76,0.3)");
grd1.addColorStop(1 , "rgba(249,246,76,0.1)");
context.beginPath();
context.rect(0,0,800,600);
context.fillStyle = grd1;
context.fill();
context.closePath();
/// BODY
var bodygrd = context.createRadialGradient(400,300,80,400,300,300);
bodygrd.addColorStop(0,"rgba(251, 191, 219, 1)");
bodygrd.addColorStop(.5,"rgba(253, 193, 220, 1)");
bodygrd.addColorStop(1,"rgba(232, 105, 118, 1)");
context.beginPath();
context.arc(400,300,200,0,2*Math.PI,true);
context.fillStyle = bodygrd;
context.fill();
context.closePath();
//LEFT LEG
context.beginPath();
context.moveTo(238,418);
context.bezierCurveTo(231,498,243,534,272,565);
context.quadraticCurveTo(300,593,324,573);
context.bezierCurveTo(317,575,339,574,369,497);
context.quadraticCurveTo(288,476,238,418);
context.closePath();
var lleggrd = context.createRadialGradient(296,557,50,296,557,200);
lleggrd.addColorStop(0,"rgba(185, 65, 65, 1)");
lleggrd.addColorStop(.5,"rgba(220,71,70, 1)");
lleggrd.addColorStop(1,"rgba(220,71,70, 1)");
context.arc(296,557,0,0,2*Math.PI,true);
context.fillStyle = lleggrd;
context.fill();
//LEFT ARM
context.beginPath();
context.moveTo(255,164);
context.bezierCurveTo(232,117,257,37,274,29);
context.quadraticCurveTo(301,19,323,44);
context.bezierCurveTo(328,49,347,75,357,106);
context.quadraticCurveTo(298,117,255,164);
context.closePath();
var larmgrd = context.createRadialGradient(291,66,5,291,66,50);
larmgrd.addColorStop(0,"rgba(251, 191, 219, 1)");
larmgrd.addColorStop(.5,"rgba(253, 193, 220, 1)");
larmgrd.addColorStop(1,"rgba(254, 175, 206, 1)");
context.arc(291,66,0,0,2*Math.PI,true);
context.fillStyle = larmgrd;
context.fill();
//RIGHT ARM
context.beginPath();
context.moveTo(596,266);
context.bezierCurveTo(620,271,647,290,663,313);
context.quadraticCurveTo(675,341,632,366);
context.quadraticCurveTo(614,356,593,349);
context.quadraticCurveTo(602,317,598,277);
context.closePath();
var rarmgrd = context.createRadialGradient(650,327,5,650,327,50);
rarmgrd.addColorStop(0,"rgba(251, 191, 219, 1)");
rarmgrd.addColorStop(.5,"rgba(253, 193, 220, 1)");
rarmgrd.addColorStop(1,"rgba(254, 160, 197, 1)");
context.arc(650,327,0,0,2*Math.PI,true);
context.fillStyle = rarmgrd;
context.fill();
//RIGHT LEG
context.beginPath();
context.moveTo(430,498);
context.bezierCurveTo(410,378,550,300,612,349);
context.quadraticCurveTo(640,363,655,407);
context.bezierCurveTo(658,484,607,542,512,550);
context.quadraticCurveTo(443,543,430,498);
context.closePath();
var rleggrd = context.createRadialGradient(578,502,100,578,502,200);
rleggrd.addColorStop(0,"rgba(185, 65, 65, 1)");
rleggrd.addColorStop(.5,"rgba(220,71,70, 1)");
rleggrd.addColorStop(1,"rgba(220,71,70, 1)");
context.arc(578,502,0,0,2*Math.PI,true);
context.fillStyle = rleggrd;
context.fill();
//LEFT OUTER EYE
context.beginPath();
context.moveTo(466,184);
context.bezierCurveTo(444,165,400,231,411,246);
context.bezierCurveTo(424,267,480,200,466,184);
context.closePath();
var leyegrd = context.createRadialGradient(423,243,1,423,243,50);
leyegrd.addColorStop(0,"rgba(50,103,241,1)");
leyegrd.addColorStop(0.5,"black");
leyegrd.addColorStop(1,"black");
context.arc(423,243,0,0,2*Math.PI,true);
context.fillStyle = leyegrd;
context.fill();
//LEFT INNER EYE
context.beginPath();
context.arc(454,194,9,0*Math.PI,2*Math.PI,false);
context.closePath();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(452,197,9,0*Math.PI,2*Math.PI,false);
context.closePath();
context.fillStyle = "white";
context.fill();
//RIGHT OUTER EYE
context.beginPath();
context.moveTo(495,215);
context.bezierCurveTo(522,205,522,239,485,277);
context.bezierCurveTo(451,303,448,257,495,215);
context.closePath();
var reyegrd = context.createRadialGradient(471,277,1,471,277,50);
reyegrd.addColorStop(0,"rgba(50,103,241,1)");
reyegrd.addColorStop(0.5,"black");
reyegrd.addColorStop(1,"black");
context.arc(471,277,0,0,2*Math.PI,true);
context.fillStyle = reyegrd;
context.fill();
//RIGHT INNER EYE
context.beginPath();
context.arc(501,228,9,0*Math.PI,2*Math.PI,false);
context.closePath();
context.fillStyle = "white";
context.fill();
context.beginPath();
context.arc(499,231,9,0*Math.PI,2*Math.PI,false);
context.closePath();
context.fillStyle = "white";
context.fill();
//MOUTH
context.beginPath();
context.moveTo(397,278);
context.quadraticCurveTo(435,278,445,311);
context.quadraticCurveTo(446,339,413,342);
context.quadraticCurveTo(386,340,381,321);
context.quadraticCurveTo(371,285,397,278);
context.closePath();
var mouthgrd = context.createRadialGradient(402,325,20,402,325,50);
mouthgrd.addColorStop(0,"rgba(243, 135, 119, 1)");
mouthgrd.addColorStop(0.2,"rgba(240, 107, 86, 1)");
mouthgrd.addColorStop(0.5,"rgba(178, 42, 21, 1)");
mouthgrd.addColorStop(0.7,"rgba(178, 42, 21, 1)");
mouthgrd.addColorStop(0.8,"rgba(178, 42, 21, 1)");
mouthgrd.addColorStop(1,"rgba(229, 67, 42, 1)");
context.arc(402,325,0,0,2*Math.PI,true);
context.fillStyle = mouthgrd;
context.fill();
//LEFT CHEEK
context.beginPath();
context.moveTo(354,227);
context.bezierCurveTo(364,218,389,240,388,247);
context.bezierCurveTo(391,267,344,246,354,227);
context.closePath();
context.fillStyle = "rgba(249,136,190,1)";
context.fill();
//RIGHT CHEEK
context.beginPath();
context.moveTo(475,327);
context.bezierCurveTo(436,296,497,299,498,327);
context.bezierCurveTo(498,344,460,320,480,327);
context.closePath();
context.fillStyle = "rgba(249,136,190,1)";
context.fill();
