Jacky’s face (project 1)

This self portrait was first designed on illustrator by using some basic shapes and geometries. Therefore, I can easily map out on a 600 x 600 canvas with coordinates and sizes.

``````//Jacky Tian
//Section B
//yinjiet@andrew.cmu.edu
//project-01
function setup() {
createCanvas(600, 600);
background(220);
}

function draw() {
strokeWeight(1);
stroke(0, 0, 0);
fill(236, 212, 190);
ellipse(175, 320, 10, 50);
ellipse(425, 320, 10, 50);

strokeWeight(0);
stroke(0, 0, 0);
fill(236, 212, 190);
rect(270, 460, 60, 60),

strokeWeight(0);
stroke(0, 0, 0);
fill(236, 212, 190);
ellipse(300, 320, 250, 300);

fill(0)
quad(175, 270, 280, 270, 308, 160, 210, 185);
quad(320, 270, 425, 270, 390, 185, 292, 160);

strokeWeight(4);
stroke(212, 175, 55);
fill(255);
rect(200, 275, 80, 60);
rect(320, 275, 80, 60);
line(280, 300, 320, 300);
line(175, 285, 200, 300);
line(425, 285, 400, 300);

strokeWeight(1);
stroke(0, 0, 0);
fill(236, 212, 190);
triangle(300, 350, 290, 375, 310, 375);

strokeWeight(1);
stroke(0, 0, 0);
noFill();
arc(300, 415, 80, 80, 0, PI + QUARTER_PI, OPEN);

stroke(0, 0, 0);
fill(0, 0, 0);
quad(200, 520, 400, 520, 500, 600, 100, 600);

stroke(0, 0, 0);
fill(51);
rect(200, 580, 80, 100);

}
``````

Assignment 01

``````/* Samantha Ho
Section E
sch1@andrew.cmu.edu
Assignment-01*/

function setup() {
createCanvas(800, 600);
background(220, 255, 254);

fill(81, 54, 54);
noStroke();
ellipse(380, 260, 190, 200);
fill(81, 54, 54);
noStroke();
ellipse(366, 244, 190, 200);
fill(81, 54, 54);
noStroke();
ellipse(398, 370, 190, 400);

/*chest*/
fill(245, 184, 161);
noStroke();
beginShape();
vertex(200, 400);
vertex(540, 400);
vertex(430, 600);
vertex(300, 600);
endShape(CLOSE);

fill(245, 184, 161);
noStroke();
beginShape();
vertex(345, 300);
vertex(408, 300);
vertex(430, 600);
vertex(300, 600);
endShape(CLOSE);
/*right shirt*/
fill(220, 0, 0);
noStroke();
beginShape();
vertex(420, 360);
vertex(540, 400);
vertex(430, 600);
vertex(300, 600);
endShape(CLOSE);
/*left shirt*/
fill(250, 0, 0);
noStroke();
beginShape();
vertex(330, 360);
vertex(200, 400);
vertex(280, 600);
vertex(400, 600);
endShape(CLOSE);

fill(208, 131, 99);
noStroke();
ellipse(370, 300, 100, 160);

fill(208, 131, 99);
noStroke();
ellipse(366, 260, 180, 200);

fill(247, 194, 171);
noStroke();
ellipse(366, 260, 160, 200);

/*hair*/
fill(81, 54, 54);
noStroke();
arc(366, 200, 160, 80, PI, PI + PI, OPEN);
arc(386, 200, 140, 230, 0, QUARTER_PI);

/*lips*/
fill(234, 163, 169);
ellipse(364, 330, 10, 10);
ellipse(370, 330, 10, 10);
/*right hand top*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(450, 244);
vertex(460, 240);
vertex(480, 280);
vertex(460, 280);
endShape(CLOSE);
/*left hand top*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(280, 244);
vertex(270, 240);
vertex(250, 280);
vertex(270, 280);
endShape(CLOSE);
/*right hand bottom*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(430, 344);
vertex(466, 380);
vertex(480, 280);
vertex(460, 280);
endShape(CLOSE);
/*left hand bottom*/
fill(247, 194, 171);
noStroke();
beginShape();
vertex(316, 350);
vertex(270, 350);
vertex(250, 280);
vertex(270, 280);
endShape(CLOSE);

/*right arm*/
fill(250, 0, 0);
noStroke();
beginShape();
vertex(430, 356);
vertex(480, 340);
vertex(540, 580);
vertex(460, 580);
endShape(CLOSE);
/*left arm*/
fill(220, 0, 0);
noStroke();
beginShape();
vertex(320, 350);
vertex(260, 340);
vertex(220, 580);
vertex(300, 580);
endShape(CLOSE);

/*right sunglasses*/
fill(210, 252, 255);
noStroke();
beginShape();
vertex(384, 290);
vertex(380, 260);
vertex(450, 250);
vertex(440, 286);
endShape(CLOSE);
/* left sunglasses*/
colorMode(RGB, 210, 252, 255, 4);
noStroke();
beginShape();
vertex(354, 290);
vertex(356, 260);
vertex(280, 250);
vertex(292, 286);
endShape(CLOSE);
/*glasses bridge*/
fill(210, 252, 255);
noStroke(0);
rect(344, 266, 50, 2);

}

