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 ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ


Comments

  1. Anya KaplanDecember 13, 2021 at 11:01 AM

    Hi Kevalyn,

    This was one of my favorite projects of yours! I love how creative and abstract the self portrait is! The color scheme is also very cool, specifically the bright purple and blue background, with the golden hair, and bright blue eye. I think a very good job with the coding as well, as the shapes turned out perfectly and in good position. Nice!

    ReplyDelete

Post a Comment

Popular posts from this blog

Business Cards

Image
    These are the three business cards that I worked on for this assignment. This was very tricky for me and did not come easy. I spent hours watching tutorial videos and playing around with trial and error. When I finally got the hang of it, I began using layers. A few that I found myself using more were header, subheader, logo, and background. I really liked how I got to tune my inner creativity and use colors that speak to me. I also played around with different gradients and shades. The last thing that I found that makes my business cards stand out is the symbols I used in front of all of my information on the back.   
Read more

Autoscopy

Image
     Above is my autoscopy project that I worked on over Thanksgiving break. This is by far my favorite end result that I've completed this semester. I really enjoyed getting to take aspects from outer space and correlating them with a picture I took on Halloween in my fembot costume. To gain inspiration I surfed a lot of different websites like Google Images, Pinterest, and a variety of websites that were specifically recommended for this assignment.      I picked four images that I wanted to use; a spacecraft, cluster of aliens, galaxy background, and shooting stars. Going in I knew that I wanted the whole picture to have the same overall theme and ended up choosing space galaxy. The first thing I did when I started editing the original image was the switch from normal to exclusion to give the galaxy vibe.  With each image, I made sure they each had their own layer so I could continue switching from normal to whatever option meshed the best. Once all...
Read more

Somewhere

Image
       When I found out that we were going to be working in Photoshop I was very excited for this specific reason. I follow people on social media that are famous for editing themselves into famous celebrities' photos and I wanted to know the ins and outs of doing just that. Growing up my favorite movie series was Mean Girls, I would pretend to play the roles of the characters in my everyday life. This project was the closest opportunity for me to be a part of the movie series.      I began with adding the original cover photo from Mean Girls 2 into Photoshop, then started using multiple different layers. Some of the layers I used helped me fix the saturation, hues, and opacities to make myself appear like I was there during the actual photoshoot. As you can tell in my photoshoot picture (last image), the bottom half of my legs is cut off. For this project, I knew I wanted my knees down in the picture because that's how the three characters in the back...
Read more