Cathy Dong-Project-01-Face

sketch

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

function draw() {
    //background extra
    noStroke();
    fill("white");
    triangle(0,600,300,0,600,600);


    //neck
    noStroke();
    fill(249,215,196);
    rect(257,528,86,72);


    //neck outline
    stroke(130,65,57);
    strokeWeight(3);
    line(257,528,257,600);
    line(343,528,343,600);


    //Shirt
    noStroke();
    fill(176,209,255);
    rect(130,557,335,43,100,100,0,0);
    noStroke();
    fill(249,215,196);
    triangle(257, 557, 300, 600, 343, 557);



    //Face Basics
    noStroke();
    fill(249,215,196);
    beginShape();
    //Face
    curveVertex(385,145);
    curveVertex(430,190);
    curveVertex(450,288);
    curveVertex(450,400);
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    endShape(CLOSE);
    //face outline
    stroke(130,65,57);
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(435,440);
    curveVertex(370,514);
    curveVertex(328,530);
    curveVertex(266,530);
    curveVertex(227,506);
    curveVertex(166,442);
    endShape();


    // Right hair basics
    noStroke();
    fill(52,35,25);
    beginShape();
    //Left hair
    curveVertex(373,68);
    curveVertex(354,57);
    curveVertex(336,48);
    curveVertex(300,43);
    curveVertex(212,64);
    curveVertex(135,133);
    curveVertex(84,230);
    curveVertex(64,302);
    curveVertex(51,402);
    curveVertex(48,510);
    curveVertex(74,574);
    curveVertex(193,600);
    curveVertex(217,579);
    curveVertex(231,506);
    //left hair shaping face
    curveVertex(166,442);
    curveVertex(150,400);
    curveVertex(150,359);
    curveVertex(155,300);
    curveVertex(203,266);
    curveVertex(253,205);
    curveVertex(288,165);
    curveVertex(377,150);
    //left hair
    curveVertex(388,120);
    curveVertex(385,100);
    curveVertex(373,67);
    endShape(CLOSE);


    // Right hair basics
    noStroke();
    fill(63,47,37);
    beginShape();
    //Right Hair
    curveVertex(388,120);
    curveVertex(385,110);
    curveVertex(373,67);
    curveVertex(408,76);
    curveVertex(453,106);
    curveVertex(500,182);
    curveVertex(530,300);
    curveVertex(538,430);
    curveVertex(515,543);
    curveVertex(404,590);
    //Right Hair shaping face
    curveVertex(370,514);
    curveVertex(435,440);
    curveVertex(450,400);
    curveVertex(450,288);
    curveVertex(420,190);
    curveVertex(385,145);
    endShape(CLOSE);

   
    //Eye
    fill("white");
    stroke("black");
    strokeWeight(1);
    beginShape();
    //Left
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);//turning point
    curveVertex(263,325);
    curveVertex(245,335);
    curveVertex(224,337);
    curveVertex(202,331);
    curveVertex(183,318);
    endShape(CLOSE); 
    //Right
    beginShape();
    curveVertex(413,318);
    curveVertex(413,318);
    curveVertex(394,331);
    curveVertex(372,337);
    curveVertex(353,335);
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    endShape(CLOSE);

    //Eye Line
    noFill();
    stroke("black");
    strokeWeight(3);
    //Left
    beginShape();
    curveVertex(182,314);
    curveVertex(182,314);
    curveVertex(190,307);
    curveVertex(203,302);
    curveVertex(248,300);
    curveVertex(271,320);
    curveVertex(263,325);
    endShape();
    //Right
    beginShape();
    curveVertex(335,325);
    curveVertex(327,320);//turning point
    curveVertex(350,300);
    curveVertex(395,302);
    curveVertex(408,307);
    curveVertex(416,314);
    curveVertex(413,318);
    endShape();


    //Eyeball
    //Left
    fill(82,63,51);
    strokeWeight(1);
    ellipse(227,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(227,318,20);
    fill("white");
    noStroke();
    ellipse(235,312,8);
    //Right
    fill(82,63,51);
    strokeWeight(1);
    ellipse(370,318,38);
    fill(52,35,25)
    noStroke();
    ellipse(370,318,20);
    fill("white");
    noStroke();
    ellipse(378,312,8);


    //nose 1
    stroke(130,65,57);
    strokeWeight(2);
    noFill();
    beginShape();
    curveVertex(272,384);
    curveVertex(271,384);
    curveVertex(266,395);
    curveVertex(274,401);
    curveVertex(280,397);
    curveVertex(290,405);
    curveVertex(300,412);
    curveVertex(310,405);
    curveVertex(320,397);
    curveVertex(326,401);
    curveVertex(334,395);
    curveVertex(329,384);
    curveVertex(328,384);
    endShape();
    //nose 2
    stroke(130,65,57);
    strokeWeight(1);
    noFill();
    line(315,310,318,370);


    //lip
    //color
    fill(217,92,48);
    noStroke();
    beginShape();
    curveVertex(300,440);
    curveVertex(288,435);
    curveVertex(262,440);
    curveVertex(239,446);
    curveVertex(262,465);
    curveVertex(300,477); //midpoint
    curveVertex(338,465);
    curveVertex(361,446);
    curveVertex(338,440);
    curveVertex(312,435);
    curveVertex(300,440);
    endShape(CLOSE);
    //line
    noFill();
    stroke(130,65,57);
    strokeWeight(2);
    curve(232,380,232,445,368,445,368,380);
    //point
    fill(130,65,57);
    noStroke();
    ellipse(232,445,5);
    ellipse(368,445,5);


    //glass
    noFill();
    stroke("black");
    strokeWeight(3);
    ellipse(227,325,120,110);
    ellipse(370,325,120,110);
    stroke("black");
    strokeWeight(5);
    line(286,312,310,312);
    stroke(255,204,29);
    strokeWeight(3);
    line(286,310,310,310);

}

The very first thing is to draw a rough sketch of myself. I snap pixels with the “guide line” tool in Photoshop. The process is entertaining, even though it was a bit struggle to find the exact point that creates a smooth shape.