function draw() {

}
``````

I had alot of fun with this assignment and enjoyed how satisfying it was to see each shape come together. I ended up using alot of quadrilaterals to make certain shapes and found it rather challenging to orient myself. Addditionally, I tried to add a css animation in the background for no reason other than me thinking it would look cool; However, after a significant amount of troubleshooting I had to relent. I couldn’t quite get the css to move behind the javascript so I’m excited to revisit this problem in the future.

Yiran Xuan-Project 01-Face

This self portrait was first designed on graph paper, on a 10×10 grid. This allowed me to easily map the shapes onto the 600 x 600 canvas and determine the coordinates for the various shapes.

``````function setup() {
createCanvas(200, 20);
background(220);
text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
createCanvas(600, 600);
background(200);
noStroke();

fill('black');
arc(210, 210, 65, 65, 0, PI, CHORD);

fill('rgb(100%,0%,10%)');
arc(210, 210, 50, 50, 0, PI, CHORD);

fill('#222222');
quad(60, 240, 180, 480, 300, 540, 150, 480);

//fill('black');
triangle(150, 145, 270, 180, 120, 180);
triangle(450, 145, 330, 180, 480, 180);

triangle(320, 210, 360, 320, 320, 340)

quad(320, 210, 480, 210, 420, 260, 320, 240);

quad(540, 300, 450, 480, 330, 540, 450, 360);

triangle(320, 480, 345, 480, 320, 520);

stroke(0);
strokeWeight(5);
line(240, 450, 360, 450);
line(60, 330, 90, 330);

triangle(45, 240, 75, 330, 60, 330);
triangle(285, 300, 280, 345, 255, 355);

//line(300, 0, 300, 600);

arc(280, 380, 30, 30, PI + QUARTER_PI, 0, CHORD);
arc(340, 380, 30, 30, PI, PI + HALF_PI + QUARTER_PI, CHORD);

strokeWeight(10)
line(60, 210, 480, 210);

noFill();
quad(115, 210, 120, 290, 270, 290, 290, 210);
}
``````

Sophie Chen-Project 01-Face

``````function setup() {
createCanvas(600, 600);
background(243, 166, 138);
}

