Project 01: Self Portrait

My face.

portrait001.js
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) 
  
  
}

Project: Self Portrait

selfportrait
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)



}

Project 1 – Self Portrait

This is my code.

Portrait ProjectDownload
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)
}

Project: Self-Portrait

This project was challenging because it was difficult to figure out the coordinates of points for the shapes so that they would be placed and sized properly.

portrait


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
        

        



}

Self-Portrait

Portrait
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);

}

Project 1- Self Portrait

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



}

PROJECT 01 – SELF PORTRAIT

portrait
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)




}

Project 1 – My Self Portrait

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


}

flowers are cute

Project 1 – Self Portrait

portrait
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);
}

Project 1 – Self Portrait

portrait
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
}