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.

yinjiet-portrait

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

Self Portrait

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



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


    /*hair shadow*/
    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);


    /*chin shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(370, 300, 100, 160);

    /*head shadow*/
    fill(208, 131, 99);
    noStroke();
    ellipse(366, 260, 180, 200);

    /*head*/
    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.

yiranxuanface

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

sophiec-sketch

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)

	// head
	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-project01

/*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

jessface

//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();

    //eyebrow shadow
    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();

    //under eye shadow 1
    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();

    //cheak shadow
    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();

    //left nose shadow
    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();

    //lip shadow
    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();

    //chin shadow
    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();

    //left cheek shadow
    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.

Sean McGadden Project 1

Sean McGadden

Project 1 Self Portrait

smcgadde

Section C

smcgadde-p1-sketch.js
data-width=’470′ data-height=’600′
class=”p5-embed”

With this sketch I have tried to explain myself in a confident way. Triangles are visually the strongest shape and I wanted to create my face and neck using this structurally strong 2D Primitive. I believe I am a strong willed and perhaps stubborn person. Similarly the triangles, in the creation of this project, were sometimes difficult to work with when coloring them to give some of the tones and shadows. I gave myself red hair for fun.

Noni Shelton Project-01-Face

sketch

/*
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

sketch

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);
	//head
	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);
	rotate(radians(75));
	rect(width/2-128,length/2.5-270,260,51);
	rotate(radians(-75));
	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.