Cubism Portrait of Myself- Kevalyn Boettner

 

    Personally, for me, this project was very difficult and took me around 12 hours to complete. I sat at my computer for hours each night trying to find the perfect codes for the colors and shapes that best fit my piece of art. As you can see my final project is a bit different than my sketch, thus shows how I began to feel more content using the program through the many hours. I decided that for this project I wanted to make cubism art because this is something I have never had the opportunity to do, thus I ran with the idea and created a cubism portrait of myself.  I made sure to include many different techniques that I've learned using Adobe Dreamweaver in which included; bezier and quadratic curves, lines, triangles, circles, and rectangles. 

    There are a few reasons that make this piece so successful, but particularly the reason that it stands out to me is that I was able to complete something I would've never thought I could ever do. Yes, I did not enjoy doing this project, but I now have the skills under my belt if a job opportunity in my future requires basic knowledge on such topic. Another reason I find this piece to be so successful is that I was able to include so many different types of shapes and techniques all of which make them look like they fit together perfectly. I spent an excessive amount of time switching around the measurements so that the placement of each shape, line, and curve started and ended at the exact graphing points. 

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ

  //BACKGROUND//

var sleevegrd = context.createLinearGradient(0,0,730,600);

sleevegrd.addColorStop(0,"rgba(117,62,160,1.00)");

sleevegrd.addColorStop(0.5, "rgba(54,40,140,1.00)");

sleevegrd.addColorStop(1, "rgba(36,39,90,1)");

context.fillStyle= sleevegrd ;    // color of fill

  context.fillRect(0, 0, canvas.width,canvas.height); // create rectangle 

//RIGHT HAIR //

context.beginPath(675,219);

context.moveTo(675,219);

context.bezierCurveTo(675,219,737,340,743,492);

context.bezierCurveTo(743,492,628,545,520,513);

context.bezierCurveTo(520,513,635,393,675,219);

context.fillStyle = "rgba(245,152,184,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgba(0,211,255,0.00)';

context.stroke();

//NECK//

context.beginPath(554,600);

context.moveTo(554,600);

context.bezierCurveTo(554,600,530,560,520,513);

context.bezierCurveTo(520,513,415,580,353,513);

context.bezierCurveTo(353,513,359,562,364,600);

context.fillStyle = "rgba(189,159,73,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgba(18,0,255,0.00)';

context.stroke();

//LEFT HAIR//

context.beginPath(99,600);

context.moveTo(99,600);

context.bezierCurveTo(99,600,26,506,99,420);

context.bezierCurveTo(99,420,142,395,170,472);

context.bezierCurveTo(170,472,100,400,116,521);

context.bezierCurveTo(114,521,125,620,220,522);

context.bezierCurveTo(220,522,224,463,193,416);

context.bezierCurveTo(193,416,125,220,124,129);

context.bezierCurveTo(124,129,108,37,158,1);

context.lineTo(410,0);

context.bezierCurveTo(410,0,453,20,461,52);

context.bezierCurveTo(461,52,407,89,388,125);

context.bezierCurveTo(388,125,241,-95,181,122);

context.bezierCurveTo(181,122,157,260,353,513);

context.bezierCurveTo(353,513,359,562,364,600);

context.lineTo(99,600);

 context.fillStyle = "rgba(252,183,105,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgba(0,255,68,0.00)';

context.stroke();

 //HEAD RIGHT//

context.beginPath(499,525);

context.moveTo(499,525);

context.bezierCurveTo(499,525,280,327,388,127);

context.bezierCurveTo(388,127,405,65,527,18);

context.bezierCurveTo(527,18,651,21,673,92);

context.bezierCurveTo(673,92,698,163,675,219);

context.bezierCurveTo(675,219,634,455,499,525);

context.fillStyle = "rgba(217,92,92,1.00)";

context.fill();

context.lineWidth = 3;

//context.strokeStyle = '#FF0000';

context.stroke();

//HEAD LEFT//

context.beginPath(388,125);

context.moveTo(388,125);

context.bezierCurveTo(388,125,241,-95,181,122);

context.bezierCurveTo(181,122,157,260,353,513);

context.bezierCurveTo(353,513,415,580,499,525);

context.bezierCurveTo(499,525,280,327,388,127);

context.fillStyle = "rgba(255,146,146,1.00)";

context.fill();

context.lineWidth = 3;

//context.strokeStyle = '#D8FF00';

context.stroke();

//LEFT MOUTH LOWER SECTION//

context.beginPath(420,434);

context.moveTo(420,434);

context.bezierCurveTo(420,434,445,473,499,525);

context.bezierCurveTo(499,525,577,473,621,387);

context.bezierCurveTo(621,387,488,277,420,434);

context.fillStyle = "rgba(99,170,255,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgba(0,0,0,0.00)';

context.stroke();

//LEFT TOUNGE//

var centerX = 549;

      var centerY = 459;

      var radius = 45;

      context.beginPath();

      context.arc(centerX, centerY, radius, 2, 1.85 * Math.PI, false);

      context.fillStyle = '#CB0000';

      context.fill();

      context.lineWidth = 2;

      context.strokeStyle = 'rgba(0,0,0,0.00)';

      context.stroke();

//TEETH//