function draw() {
//body
noStroke();
fill(77, 78, 73);
arc(300, 630, 350, 350, PI, TWO_PI);

// hair
noStroke();
fill(36, 38, 33);
quad(100, 100, 160, 100, 210, 550, 70, 450);
quad(360, 100, 460, 100, 520, 450, 390, 550)

noStroke();
fill(255, 224, 182);
ellipse(300, 250, 300, 350);

//neck
rect(275, 400, 50, 80);
ellipse(300, 477, 50, 50);

//ears
noStroke();
fill(255, 224, 182);
ellipse(150, 250, 50, 50);
ellipse(450, 250, 50, 50);

// face
// mouth
fill(255, 100, 80);
arc(300, 300, 70, 80, TWO_PI, PI);
//nose
fill(243, 175, 132);
ellipse(300, 250, 30, 30);
stroke(243, 175, 132);
strokeWeight(15);
line(292, 210, 292, 253);
//right eye
fill(0)
stroke(255, 255, 255);
strokeWeight(5);
ellipse(355, 200, 45, 45);
//left eye
fill(0)
stroke(255, 255, 255);
strokeWeight(5);
ellipse(240, 200, 45, 45);
//right eyebrow
noStroke();
fill(36, 38, 33);
quad(330, 170, 330, 160, 375, 160, 396, 170);
//details
ellipse(385, 225, 5, 5);
fill(248, 187, 182, 70);
ellipse(390, 270, 90, 80);
ellipse(200, 270, 90, 80);

//hat
fill(245, 245, 245);
arc(300, 160, 350, 350, PI, TWO_PI);
stroke(245, 245, 245);
strokeWeight(100);
line(50, 150, 400, 95);
noStroke();
fill(245, 100, 100);
rect(300, 50, 25, 25);
fill(255, 255, 255);
rect(275, 50, 25, 25);
fill(30, 90, 200);
rect(275, 40, 50, 10);
rect(275, 70, 50, 10);

}
``````

Overall I really enjoyed creating this self-portrait. I learned that keeping the code clean and organized is super important and allowed me to have a better grasp of what I’m doing and code more effectively. I also found that rather than trying to make every feature look exactly like mine, incorporating one or two specific details made a huge difference.

Sharon Yang Project 01 Self-Portrait

``````/*Sharon Yang
Section C
junginny
Project-01-Face
*/

function setup() {
createCanvas(600,800);
background(254,230,240);

}
function draw() {
//hair behind the face
fill(50,41,46);
rect(100,535,402,370);
rect();

//face
fill(253,227,204);
noStroke();
ellipse(290,400,450,400);

//bangs
fill(50,41,46);
noStroke();
arc(290,320,430,280,PI,PI+PI,OPEN);
arc(101,308,190,200,0,QUARTER_PI);
arc(150,308,190,200,0,QUARTER_PI);
arc(74,308,190,200,0,QUARTER_PI);
arc(190,308,190,200,0,QUARTER_PI);
arc(230,308,190,200,0,QUARTER_PI);
arc(280,308,190,200,0,QUARTER_PI);
arc(340,308,190,200,0,QUARTER_PI);
arc(400,308,190,200,0,QUARTER_PI);
//hair
noStroke();
arc(119,390,140,200,HALF_PI,PI+HALF_PI);
arc(68,560,140,200,PI+HALF_PI,HALF_PI);
arc(110,670,140,200,HALF_PI,PI+HALF_PI);
arc(470,390,140,200,PI+HALF_PI,HALF_PI);
arc(521,560,140,200,HALF_PI,PI+HALF_PI);
arc(490,670,140,200,PI+HALF_PI,HALF_PI);
//eyebrows
fill(0);
arc(200,415,100,65,PI,TWO_PI);
fill(253,227,204);
arc(200,425,120,65,PI,TWO_PI);
fill(0);
arc(390,415,100,65,PI,TWO_PI);
fill(253,227,204);
arc(390,425,120,65,PI,TWO_PI);
//eyes
fill(0);
ellipse(200,430,85,60);
ellipse(390,430,85,60);
fill(255);
ellipse(225,440,15,15);
ellipse(415,440,15,15);

//nose
stroke(223,197,168);
strokeWeight(4);
line(290,460,310,470);
line(310,470,300,483);
fill(223,197,168);

//mouth
fill(254,126,130);
noStroke();
ellipse(300,520,185,44);
fill(253,227,204);
ellipse(300,514,170,38);

//dimples
stroke(223,197,168);
strokeWeight(3);
arc(194,520,15,15,HALF_PI,PI,OPEN);
arc(400,520,15,15,TWO_PI,HALF_PI,OPEN);

//neck
noStroke();
fill(253,227,204);
rect(235,608,120,100);
fill(253,227,204);
ellipse(295,591,127,100);

//shoulders
fill(5,57,111);
rect(100,660,400,200,80);

//v-neck on the shirt
fill(253,227,204);
noStroke();
triangle(230,660,295,770,360,660);
stroke(255);
strokeWeight(13);
line(238,662,300,770);
line(360,662,300,770);

//ears
fill(253,227,204);
noStroke();
arc(128,460,100,100,HALF_PI,PI+HALF_PI);
arc(461,460,100,100,PI+HALF_PI,HALF_PI);

//earrings
fill(255);
ellipse(123,495,14,14);
ellipse(473,495,14,14);
}``````

