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