Xiaoyinm-Project-01-Face

sketch

function setup() {

    createCanvas(500,700);
    background(0,24,124);
}

function draw(){
//canvas
  noSmooth();
  noStroke();
  fill(252,123,145);
  rect(0,100,500,500);

//face.left
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(219, 100); // the first control point
  curveVertex(219, 100); // is also the start point of curve
  curveVertex(208, 149);
  curveVertex(211, 195);// the last point of curve
  curveVertex(211, 195); // is also the last control point
  endShape();

  beginShape();
  curveVertex(232, 100); // the first control point
  curveVertex(232, 100); // is also the start point of curve
  curveVertex(230, 145);
  curveVertex(225, 182);
  curveVertex(216, 225);
  curveVertex(221, 270);
  curveVertex(237, 302);
  curveVertex(273, 350);// the last point of curve
  curveVertex(273, 350); // is also the last control point
  endShape();

  line(197,152,195,165);
  line(195,165,197,216);
  line(197,216,216,225);
  line(232,100,486,100);

  noFill();
  stroke(0,24,124);
  beginShape();
  curveVertex(222, 100); // the first control point
  curveVertex(222, 100); // is also the start point of curve
  curveVertex(220, 145);
  curveVertex(215, 182);
  curveVertex(206, 225);// the last point of curve
  curveVertex(206, 225); // is also the last control point
  endShape();

  line(208, 149,199,180);


//face.right
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(486, 100); // the first control point
  curveVertex(486, 100); // is also the start point of curve
  curveVertex(472, 198);
  curveVertex(465, 229);
  curveVertex(456, 260);// the last point of curve
  curveVertex(456, 260); // is also the last control point
  endShape();

  line(471,219,456,260);

  stroke(0,24,143);
  beginShape();
  curveVertex(471,270);
  curveVertex(471,270);
  curveVertex(460,295);
  curveVertex(439,317);
  curveVertex(439,317);
  endShape();
  
  noStroke();
  fill(0,24,124);
  quad(486,100,472,198,500,214,500,100);
  triangle(465,229,472,198,491,199);
  triangle(480,195,500,213,471,270);

//eyebrows
  triangle(251,129,294,115,298,129);
  quad(294,115,298,129,340,145,330,128);
  quad(390,148,392,158,435,147,432,137);
  quad(464,150,463,158,435,147,432,137);

//eyes
  noFill();
  stroke(0,24,124);
  strokeWeight(10);
  arc(290, 153, 80, 50, PI/6, 5*PI/6);
  arc(420, 170, 80, 50, PI/6, 5*PI/6);

  noFill();
  stroke(255,27,143);
  strokeWeight(3);
  arc(290, 155, 80, 50, PI/6, 5*PI/6);
  arc(420, 173, 80, 50, PI/6, 5*PI/6);

//nose
  noStroke();
  fill(0,24,124);
  triangle(324,257,355,260,341,242);

//mouth
  noStroke();
  fill(0,24,124);
  ellipse(276,290,10,8);
  ellipse(383,309,15,10);
  triangle(288,295,331,304,323,312);
  triangle(365,307,331,304,323,312);

  fill(255,27,143);
  ellipse(250,270,20,18);
  ellipse(430,280,30,20);
//neck
  strokeWeight(3);
  noFill();
  stroke(255,27,143);
  beginShape();
  curveVertex(243, 312);// the first control point
  curveVertex(243, 312);// is also the start point of curve
  curveVertex(236, 332); 
  curveVertex(224, 358);
  curveVertex(208, 379);
  curveVertex(185, 395);// the last point of curve
  curveVertex(185, 395); // is also the last control point
  endShape();

//clothes
  stroke(0,24,124);
  line(218,429,142,378);
  line(37,402,142,378);
  line(37,402,0,450);
  line(451,414,500,430);
  line(299,353,327,355);
  fill(0,24,124);
  triangle(331,480,451,414,438,407);

//hair
  noStroke();
  fill(0,24,124);
  quad(218,100,207,148,170,155,173,100);
  triangle(207,148,173,100,172,175);
  triangle(194,200,173,100,172,175);
  quad(233,336,192,344,202,373,225,355);

//earings
  ellipse(195,220,10,10);
  ellipse(199,233,10,10);
  ellipse(206,241,10,10);
 }

I first created a picture in photoshop first and then found the coordinates to create the code.