I found the self-portrait project really fun but quite time consuming and tough as I was not yet familiar with the functions in javascript. In order to create shapes, curves and lines, I had to look up the functions that would result in creating the objects I wanted. When I could not figure out some of the advanced functions, it required creativity to create the objects using different shapes. As I could not quite figure out using the berzier function, I used arcs to make the curls on my hair. Finding the right coordinates was also quite tedious at first, but I got used to it and so it took less time perfecting them.

Jessica Timczyk – Project 1 – Self Portrait

``````//Jessica Timczyk
//Section D
//jtimczyk@andrew.cmu.edu
//project-01

function setup() {
createCanvas(900, 600);
background(255);
}

function draw() {
//eyeliner
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(372, 170);
curveVertex(372, 170);
curveVertex(367, 154);
curveVertex(397, 127);
curveVertex(441, 122);
curveVertex(414, 118);
curveVertex(392, 122);
curveVertex(372, 138);
curveVertex(361, 150);
curveVertex(361, 150);
endShape();

//eyelash 1
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(441, 122);
curveVertex(441, 122);
curveVertex(460, 110);
curveVertex(472, 96);
curveVertex(453, 110);
curveVertex(432, 120);
curveVertex(432, 120);
endShape();

// eyelash 2
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(436, 120);
curveVertex(436, 120);
curveVertex(445, 104);
curveVertex(444, 89);
curveVertex(439, 103);
curveVertex(426, 120);
curveVertex(426, 120);
endShape();

//eyelash 3
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(427, 120);
curveVertex(427, 120);
curveVertex(433, 100);
curveVertex(429, 88);
curveVertex(427, 104);
curveVertex(417, 119);
curveVertex(417, 119);
endShape();

//eyelash 4
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(414, 118);
curveVertex(414, 118);
curveVertex(418, 105);
curveVertex(414, 92);
curveVertex(410, 110);
curveVertex(400, 123);
curveVertex(400, 123);
endShape();

//eyelash 5
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(396, 125);
curveVertex(396, 125);
curveVertex(398, 112);
curveVertex(392, 103);
curveVertex(391, 117);
curveVertex(387, 127);
curveVertex(387, 127);
endShape();

//eyelash 6
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(382, 131);
curveVertex(382, 131);
curveVertex(381, 122);
curveVertex(371, 113);
curveVertex(373, 130);
curveVertex(372, 140);
curveVertex(372, 140);
endShape();

//eyelash 7
noStroke();
fill(0);
curveTightness(.5);
beginShape();
curveVertex(372, 142);
curveVertex(372, 142);
curveVertex(367, 134);
curveVertex(361, 130);
curveVertex(364, 141);
curveVertex(363, 154);
curveVertex(363, 154);
endShape();

// iris
noFill();
strokeWeight(3);
stroke(0);
curveTightness(.5);
beginShape();
curveVertex(383, 136);
curveVertex(383, 136);
curveVertex(393, 144);
curveVertex(407, 143);
curveVertex(413, 135);
curveVertex(414, 127);
curveVertex(410, 132);
curveVertex(400, 134);
curveVertex(393, 126);
curveVertex(393, 126);
endShape();

// bottom eyelid
curveTightness(.5);
beginShape();
curveVertex(440, 120);
curveVertex(440, 120);
curveVertex(435, 132);
curveVertex(426, 142);
curveVertex(415, 152);
curveVertex(432, 142);
curveVertex(441, 132);
curveVertex(445, 120);
endShape();

// eyebrow
fill(0);
noStroke();
curveTightness(.7);
beginShape();
curveVertex(327, 122);
curveVertex(327, 122);
curveVertex(356, 95);
curveVertex(395, 72);
curveVertex(423, 66);
curveVertex(454, 68);
curveVertex(424, 52);
curveVertex(401, 49);
curveVertex(378, 58);
curveVertex(355, 74);
curveVertex(334, 91);
curveVertex(320, 105);
curveVertex(320, 105);
endShape();

fill(151, 149, 148);
curveTightness(.25);
beginShape();
curveVertex(350, 119);
curveVertex(350, 119);
curveVertex(330, 137);
curveVertex(325, 149);
curveVertex(326, 162);
curveVertex(333, 169);
curveVertex(341, 175);
curveVertex(359, 189);
curveVertex(350, 170);
curveVertex(343, 153);
curveVertex(345, 136);
curveVertex(345, 136);
endShape();

fill(83, 82, 82);
curveTightness(.25);
beginShape();
curveVertex(410, 189);
curveVertex(410, 189);
curveVertex(444, 165);
curveVertex(470, 141);
curveVertex(469, 182);
curveVertex(463, 214);
curveVertex(438, 200);
curveVertex(438, 200);
endShape();

fill(0);
curveTightness(.25);
beginShape();
curveVertex(501, 74);
curveVertex(501, 74);
curveVertex(507, 75);
curveVertex(511, 86);
curveVertex(516, 100);
curveVertex(524, 115);
curveVertex(537, 130);
curveVertex(548, 146);
curveVertex(560, 168);
curveVertex(564, 179);
curveVertex(565, 192);
curveVertex(567, 202);
curveVertex(570, 212);
curveVertex(578, 228);
curveVertex(586, 242);
curveVertex(588, 248);
curveVertex(587, 254);
curveVertex(581, 244);
curveVertex(564, 232);
curveVertex(547, 222);
curveVertex(536, 219);
curveVertex(527, 221);
curveVertex(518, 223);
curveVertex(508, 225);
curveVertex(498, 225);
curveVertex(490, 224);
curveVertex(482, 222);
curveVertex(477, 218);
curveVertex(486, 209);
curveVertex(498, 191);
curveVertex(509, 172);
curveVertex(513, 157);
curveVertex(515, 143);
curveVertex(513, 125);
curveVertex(509, 108);
curveVertex(502, 88);
curveVertex(502, 88);
endShape();

//nose line
curveTightness(1);
beginShape();
curveVertex(301, 152);
curveVertex(301, 152);
curveVertex(309, 169);
curveVertex(325, 182);
curveVertex(346, 199);
curveVertex(360, 210);
curveVertex(374, 211);
curveVertex(374, 211);
endShape();

//right nostril
curveTightness(.5);
beginShape();
curveVertex(387, 226);
curveVertex(387, 226);
curveVertex(397, 226);
curveVertex(406, 228);
curveVertex(418, 235);
curveVertex(417, 245);
curveVertex(415, 251);
curveVertex(410, 256);
curveVertex(403, 259);
curveVertex(396, 258);
curveVertex(395, 247);
curveVertex(394, 235);
curveVertex(394, 235);
endShape();

//nose button
fill(151, 149, 148);
beginShape();
curveVertex(330, 213);
curveVertex(330, 213);
curveVertex(345, 231);
curveVertex(356, 246);
curveVertex(361, 263);
curveVertex(368, 261);
curveVertex(377, 258);
curveVertex(383, 250);
curveVertex(383, 242);
curveVertex(379, 237);
curveVertex(363, 230);
curveVertex(360, 228);
curveVertex(360, 228);
endShape();

//left nostril
fill(0);
beginShape();
curveVertex(375, 279);
curveVertex(375, 279);
curveVertex(357, 281);
curveVertex(356, 295);
curveVertex(366, 297);
curveVertex(376, 286);
curveVertex(376, 286);
endShape();

fill(0);
beginShape();
curveVertex(286, 203);
curveVertex(286, 203);
curveVertex(299, 204);
curveVertex(314, 214);
curveVertex(326, 227);
curveVertex(342, 248);
curveVertex(343, 272);
curveVertex(341, 291);
curveVertex(334, 284);
curveVertex(324, 251);
curveVertex(305, 224);
curveVertex(305, 224);
endShape();

beginShape();
curveVertex(402, 268);
curveVertex(402, 268);
curveVertex(415, 282);
curveVertex(424, 285);
curveVertex(444, 268);
curveVertex(422, 269);
curveVertex(422, 269);
endShape();

//lip
curveTightness(0);
beginShape();
curveVertex(510, 274);
curveVertex(510, 274);
curveVertex(460, 277);
curveVertex(429, 287);
curveVertex(423, 299);
curveVertex(411, 302);
curveVertex(396, 328);
curveVertex(387, 362);
curveVertex(401, 372);
curveVertex(430, 370);
curveVertex(473, 357);
curveVertex(500, 326);
curveVertex(512, 297);
curveVertex(512, 297);
endShape();

beginShape();
curveVertex(578, 315);
curveVertex(578, 315);
curveVertex(550, 385);
curveVertex(530, 411);
curveVertex(462, 432);
curveVertex(494, 438);
curveVertex(554, 444);
curveVertex(570, 428);
curveVertex(583, 379);
curveVertex(583, 379);
endShape();

beginShape();
curveVertex(252, 324);
curveVertex(252, 324);
curveVertex(264, 345);
curveVertex(273, 358);
curveVertex(292, 368);
curveVertex(310, 380);
curveVertex(319, 393);
curveVertex(330, 402);
curveVertex(349, 412);
curveVertex(372, 411);
curveVertex(351, 399);
curveVertex(337, 382);
curveVertex(333, 365);
curveVertex(322, 356);
curveVertex(294, 344);
curveVertex(270, 335);
curveVertex(270, 335);
endShape();

//neck
beginShape();
curveVertex(479, 468);
curveVertex(479, 468);
curveVertex(521, 486);
curveVertex(550, 504);
curveVertex(559, 527);
curveVertex(530, 569);
curveVertex(498, 600);
curveVertex(521, 548);
curveVertex(527, 522);
curveVertex(516, 506);
curveVertex(516, 506);
endShape();

//hair
fill(150);
noStroke();
beginShape();
curveVertex(249, 70);
curveVertex(249, 70);
curveVertex(267, 115);
curveVertex(284, 184);
curveVertex(288, 256);
curveVertex(254, 325);
curveVertex(225, 368);
curveVertex(227, 407);
curveVertex(263, 433);
curveVertex(288, 413);
curveVertex(284, 401);
curveVertex(296, 414);
curveVertex(300, 438);
curveVertex(293, 458);
curveVertex(263, 474);
curveVertex(222, 458);
curveVertex(241, 499);
curveVertex(287, 534);
curveVertex(354, 556);
curveVertex(382, 600);
curveVertex(194, 600);
curveVertex(190, 551);
curveVertex(167, 518);
curveVertex(134, 492);
curveVertex(121, 424);
curveVertex(130, 378);
curveVertex(175, 325);
curveVertex(187, 271);
curveVertex(154, 200);
curveVertex(125, 135);
curveVertex(137, 73);
curveVertex(189, 49);
curveVertex(236, 55);
curveVertex(236, 55);
endShape();

//right lip accent
fill(0);
beginShape();
curveVertex(443, 308);
curveVertex(443, 308);
curveVertex(450, 310);
curveVertex(459, 311);
curveVertex(474, 293);
curveVertex(487, 285);
curveVertex(467, 285);
curveVertex(454, 290);
curveVertex(447, 291);
curveVertex(444, 298);
curveVertex(444, 298);
endShape();

//left lip accent
beginShape();
curveVertex(432, 317);
curveVertex(432, 317);
curveVertex(421, 313);
curveVertex(415, 324);
curveVertex(402, 347);
curveVertex(417, 336);
curveVertex(430, 328);
curveVertex(430, 328);
endShape();

//bottom lip accent
fill(122, 122, 122);
beginShape();
curveVertex(407, 361);
curveVertex(407, 361);
curveVertex(434, 360);
curveVertex(466, 350);
curveVertex(488, 329);
curveVertex(497, 303);
curveVertex(494, 297);
curveVertex(487, 301);
curveVertex(471, 319);
curveVertex(463, 322);
curveVertex(462, 328);
curveVertex(453, 328);
curveVertex(447, 336);
curveVertex(441, 337);
curveVertex(436, 337);
curveVertex(425, 349);
curveVertex(425, 349);
endShape();

//right hair
fill(150);
beginShape();
curveVertex(222, 42);
curveVertex(222, 42);
curveVertex(249, 58);
curveVertex(288, 64);
curveVertex(335, 56);
curveVertex(371, 36);
curveVertex(423, 35);
curveVertex(448, 47);
curveVertex(476, 56);
curveVertex(494, 61);
curveVertex(539, 70);
curveVertex(593, 98);
curveVertex(600, 105);
curveVertex(600, 84);
curveVertex(572, 35);
curveVertex(261, 34);
curveVertex(261, 34);
endShape();

//tearduct
fill(0);
beginShape();
curveVertex(288, 224);
curveVertex(288, 224);
curveVertex(294, 230);
curveVertex(294, 231);
curveVertex(300, 227);
curveVertex(287, 225);
curveVertex(287, 225);
endShape();
}
``````