context.fillStyle= 'rgba(255,255,255,1.00)' ;    // color of fill

  context.fillRect(444,417, 15,30); // create rectangle 

context.fillStyle= 'rgba(255,255,255,1.00)' ;    // color of fill

  context.fillRect(484,377, 45,30); // create rectangle 

context.fillStyle= 'rgba(255,255,255,1.00)' ;    // color of fill

  context.fillRect(570,379, 5,30); // create rectangle 

//NOSE

context.beginPath();

context.moveTo(417,304);

context.lineTo(437,257);

context.lineTo(457,303);

context.fillStyle = "rgba(255,230,168,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#FFF27F';

context.stroke();

//NOSE 02

context.beginPath();

context.moveTo(424,305);

context.lineTo(436,280);

context.lineTo(457,303);

context.closePath();

context.fillStyle = "rgba(255,230,168,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#625A14';

context.stroke();

//NOSE 03

context.beginPath();

context.moveTo(434,303);

context.lineTo(436,295);

context.lineTo(447,303);

context.closePath();

context.fillStyle = "rgba(0,0,0,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//RIGHT EYE

//MAIN EYE//

context.beginPath(515,182);

context.moveTo(515,182);

context.bezierCurveTo(515,182,670,280,767,171);

context.bezierCurveTo(767,171,660,-10,515,182);

context.fillStyle = "rgba(189,166,237,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgba(255,0,142,0.00)';

context.stroke();

//WHITE OF EYE//

context.beginPath(657,94);

context.moveTo(657,94);

context.bezierCurveTo(657,94,503,168,657,219);

context.bezierCurveTo(657,219,792,164,657,94);

context.fillStyle = "rgba(120,246,248,1.00)";

context.fill();

context.lineWidth = 3;

//context.strokeStyle = '#00FF6C';

context.stroke();

//PUPIL//

      var centerX = 664;

      var centerY = 175;

      var radius = 25;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = '#034F3B';

      context.fill();

      context.lineWidth = 2;

      context.strokeStyle = '#000000';

      context.stroke();

//EYELASH 01 RIGHT//

context.beginPath(590,110);

context.moveTo(590,110);

context.bezierCurveTo(590,110,586,54,617,11);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//EYELASH 02 RIGHT//

context.beginPath(617,97);

context.moveTo(617,97);

context.bezierCurveTo(617,97,624,60,658,21);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//EYELASH 03 RIGHT//

context.beginPath(650,93);

context.moveTo(650,93);

context.bezierCurveTo(650,93,658,55,694,23);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//EYELASH 04 RIGHT//

context.beginPath(680,99);

context.moveTo(680,99);

context.bezierCurveTo(680,99,691,55,738,32);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//EYELASH 04 RIGHT//

context.beginPath(708,111);

context.moveTo(708,111);

context.bezierCurveTo(708,111,720,73,763,48);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//LEFT EYE//

//MAIN EYE//

context.beginPath(293,415);

context.moveTo(293,415);

context.bezierCurveTo(293,415,344,487,381,403);

context.bezierCurveTo(381,403,327,329,293,415);

context.fillStyle = "rgba(35,0,111,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = 'rgba(255,0,142,0.00)';

context.stroke();

//WHITE OF EYE//

context.beginPath(332,375);

context.moveTo(332,375);

context.bezierCurveTo(332,375,280,409,340,445);

context.bezierCurveTo(340,445,410,407,332,375);

context.fillStyle = "rgba(214,86,255,1.00)";

context.fill();

context.lineWidth = 3;

//context.strokeStyle = '#FF7600';

context.stroke();

//PUPIL//

      var centerX = 337;

      var centerY = 408;

      var radius = 15;

      context.beginPath();

      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

      context.fillStyle = '#97EFD7';

      context.fill();

      context.lineWidth = 2;

      context.strokeStyle = '#000000';

      context.stroke();

//EYELASH 01 LEFT//

context.beginPath(303,396);

context.moveTo(303,396);

context.quadraticCurveTo(288,361,310,355);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//EYELASH 01 LEFT//

context.beginPath(332,373);

context.moveTo(332,373);

context.quadraticCurveTo(325,359,340,353);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//EYELASH 01 LEFT//

context.beginPath(361,381);

context.moveTo(361,381);

context.quadraticCurveTo(357,371,371,371);

context.fillStyle = "rgba(155,108,255,0.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#000000';

context.stroke();

//LIPS//

//UPPERLIP//

context.beginPath(188,197);

context.moveTo(188,197);

context.bezierCurveTo(188,197,226,197,236,221);

context.bezierCurveTo(236,221,253,241,255,217);

context.lineTo(266,169);

context.bezierCurveTo(266,169,296,204,356,225);

context.bezierCurveTo(356,225,283,266,210,265);

context.bezierCurveTo(210,265,193,236,188,197);

context.fillStyle = "rgba(255,134,0,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#FF7600';

context.stroke();

//BOTTOMLIP//

context.beginPath(356,225);

context.moveTo(356,225);

context.bezierCurveTo(356,225,295,319,219,292);

context.bezierCurveTo(219,292,212,282,210,265);

context.bezierCurveTo(210,265,283,266,356,225);

context.fillStyle = "rgba(227,115,39,1.00)";

context.fill();

context.lineWidth = 3;

context.strokeStyle = '#FF7600';

context.stroke();

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