Category: Project-01-Face

function setup() {
    createCanvas(375,400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {background(255);
	stroke(255,0,0)
 stroke(255,0,0)
 rect(8,8,354,379)
  line(220,120,230,118)
  line(230,118,235,120)
  line(235,120,242,124)
  line(242,124,240,126)
  line(240,126,234,124)
  line(234,124,226,123)
  line(226,123,222,124)
  fill(255)
  ellipse(222,130,10,12)
  
  line(220,120,210,125)
  line(210,125,205,110)
  line(205,110,202,120)
  line(202,120,201,122)
  line(201,122,200,130)
  line(200,130,205,140)
  line(205,140, 210,150)
  line(210,150,215, 155)


  line(227,176,222, 180)
  line(222,180,218,183)
  line(218,183,212,175)
  line(212,175,213,174)
  line(213,174,217,175)
  line(217,175,217,180)
  line(217,180,215,183)
  line(215,155,225,165)
  line(225,165,227,175)
  
  line(215,183,210,186)
  line(210,186,208,194)
  line(208,194,211,200)
  line(211,201,208,204)
  line(208,204,202,199)
  line(202,199,200,200)
  line(200,200,192,202)
  line(192,202,182,206)
  line(182,206,175,209)
  line(175,209,170,213)
  line(170,213,169,213)
  line(169,213,172,215)
  line(172,215,176,218)
  line(176,218,180,217)
  line(180,217,184,216)
  line(184,216,192,215)
  line(192,215,198,212)
  line(198,212,200,212)
  line(200,212,205,216)
  line(205,216,206,218)
  line(206,218,210,214)
  line(210,214,213,213)
  line(213,213,217,216)
  line(217,216,223,214)
  line(223,214,228,217)
  line(228,217,226,220)
  line(226,220,223,223)
  line(223,223,217,226)
  line(217,226,210,231)
  line(210,231,207,232)
  line(207,232,197,229)
  line(197,229,190,228)
  line(190,228,182,225)
  line(182,225,180,228)
  line(180,228,188,234)
  
  line(188,234,198,236)
  line(198,236,204,242)
  line(204,242,204,246)
  line(204,246,200,249)
  line(200,249,197,249)
  line(197,249,195,249)
  line(195,249,192,251)
  line(192,251,190,255)
  line(190,255,190,259)
  line(190,259,187,262)
  line(187,262,184,264)
  line(184,264,181,262)
  line(181,262,179,262)
  line(179,262,165,256)
  line(165,256,160,252)
  line(160,252,146,242)
  line(146,242,136,236)
  noFill()
  arc(136,285,60,100,300,PI/8.0) 
  
  
  
  
 
  
  line(228,217,230,215)
  line(230,215,230,213)
  line(230,213,225,207)
  line(225,207,217,203)




  stroke(0,0,255)
  rect(12,12,354,379)
  line(224,124,234,122)
  line(234,122,239,124)
  line(239,124,246,128)
  line(246,128,244,130)
  line(244,130,238,128)
  line(238,128,230,127)
  line(230,127,226,128)
  fill(255)
  ellipse(226,134,10,12)
  
  line(224,124,214,129)
  line(214,129,209,114)
  line(209,114,206,124)
  line(206,124,205,126)
  line(205,126,204,134)
  line(204,134,209,144)
  line(209,144, 214,154)
  line(214,154,219, 159)


  line(231,180,226, 184)
  line(226,184,222,187)
  line(222,187,216,179)
  line(216,179,217,178)
  line(217,178,221,179)
  line(221,179,221,184)
  line(221,184,219,187)
  line(219,159,229,169)
  line(229,169,231,179)
  
  line(219,187,214,190)
  line(214,190,212,198)
  line(212,198,215,204)
  line(215,205,212,208)
  line(212,208,206,203)
  line(206,203,204,204)
  line(204,204,196,206)
  line(196,206,186,210)
  line(186,210,179,213)
  line(179,213,174,217)
  line(174,217,173,217)
  line(173,217,176,219)
  line(176,219,180,222)
  line(180,222,184,221)
  line(184,221,188,220)
  line(188,220,196,219)
  line(196,219,202,216)
  line(202,216,204,216)
  line(204,216,209,220)
  line(209,220,210,222)
  line(210,222,214,218)
  line(214,218,217,217)
  line(217,217,221,220)
  line(221,220,227,218)
  line(227,218,232,221)
  line(232,221,230,224)
  line(230,224,227,227)
  line(227,227,221,230)
  line(221,230,214,235)
  line(214,235,211,236)
  line(211,236,201,233)
  line(201,233,194,232)
  line(194,232,186,229)
  line(186,229,184,232)
 
  
  line(232,221,234,219)
  line(234,219,234,217)
  line(234,217,229,211)
  line(229,211,221,207)
  
  line(184,232,192,238) 
  line(192,238,202,240)
  line(202,240,208,246)
  line(208,246,208,250)
  line(208,250,204,253)
  line(204,253,201,253)
  line(201,253,199,253)
  line(199,253,196,255)
  line(196,255,194,259)
  line(194,259,194,263)
  line(194,263,191,266)
  line(191,266,188,268)
  line(188,268,185,266)
  line(185,266,183,263)
  line(183,263,169,260)
  line(169,260,164,256)
  line(164,256,150,246)
  line(150,246,140,240)
  noFill()
  arc(140,289,60,100,300,PI/8.0) 
  
  
}

function setup() {
    createCanvas(250, 250);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    //background ceiling
    fill(255, 164, 83);
    noStroke();
    quad(0,0,114,70,250,71,250,0)

    //background back wall
    fill(255, 139, 35);
    noStroke();
    rect(114,70,249,248);

    //background front wall
    fill(255, 177, 108);
    noStroke();
    quad(1,0,115,69,116,249,0,221)

    //ponytail
    fill(35, 25, 15);
    noStroke();
    beginShape();
    vertex(186,86);
    vertex(197,87);
    vertex(206,99);
    vertex(209,121);
    vertex(204,145);
    vertex(199,165);
    vertex(192,185);
    vertex(192,205);
    vertex(207,226);
    vertex(192,221);
    vertex(174,212);
    vertex(165,201);
    vertex(159,186);
    endShape();

    //right shoulder
    fill(163, 103, 146);
    noStroke();
    beginShape();
    vertex(163,188);
    vertex(189,204);
    vertex(212,215);
    vertex(229,219);
    vertex(250,226);
    vertex(250,250);
    vertex(157,250);
    vertex(165,208);
    endShape();

    //left shoulder
     fill(153, 98, 138);
    noStroke();
    beginShape();
    vertex(72,191);
    vertex(112,249);
    vertex(0,249);
    vertex(0,222);
    vertex(21,213);
    vertex(45,204);
    endShape();

    //ear
	fill(227, 180, 156);
    noStroke();
    beginShape();
    vertex(174,119);
    vertex(189,114);
    vertex(199,119);
    vertex(197,136);
    vertex(194,150);
    vertex(186,165);
    vertex(176,175);
    vertex(164,174);
    vertex(174,146);
    vertex(175,131);
    endShape();

    //ear shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(180,123);
    vertex(189,121);
    vertex(194,125);
    vertex(193,134);
    vertex(188,144);
    vertex(183,156);
    vertex(175,158);
    vertex(184,144);
    vertex(185,133);
    endShape();

    //neck
    fill(227, 180, 156);
    noStroke();
    beginShape();
    vertex(159,176);
    vertex(133,194);
    vertex(93,204);
    vertex(71,194);
    vertex(97,227);
    vertex(102,250);
    vertex(158,250);
    vertex(171,224);
    vertex(174,202);
    vertex(163,190);
    endShape();
    
    //face
	fill(235, 186, 161);
    noStroke();
    beginShape();
    vertex(102,29);
    vertex(74,45);
    vertex(66,63);
    vertex(61,84);
    vertex(55,101);
    vertex(49,121);
    vertex(48,141);
    vertex(55,160);
    vertex(62,176);
    vertex(69,193);
    vertex(73,209);
    vertex(87,217);
    vertex(107,217);
    vertex(135,204);
    vertex(155,189);
    vertex(171,164);
    vertex(176,138);
    vertex(179,116);
    vertex(184,90);
    vertex(182,68);
    vertex(170,50);
    vertex(139,34);
    vertex(123,28);
    endShape();
    
    //nose shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(91,96);
    vertex(93,107);
    vertex(90,121);
    vertex(86,135);
    vertex(80,140);
    vertex(74,144);
    vertex(74,151);
    vertex(80,156);
    vertex(72,170);
    vertex(64,146);
    vertex(80,125);
    vertex(85,109);
    vertex(76,88);
    endShape();

    //nostril shadow
    fill(170, 122, 90);
    noStroke();
    beginShape();
    vertex(80,155);
    vertex(87,152);
    vertex(90,158);
    vertex(97,161);
    vertex(106,156);
    vertex(113,160);
    vertex(91,172);
    vertex(72,170);
    endShape();

    //right cheek shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(122,145);
    vertex(122,153);
    vertex(118,159);
    vertex(112,159);
    vertex(134,179);
    endShape();

    //left eyelash
    fill(0);
    noStroke();
    beginShape();
    vertex(55,108);
    vertex(65,103);
    vertex(74,103);
    vertex(82,106);
    vertex(88,115);
    endShape();

    //lips
    fill(227, 149, 147);
    noStroke();
    beginShape();
    vertex(71,171);
    vertex(82,169);
    vertex(90,170);
    vertex(93,172);
    vertex(100,171);
    vertex(109,171);
    vertex(127,178);
    vertex(116,183);
    vertex(101,187);
    vertex(89,187);
    vertex(77,179);
    endShape();

    //top lip
    fill(214, 124, 122);
    noStroke();
    beginShape();
    vertex(71,171);
    vertex(82,169);
    vertex(90,170);
    vertex(93,172);
    vertex(100,171);
    vertex(109,171);
    vertex(126,177);
    vertex(117,179);
    vertex(102,179);
    vertex(90,178);
    vertex(81,176);
    endShape();

    //nose highlight
    fill(242, 198, 169);
    noStroke();
    circle(92, 150, 22);

    //right cheek highlight
    fill(242, 198, 169);
    noStroke();
    beginShape();
    vertex(162,115);
    vertex(150,130);
    vertex(141,136);
    vertex(133,142);
    vertex(144,160);
    vertex(152,184);
    vertex(165,157);
    vertex(165,131);
    endShape();

    //left cheek highlight
    fill(242, 198, 169);
    noStroke();
    beginShape();
    vertex(83,123);
    vertex(65,119);
    vertex(56,114);
    vertex(55,128);
    vertex(65,150);
    vertex(74,136);
    endShape();

    //left eye
    fill(255, 243, 235);
    noStroke();
    beginShape();
    vertex(58,110);
    vertex(67,107);
    vertex(75,108);
    vertex(88,117);
    vertex(79,118);
    vertex(69,115);
    endShape();

    //left iris
    fill(59, 43, 24);
    circle(71,111,12);

    //left pupil
    fill(0);
    circle(71,111,6);

    //right eyelash
    fill(0);
    noStroke();
    beginShape();
    vertex(106,118);
    vertex(116,112);
    vertex(130,111);
    vertex(141,117);
    vertex(145,123);
    vertex(128,123);
    endShape();

    //right eye
    fill(255, 243, 235);
    noStroke();
    beginShape();
    vertex(110,119);
    vertex(122,115);
    vertex(130,116);
    vertex(141,121);
    vertex(132,122);
    vertex(117,122);
    endShape();

    //right iris
    fill(59, 43, 24);
    circle(127,119,12);

    //right pupil
    fill(0);
    circle(127,119,6);

    //left highlight
    fill(255)
    circle(69,109,2)

    //right highlight
    fill(255)
    circle(125,117,2)

    //hair
    fill(45, 33, 18);
    noStroke();
    beginShape();
    vertex(153,40);
    vertex(168,43);
    vertex(181,52);
    vertex(185,64);
    vertex(188,76);
    vertex(187,87);
    vertex(183,104);
    vertex(180,119);
    vertex(175,130);
    vertex(167,128);
    vertex(161,109);
    vertex(154,96);
    vertex(147,86);
    vertex(147,72);
    endShape();

    //bang shadow
    fill(181, 132, 99);
    noStroke();
    beginShape();
    vertex(58,80);
    vertex(55,94);
    vertex(94,95);
    vertex(104,80);
    vertex(110,95);
    vertex(146,102);
    vertex(161,118);
    vertex(161,95);
    vertex(97,64);
    endShape();

    //bangs
    fill(59, 43, 24);
    noStroke();
    beginShape();
    vertex(110,25);
    vertex(95,20);
    vertex(71,29);
    vertex(55,59);
    vertex(58,84);
    vertex(87,91);
    vertex(102,70);
    vertex(106,84);
    vertex(115,95);
    vertex(159,108);
    vertex(161,68);
    vertex(156,46);
    vertex(146,27);
    vertex(136,21);   
    endShape();

    //left eyebrow
    fill(45, 33, 18);
    noStroke();
    beginShape();
    vertex(55,89);
    vertex(75,88);  
    vertex(91,96);
    vertex(89,103);
    vertex(73,94);  
    vertex(55,92);
    vertex(55,89);    
    endShape();

    //right eyebrow
    fill(45, 33, 18);
    noStroke();
    beginShape();
    vertex(110,100);
    vertex(128,99);
    vertex(144,102);
    vertex(154,110);
    vertex(158,115);
    vertex(135,106);
    vertex(109,106);
    endShape();

    //bright cheek highlight
    fill(255, 225, 197);
    noStroke();
    triangle(153,124,133,138,146,158)

    //left cheek blush
    fill(226, 159, 158);
    noStroke();
    circle(64,131,20);

    //right cheek blush
    fill(226, 159, 158);
    noStroke();
    circle(135,142,25);

    //right lens
    fill(255, 255, 255, 60);
    stroke(10);
    strokeWeight(2);
    circle(125,128,45)

    //left lens
    fill(255, 255, 255, 60);
    stroke(10);
    strokeWeight(2);
    circle(68,118,40)

    //nose piece
    arc(96, 118, 18, 8, 0, PI, PI + QUARTER_PI);

    //frame
    line(146,121,187,113);

    //bright nose highlight
    fill(255, 225, 197);
    noStroke();
    circle(100,149,10)

    //lip highlight
    fill(247, 200, 206);
    noStroke();
    ellipse(104, 180, 8, 3)



}

function setup() {
    createCanvas(600, 800);
    background(100);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(100);
	fill(163, 116, 96);
	noStroke();
	ellipse(300, 400, 320, 450 );
	fill(111, 84, 54)
	quad(151, 230, 227, 100, 480, 90, 400, 230)
	noFill();
	stroke(0);
	strokeWeight(3)
	arc(187, 363, 189, 189, PI + HALF_PI + QUARTER_PI, TWO_PI + QUARTER_PI);
	arc(415, 363, 189, 189, HALF_PI + QUARTER_PI, PI + HALF_PI);
	arc(265, 450, 50, 50, HALF_PI, PI + QUARTER_PI);
	arc(335, 450, 50, 50, PI + HALF_PI + QUARTER_PI, TWO_PI + HALF_PI);
	fill(0);
	noStroke();
	ellipse(209, 363, 60, 48)
	fill(100);
	noStroke();
	arc(200, 400, 320, 450, PI, PI + HALF_PI);
	fill(163, 116, 96);
	noStroke();
	arc(100, 400, 125, 350, PI, PI + HALF_PI);
	fill(0);
	circle(390, 363, 60);
	fill(34, 70, 144)
	ellipse(380, 363, 15, 35);
	ellipse(198, 363, 15, 35);
	fill(157, 78, 74)
	quad(230, 500, 335, 485, 330, 515, 225, 510)
	quad(230, 510, 335, 510, 330, 525, 225, 520)
	fill(0)
	triangle(240, 510, 325, 498, 330, 510)
}

function setup() {
    createCanvas(600, 600);  
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background(255,215,54);
    //Head construction
    noFill(); 62
    stroke(0);
    strokeWeight(0);
    circle(300,250,282);
    line(159,256,441,256); //eyebrow line
    line(159,403,441,403); //nose line
    line(159,477,441,477); //mouth line
    line(159,250,159,450); //left side
    line(441,250,441,450); //right side
    line(230,552,370,552); //jaw line
    line(159,450,230,552); //left jaw
    line(441,450,370,552); //right jaw
    line(230,552,230,109); //left construction line
    line(370,552,370,109); //right construction line
    //flats
    fill(153,102,51);
    noStroke();
    circle(300,250,282);
    quad(159,256,159,450,441,450,441,256);
    quad(159,450,441,450,370,552,230,552);
    
    //shadows
    fill(84,26,14,200);
    triangle(230,552,159,380,159,450); //left jaw shadow
    triangle(441,380,441,450,370,552); //right jaw shadow
    ellipse(231,289,106,66); //left eye socket shadow
    ellipse(359,289,106,66); //right eye socket shadow
    triangle(284,289,270,370,255,380); //left nose plane
    triangle(306,289,330,370,345,380); //right nose plane
    triangle(270,390,300,403,300,393); //bottom nose shadow
    triangle(300,403,300,393,330,390);
    quad(205,450,210,490,300,477,300,438); //lip shadow
    quad(300,477,385,490,390,450,370,445);
    triangle(230,552,370,552,300,530); //chin shadow
    quad(159,370,159,305,200,365,200,400); //left cheekbone shadow
    quad(441,370,441,305,400,365,400,400); //right cheekbone shadow
    quad(159,265,165,170,200,100,200,238); //forehead shadow left
    quad(441,265,435,170,400,100,400,238); //forehead shadow right


    
    //facial features
    noFill();
    stroke(84,26,14,230);
    strokeWeight(5);
    curve(270,370,270,370,255,380,270,390); //left nose
    curve(255,380,255,380,270,390,270,390);
    curve(270,390,270,390,300,403,330,390); //middle of nose
    curveVertex(300,403);
    curve(300,403,300,403,330,390,330,390);
    curve(330,390,330,390,345,380,330,370); //right nose
    curve(345,380,345,380,330,370,330,370);
    noStroke();
    fill(153,51,51,205);
    beginShape(); //lower lip
        curveVertex(230,445);
        curveVertex(265,470);
        curveVertex(300,477);
        curveVertex(335,470);
        curveVertex(370,445);
        curveVertex(300,410);
    endShape(CLOSE);
    fill(102,102,102);
    ellipse(231,289,50,27); //left eyeball
    ellipse(359,289,50,27); //right eyeball
    fill(255,150);
    ellipse(231,289,50,27); //left eyeball
    ellipse(359,289,50,27); //right eyeball
    fill(36,24,15);
    circle(231,289,27); //left iris
    circle(359,289,27); //right iris
    fill(0);
    circle(231,289,10); //left pupil
    circle(359,289,10); //right pupil
    noFill();
    stroke(84,26,14);
    strokeWeight(5);
    curve(190,289,190,289,231,276,270,285); //eyelid line left
    curveVertex(231,276);
    curve(231,276,231,276,270,285,270,285);
    curve(318,285,318,285,359,276,398,285); //eyelid line right
    curve(359,276);
    curve(359,276,359,276,398,285,398,285);


       //hair
    noStroke();
    fill(0);
    beginShape(); //head hair
        curveVertex(165,325);
        curveVertex(173,200);
        vertex(175,200);
        curveVertex(179,190);
        curveVertex(185,185);
        curveVertex(215,175);
        vertex(265,180);
        vertex(270,182);
        vertex(320,190);
        curveVertex(345,175);
        vertex(430,200);
        vertex(430,310);
        vertex(443,325);
        curveVertex(450,185);
        curveVertex(447,50);
        vertex(445,35);
        vertex(400,45);
        vertex(350,50);
        curveVertex(300,20);
        curveVertex(250,40);
        curveVertex(225,35);
        curveVertex(215,37);
        curveVertex(200,35);
        curveVertex(200,50);
        curveVertex(190,60);
        curveVertex(190,70);
        curveVertex(175,85);
        curveVertex(170,90);
        curveVertex(160,150)
        curveVertex(165,170);
        vertex(150,300);
    endShape(CLOSE);
    beginShape(); //left eyebrow
        vertex(175,260);
        curveVertex(200,246);
        vertex(270,260);
        vertex(270,250);
        curveVertex(235,234);
        curveVertex(200,236);
        curveVertex(190,240);
    endShape(CLOSE);
    beginShape(); //right eyebrow
        vertex(312,260);
        vertex(312,250);
        curveVertex(347,234);
        curveVertex(382,236);
        curveVertex(392,240);
        vertex(407,260);
        curveVertex(382,246);
    endShape(CLOSE);
    beginShape(); //beard
        vertex(159,450);
        curveVertex(190,520);
        curveVertex(220,555);
        curveVertex(300,590); //beard center point
        curveVertex(381,555);
        curveVertex(410,520);
        vertex(441,450);
        curveVertex(380,530);
        curveVertex(350,537);
        curveVertex(300,540);
        curveVertex(250,537);
        curveVertex(220,530);
    endShape(CLOSE);
    quad(210,413,300,406,300,438,205,450); //mustache left
    quad(300,406,300,438,390,450,385,413); //mustache right
        

        



}

function setup() {
    createCanvas(800,600);
    background(0);

}

function draw() {
    //reference grid
      stroke(80,80,80,10)
      line(0,100,799,100);
      line(0,200,799,200);
      line(0,300,799,300);
      line(0,400,799,400);
      line(0,500,799,500); // x grid lines
      line(200,0,200,599);
      line(400,0,400,599);
      line(600,0,600,599); // y grid lines
      noLoop();

    //background
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,150,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,250,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,350,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,450,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(100,550,50,50);

      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,150,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,250,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,350,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,450,50,50);
      fill(random(0,225),random(0,225),random(0,225));
        ellipse(700,550,50,50);

      fill(random(0,225),random(0,225),random(0,225));
          ellipse(300,50,50,50);
      fill(random(0,225),random(0,225),random(0,225));
          ellipse(500,50,50,50);

    //body
      fill(255,255,245);
      rect(200,430,400,300,90);
      fill(235,235,235);
      quad(275,430,370,470,350,410,280,420)
      quad(800-275,430,800-370,470,800-350,410,800-280,420)
      fill(20,20,20);
      line(290,510,290,599);
      line(510,510,510,599);
      textSize(15);
      text('15104',460,520);

    //headshape
      loop();
      fill(253, 211, 159);
      ellipse(400,300,270,300);
      stroke(0,0,0);
      strokeWeight(2);

    //nose
      stroke(0,0,0);
      strokeWeight(4)
      line(400,280,410,325);
      line(410,325,395,335);
      arc(390,335,10,5,PI,0);
      arc(400,335,7,3,PI,0);


    //mouth
      fill(0,0,0)
      noStroke();
      arc(390,380,60,35,0,PI);
      fill(255,255,255);
      arc(390,380,45,20,0,PI);

    //eyebrows
      fill(0,0,0)
      quad(315,280,370,270,360,260,325,268);
      quad(800-315,280,800-370,270,800-360,260,800-325,268);

    //eyes
      ellipse(340,280,30);
      ellipse(800-340,280,30);

    //glasses
      noFill();
      stroke(104,63,18);
      ellipse(340,280,80);
      ellipse(800-340,280,80);
      arc(400,290,40,15,PI,0)

    //hat
      fill(42,79,109);
      noStroke();
      arc(400,260,260,220,PI,0);
      fill(34,29,59,100);
      rect(273,230,255,30);
      fill(34,29,59);
      ellipse(400,150,20,20);

}

function setup() {
    createCanvas(600, 600);
    background(230);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {

//hair
    background(252, 225, 152);
    fill(56, 39, 35);
    rect(140, 60, 320, 540, 130, 130, 70, 70);

//head
	fill(240, 208, 180);
	noStroke();
    rect(175, 100, 250, 300, 100, 180, 100, 100);
    rect(265, 370, 70, 120, 30);
    rect(170, 461, 260, 96, 30);
    ellipse(431, 300, 24, 47);
    noFill();

//eyebrows
    stroke(74, 50, 34);
    strokeWeight(8);
    line(290, 200, 340, 200);
    line(180, 200, 225, 200);
    noStroke();

//nose
    stroke(236, 193, 156);
    strokeWeight(3);
    noFill();
    beginShape();
    curveVertex(240, 268);
    curveVertex(240, 268);
    curveVertex(231, 280);
    curveVertex(229, 293);
    curveVertex(235, 301);
    curveVertex(235, 301);
    endShape();
    noStroke();

//moles
    fill(74, 20, 0);
    ellipse(307, 362, 2, 2);
    ellipse(347, 278, 5, 5);
    ellipse(212, 286, 3, 3);

//eyes
    fill(255);
    noStroke();
    ellipse(310, 236, 36, 21);
    ellipse(204, 236, 36, 21);
    stroke(0);
    strokeWeight(4);
    noFill();
    beginShape();
    curveVertex(292, 231);
    curveVertex(292, 231);
    curveVertex(309, 223);
    curveVertex(328, 230);
    curveVertex(340, 233);
    curveVertex(351, 226);
    curveVertex(351, 226);
    endShape();
    beginShape();
    curveVertex(223, 231);
    curveVertex(223, 231);
    curveVertex(208, 223);
    curveVertex(188, 230);
    curveVertex(188, 230);
    endShape();
    fill(0);
    ellipse(310, 235, 18, 18);
    ellipse(206, 235, 18, 18);
    noStroke();

//shirt
    fill(240, 208, 180);
    noStroke();
    rect(415, 529, 55, 200);
    rect(130, 529, 55, 200);
    fill(255);
    noStroke();
    beginShape();
    curveVertex(413, 550);
    curveVertex(413, 550);
    curveVertex(416, 517);
    curveVertex(421, 494);
    curveVertex(427, 476);
    curveVertex(441, 477);
    curveVertex(456, 487);
    curveVertex(467, 500);
    curveVertex(474, 516);
    curveVertex(475, 530);
    curveVertex(464, 537);
    curveVertex(451, 545);
    curveVertex(432, 552);
    curveVertex(432, 552);
    endShape();
    beginShape();
    curveVertex(185, 550);
    curveVertex(185, 550);
    curveVertex(182, 516);
    curveVertex(178, 493);
    curveVertex(172, 476);
    curveVertex(157, 477);
    curveVertex(140, 487);
    curveVertex(132, 500);
    curveVertex(125, 516);
    curveVertex(124, 529);
    curveVertex(135, 537);
    curveVertex(148, 545);
    curveVertex(167, 551);
    curveVertex(167, 551);
    endShape();
    rect(180, 550, 240, 100);

//hair 2 
    stroke(232, 222, 218);
    strokeWeight(30);
    line(189, 155, 189, 570);
    line(372, 130, 372, 570);
    noFill();
    beginShape();
    curveVertex(295, 104);
    curveVertex(295, 104);
    curveVertex(336, 103);
    curveVertex(364, 114);
    curveVertex(374, 142);
    curveVertex(374, 142);
    endShape();
    beginShape();
    curveVertex(189, 159);
    curveVertex(189, 159);
    curveVertex(196, 133);
    curveVertex(222, 112);
    curveVertex(248, 107);
    curveVertex(270, 106);
    curveVertex(270, 106);
    endShape();
    noStroke();
    fill(56, 39, 35);
    rect(386, 100, 39, 485, 60);

//earring
    noFill();
    stroke(233, 233, 233);
    strokeWeight(4);
    ellipse(431, 377, 61, 123);
    noStroke();

//mouth
    noStroke();
    fill(240, 190, 180);
    beginShape();
    curveVertex(217, 335);
    curveVertex(217, 335);
    curveVertex(221, 328);
    curveVertex(228, 324);
    curveVertex(235, 323);
    curveVertex(243, 324);
    curveVertex(250, 326);
    curveVertex(255, 330);
    curveVertex(258, 335);
    curveVertex(253, 340);
    curveVertex(245, 341);
    curveVertex(238, 342);
    curveVertex(230, 341);
    curveVertex(224, 339);
    curveVertex(224, 339);
    endShape();
    stroke(212, 113, 139);
    strokeWeight(3);
    line(220, 333, 255, 333);
    noStroke();
    



}

function setup() {
    createCanvas(700, 500);
    background(247, 208, 245);
    var purple = color(202, 163, 246);
    var blue = color(0, 128, 255);
    var green = color(153, 255, 153);
    var yellow = color(255, 255, 153);
    var orange = color(255, 204, 153);
    var red  =  color(255,  153, 153);
    fill(purple);
    noStroke();
    circle(350, 250, 800);
    fill(blue);
    circle(350, 250, 700);
    fill(green);
    circle(350, 250, 600);
    fill(yellow);
    circle(350, 250, 500);
    fill(orange);
    circle(350, 250, 400);
    fill(red);
    circle(350, 250, 300);

}

function draw() {
    var skin = color(252, 224, 158);
    var white = color(255);
    var black = color(0);
    var brown = color(184, 134, 11);
    var pink = color(255, 102, 255);
    var light_pink = color(255, 204, 204);
    var dark_brown = color(102, 51, 0);
    var red  =  color(255,  153, 153);
    var orange = color(255, 204, 153);
    var light_blue = color(102, 178, 255);
    var neon_yllow = color(255, 255, 51);

//SHAPES
    noFill();
    strokeWeight(15);
    stroke(neon_yllow);
    bezier(95, 120, 20, 120, 100, 200, 25, 190);
    stroke(pink);
/*line(95, 130, 20, 130);
  line(100, 210, 25, 200);*/
    bezier(95, 130, 20, 130, 100, 210, 25, 200);
    stroke(pink);
    bezier(550, 470, 630, 290, 600, 550, 650, 370);
    stroke(neon_yllow);
    bezier(550, 480, 630, 300, 600, 560, 650, 380);
    strokeWeight(1);
    stroke(black);
    fill(white);
    triangle(75, 80, 90, 150, 140, 100);
    fill(black);
    triangle(65, 80, 80, 150, 130, 100);
    fill(white);
    triangle(600, 400, 630, 330, 680, 380);
    fill(black);
    triangle(605, 395, 635, 325, 685, 375);



//hair
    noStroke();
    fill(dark_brown);
    ellipse(350, 360, 460, 700)


//clothes
    noStroke();
    fill(light_blue);
    rect(180, 400, 340, 400, 50);

//face
    fill(skin);
    noStroke();
    ellipse(350, 250, 350, 380);

//hair
    fill(dark_brown);
    arc(350, 170, 300, 230, PI, 0);
    strokeWeight(2);
    stroke(black);
    fill(red);
    circle(230, 100, 35);
    circle(215, 125, 35);

//cheeks
    noStroke();
    fill(light_pink, 150);
    circle(230, 300, 93);
    fill(light_pink, 150);
    circle(470, 300, 93);

//freckles
    //leftside
    stroke(brown);
    strokeWeight(3);
    point(230, 320);
    point(240, 328);
    point(225, 280);
    point(195, 325);
    point(200, 295);
    point(237, 284);
    point(260, 310);
    
   //rightside 
    point(475, 320);
    point(460, 319);
    point(488, 295);
    point(462, 298);
    point(482, 334);
    point(452, 283);
    point(430, 320);
    point(478, 264);
    point(500, 318);

//eyes    
    strokeWeight(3);
    stroke(black);
    fill(white);
    circle(280, 230, 100);
    fill(white);
    circle(420, 230, 100);
    strokeWeight(1);
    stroke(black);
    fill(brown);
    circle(280, 230, 25);
    fill(brown);
    circle(420, 230, 25);
    fill(black);
    circle(280, 230, 15);
    fill(black);
    circle(420, 230, 15);
    fill(white);
    ellipse(275, 233, 8, 5);
    fill(white);
    ellipse(415, 233, 8, 5);

//eyelashes
    strokeWeight(3);
    stroke(black);
    noFill();
    arc(230, 220, 50, 50, 0-3*PI/2, PI);
    arc(470, 220, 50, 50, 0, 0-3*PI/2);

//mouth&nose
    strokeWeight(2);
    stroke(black);
    fill(light_pink);
    arc(350, 360, 35, 20, 0, PI);
    noFill();
    arc(350, 290, 35, 35, PI+PI/4, 11*PI/6)




}

//Flora Xia Section B
function setup() {
    createCanvas(200, 200);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(255,204,229)
    fill(255,153,204)//medpink
    noStroke()
    square(0,0,70)
    fill(255,102,178,150)
    rect(50,50,140,90)
    fill(255,153,199,200)
    triangle(100,100,10,150,50,170)
    //end of background
    //hair brown
    stroke(102,51,0)
    fill(102,51,0)
    ellipse(100,120,130,180)
    rect(38,140,125,80)
    //face shape
    noStroke()
    fill(222,184,135)
    ellipse(100,110, 105,140)
    //cheeks
    noStroke()
    fill(205,133,63,150)
    triangle(50,120,60,150,70,152)
    triangle(150,120,140,150,130,152)
    //nose
    fill(255,204,153, 150)
    circle(100,135,10)
    circle(105,137,5)
    circle(95,137,5)
    //nose bridge
    noFill()
    stroke(255,204,153,150)
    arc(95,120,5,35,4.71,1.57)
    //hair front
    stroke(255,250,204)
    fill(102,51,0)
    arc(136,45,75,120,1.75,3.1415)
    arc(65,45,75,120,0,1.5)
    noStroke()
    rect(78,35,45,10)
    triangle(100,30,50,150,55,60)
    triangle(90,35,150,150,140,55)
    rect(45,73,10,80)
    rect(142,73,14,80)
    //hair pin
    fill(143,188,143)
    circle(138,70,7)
    fill(255,215,0)
    circle(143,70,7)
    circle(140,65,7)
    circle(134,66,7)
    circle(134,72,7)
    circle(140,74,7)
    //eye
    stroke(0)
    fill(255,255,255,150)
    arc(75,110,20,7,3.1415,0)
    arc(125,110,20,7,3.1415,0)
    //pupils
	fill(102,51,0)
    stroke(0,0,0,150)
    circle(75,110,7)
    circle(125,110,7)
    fill(0,0,0,200)
    noStroke()
    circle(75,110,3)
    circle(125,110,3)
    fill(255)
    circle(74,109,1)
    circle(124,109,1)
    ellipse(126,111,2,1)
    ellipse(76,111,2,1)
    //lips
    noFill()
    stroke(255,0,0,50)
    arc(95,150,10,5,3.1415,0)
    arc(105,150,10,5,3.1415,0)
    arc(100,155,25,5, 0,3.1415)
    line(89,152,111,152)
    //overlay
    noStroke()
    fill(219,112,147,50)
    triangle(199,199,3,3,75,150)
    circle(150,50,100)
    quad(0,150,20,199,50,180,60,199)


}

var bgColor;  
var hairColor;
var hairShadow;
var skinColor;
var blushColor;
var shirtColor;
var glassesColor;
var mouthColor;
var shirtOutline;

function setup() {
    createCanvas(400, 400);
    text("p5.js vers 0.9.0 test.", 10, 15);

    bgColor = color(255, 247, 191);
    hairColor = color(233, 148, 105);
    hairShadow = color(216, 105, 71);
    skinColor = color(244, 190, 130);
    blushColor = color(237, 163, 118);
    shirtColor = color(172, 188, 138);
    glassesColor = color(66, 31, 14);
    mouthColor = color(188, 89, 82);
    shirtOutline = color(104, 149, 129);
}

function draw() {
    background(bgColor);
  
    //back hair
    noStroke();
    fill(hairColor);
    rect(75, 90, 250, 200, 80);
    
    noStroke();
    fill(hairColor);
    rect(75, 140, 250, 170, 40);
  
    //back hair shadow
    fill(hairShadow);
    rect(90, 120, 220, 190, 40);
  
    //shirt
    fill(shirtColor);
    rect(width/4, height/1.25, 200, 250, 75);
  
    //ears
    fill(skinColor);
    ellipse(width/3.75, height/1.9, 50, 50);
    ellipse(width/1.35, height/1.9, 50, 50);
  
    //ear outlines
    noFill();
    stroke(blushColor);
    strokeWeight(3);
    ellipse(width/3.75, height/1.9, 35, 35);
    ellipse(width/1.35, height/1.9, 35, 35);
  
    //neck
    noStroke();
    fill(skinColor);
    rect(width/2.28, height/1.75, 50, 125, 50);
  
    //neck shadow
    fill(blushColor);
    rect(width/2.28, height/1.75, 50, 80, 15);
  
    //face
    fill(skinColor);
    ellipse(width/2, height/2, 200, 200);
  
    //shirt collar
    noFill();
    stroke(shirtOutline);
    strokeWeight(3);
    arc(width/2, height/1.24, 65, 75, 0, HALF_PI + HALF_PI);
  
    //blush
    noStroke();
    fill(blushColor);
    ellipse(width/2.85, height/1.7, 45, 45);
    ellipse(width/1.54, height/1.7, 45, 45);
    
    //mouth
    fill(mouthColor);
    arc(width/2, height/1.65, 50, 50, 0, HALF_PI + HALF_PI);
  
    //bangs
    fill(hairColor);
    arc(width/2, height/2.35, 250, 200, HALF_PI + HALF_PI, TWO_PI);
  
    //glasses
    noFill();
    stroke(glassesColor);
    strokeWeight(4);
    ellipse(width/2.65, height/2.1, 75, 75);
    ellipse(width/1.6, height/2.1, 75, 75);
    line(210, 190, 190, 190);
  
    //eyes
    arc(width/2.65, height/2, 40, 35, HALF_PI + HALF_PI, TWO_PI);
    arc(width/1.6, height/2, 40, 35, HALF_PI + HALF_PI, TWO_PI);
}

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(0, 200, 200);
    fill(70, 40, 20);
    rect(220, 290, 160, 150);
    fill(70, 40, 20);
    ellipse(300, 290, 160, 190);      //hair
    fill(230, 190, 190);
    circle(230, 310, 30);             //left ear
    fill(230, 190, 190);
    circle(370, 310, 30);             //right ear
    fill(230, 190, 190);
    ellipse(300, 300, 150, 180);      //face
    fill(255);
    circle(275, 275, 30);
    fill(0);
    circle(280, 270, 10);             //left eye
    line(267, 255, 277, 253);         //left eyebrow
    fill(255);
    circle(325, 275, 30);
    fill(0);
    circle(330, 270, 10);             //right eye
    line(323, 253, 333, 255);         //right eyebrow
    fill(0);
    circle(300, 310, 3);              //nose
    noFill();
    arc(300, 330, 50, 50, 270, 90);
    line(320, 323, 330, 326);         //mouth
}