While creating this piece I gained proficiency in implementing basic objects within p5.js. Entering immense amounts of coordinates for the complex facial shapes was tedious and by the end of the process I learned to create the shapes as efficiently as possible.

Project 1 Self Portrait

Section C

data-width=’470′ data-height=’600′
class=”p5-embed”

Noni Shelton Project-01-Face

``````/*
Noni Shelton
Section B 10:30am
nshelton@andrew.cmu.edu
Face 01
*/

function setup() {
createCanvas(600, 600);
background(200);
//skin tone
fill(51)
rect(100,100,100,420,300);
fill(1);
rect(53,53,500,550, 210);
fill(90,35,5);
ellipse(300,300,330,430);
//eyes
fill(12);
ellipse(357,250,30,30);
ellipse(237,250,30,30);
//right side of glasses
stroke(181,0,255);
strokeWeight(10);
noLoop();
noFill();
rect(196,220,70,70,10);
//left side of glasses
rect(326,220,70,70,10);
//bridge to glasses
fill(255,255,33);
line(270,250,326,250);
//shirt
noStroke();
rect(211,520,180,170,50);
fill(73,255,33);
point(300,300);
//mouth
noStroke();
fill('red');
arc(330,410,110,80,0,PI);
fill(255);
rect(284,410,94,12);
//nose
noStroke();
fill(130,35,5);
rect(280,295,40,85,79);
//bangs
fill(1);
ellipse(350,127,200,145);
//ear
fill(90,35,5);
ellipse(150,345,70,50);
ellipse(450,345,70,50);
//earrings
fill(255);
arc(130,360,20,20,0,PI);
arc(470,360,20,20,0,PI);
}

