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
        

        



}

Leave a Reply