function draw() {
}
``````

Project 01-Face

``````function setup() {
createCanvas(600, 600);
background(114,160,193);
}

function draw() {
//arm1
noStroke();
fill(255,165,0);
rect(width/2+5,height/2+75,70,100,25,40,5,5);
fill(247,204,160);
rect(width/2+35,height/2+175,30,200);
//body
noStroke();
fill(255,165,0);
ellipse(width/2-30,height,195,550);
rect(width/2,height/2,60,500);
noStroke();
fill(247,204,160);
arc(width/2,height/2,215,225,0,PI);
//filler
fill(114,160,193);
noStroke();
rect(width*5/8-5,height/2,75,90);
//face filler
fill(247,204,160);
arc(width/2+5,height/2+12,200,200,0,270);
//hair
fill(150,86,3);
noStroke();
arc(width/4+65,height/2-20,50,200,0,PI,CHORD);
//ear
fill(247,204,160);
ellipse(width/4+70,height/2+20,30,40);
//hair
fill(150,86,3);
arc(width/4+85,height/2-20,30,140,0,PI,CHORD);
arc(width/4+105,height/2-20,20,100,0,PI,CHORD);
//eyes
fill(255,255,255);
stroke(0,0,0);
strokeWeight(1);
ellipse(width/2,height/2+25,8,8);
ellipse(width/2+45,height/2+25,8,8);
//arm2
noStroke();
fill(255,165,0);
rect(width/4+50,height/2+80,65,110,70,70,5,5);
fill(247,204,160);
rect(width/4+70,height/2+190,35,200);
//mouth
noFill();
stroke(0,0,0);
strokeWeight(2);
curve(width/2+5,height/2+60,width/2+10,height/2+40,width/2+40,height/2+40,width/2+50,height/2+50)
//eyebrows
noFill();
stroke(0,0,0);
strokeWeight(4);
line(width/2+41,height/2+8,width/2+51,height/2+8);
line(width/2-5,height/2+8,width/2+5,height/2+8);
//#nocap
noStroke();
fill(43,43,43);
arc(width/2-5,height/2-20,220,200,PI,TWO_PI);
fill(35,35,35);
rect(width/2-120,height/2-40,230,30,5,5,5,5);

}``````

For my first project, I wanted to create as accurate of a drawing of myself, at least with what I knew about javascript. I often find myself not having a very bright expression, but I’ve come to accept that this is who I am. I am this.

Yingying Yan Project-01-Face

``````/*
Yingying Yan
Waitlist
yingyiny@andrew.cmu.edu
Project 01 Face
*/

function setup() {
createCanvas(500, 500);
background(198,204,201);
}

function draw() {
//hair or hair tie
fill(63,60,60);
rect(width/2-128,length/2.5-270,260,51);
fill(135,163,165);
ellipse(width/2,height/2.5-123,47,32);
fill(63,60,60);
ellipse(width/2,height/2.5-33,185,189);

//ears
fill(240,208,197);
ellipse(width/2-90,height/2.5-5,16,25);
ellipse(width/2+90,height/2.5-5,16,25);

//body parts
fill(240,208,197);
rect(width/2-13,height/2+40,26,18);
line(237,308,250,330);
line(237+26,308,250,330);
line(237,308,250-50,450);
line(237+26,308,250+50,450)

//face
fill(240,208,197);
ellipse(width/2,height/2.5,184,187);

//eyebrows
arc(width/2-45,height/2.5-25,40,20,PI,0);
arc(width/2+45,height/2.5-25,40,20,PI,0);

//mouth
fill(212,118,118);
ellipse(width/2,height/2.5+50,40,40);

//nose
fill(240,208,197);
ellipse(width/2,height/2.5+10,11,11);

//dot
fill(0);
ellipse(width/2+70,height/2.5+2,4.5,4.5);

//eyes
fill(146,129,115);
ellipse(width/2-45,height/2.5-8,26,26);
ellipse(width/2+45,height/2.5-8,26,26);

}
``````

This is my first time coding, so I used as many circles as possible. But it works out because my face always looks surprised. I think I should make another portrait after I finish this class (if I get off the waitlist). It will be fun to compare the before and after.