Project 1: My Self Portrait

sketch
function setup() {
    createCanvas(500, 500);
    background(255,138,120);
}
function draw() {
    let borpX = 225;
    let borpY = 170;
    //behind head hair
    noStroke();
    fill(40, 26, 34);
    beginShape();
    vertex(300,195);
    vertex(303,200);
    vertex(305,210);
    vertex(302,240);
    vertex(280,245);
    vertex(270,220);
    stroke(80, 40, 54);
    endShape();
    strokeWeight(1)
    arc(borpX-10,borpY+40,30,50,8.5,4.5);
    arc(borpX+63,borpY+50,40,60,6,8,OPEN);
    arc(borpX+45,borpY+40,75,60,5.7,6.6,OPEN);
    arc(borpX+55,borpY+55,40,60,6.1,8,OPEN);
    arc(borpX+45,borpY+62,40,60,6.2,8,OPEN);
    arc(borpX-5,borpY+53,30,50,7.6,3.7);
    arc(borpX+1,borpY+60,30,50,7.6,3);
    arc(borpX+4,borpY+60,30,50,7.6,3);
    push();
    rotate(0.1);
    arc(borpX+40,borpY+40,30,50,7.6,3);
    pop();


    //cranium and fillings
    angleMode(RADIANS);
    fill(255,233,199);
    noStroke();
    ellipse(246.8,500/2.195-12,71.5,55.8);
    stroke(0);
    arc(249,500/3+8.5,92,90,2.5,7.05,OPEN);
    noStroke();
    ellipse(221,500/2.45,20,30);
    ellipse(282,500/2-42,10,10);
    stroke(0);

    noStroke();
    fill(222, 0, 111);
    ellipse(262,270,100,20);
    triangle(160,500,260,260,388,500);
    stroke(0);
    arc(262,270,100,20,3.2,6.2);
    fill(255,233,199);

    //neck
    noStroke();
    fill(255,233,199);
    beginShape();
    curveVertex(240,245);
    curveVertex(240,245);
    curveVertex(239,258);
    curveVertex(240,268);
    curveVertex(285,266);
    curveVertex(281,250);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape();
    noFill();
    stroke(0);
    arc(230,245,20,50,5.5,8);
    arc(290,225,20,80,7.8,10);
    fill(255,233,199);

    //clothes
    fill(222, 0, 111);

    beginShape();
    vertex(240,258);
    vertex(225,255);
    vertex(205,257);
    vertex(190,280);
    vertex(180,350);
    vertex(150,470);
    vertex(162,500);
    vertex(180,520);
    endShape(OPEN);

    beginShape();
    vertex(200,400);
    vertex(240,256);
    vertex(250,268);
    vertex(260,258);
    vertex(300,255);
    vertex(320,257);
    vertex(350,285);
    vertex(365,350);
    vertex(400,440);
    vertex(398,500);
    vertex(360,530);
    endShape(OPEN);

    

    curve(245,264,240,268,197,270,200,220);
    curve(245,264,240,268,183,340,200,220);
    curve(220,390,208,420,160,460,130,420);
    curve(260,265,255,268,335,270,330,220);
    curve(260,265,255,268,365,350,330,220);
    curve(220,370,200,400,365,440,330,220);
    fill(255,233,199);
    beginShape();
    vertex(239,255);
    vertex(235,278);
    vertex(275,256);
    endShape(OPEN);
    line(200,400,240,500);

    //chin segments
    fill(255,233,199);
    beginShape();
    curveVertex(215,231);
    curveVertex(215,231);
    curveVertex(228,243);
    curveVertex(250,244);
    curveVertex(280,223);
    curveVertex(280,223);
    endShape(OPEN);
    //arc(246.2,500/2.195-10,69.5,55.8,6.5,9,OPEN);
    push();
    translate(215, 216.43);
    rotate(-0.2);
    arc(3,0,15,42,8,4.45,OPEN);
    pop();
    //ear
    push();
    translate(284,500/2-32);
    rotate(0.3);
    arc(0,-5,13,26,4.1,8.1,OPEN);
    arc(1,-5,7,15,8,4.6,OPEN);
    pop();
    arc(284.9,500/2-35,4,8,4,7,OPEN);
    //eye1
    let lefteyex = 262;
    let lefteyey = 198;
    noStroke();
    fill(255);
    ellipse(lefteyex,lefteyey+1,20,16);
    fill(240);
    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);
    fill(33,6,4);
    noStroke();
    ellipse(lefteyex+4,lefteyey,10,14)
    fill(255,164,128);
    ellipse(lefteyex+4,lefteyey+4,6,5);
    fill(0);
    ellipse(lefteyex+4,lefteyey,5,8);
    fill(255);
    ellipse(lefteyex+2,lefteyey-2,3,6);
    stroke(0);
    noFill();
    ellipse(lefteyex+4,lefteyey,9,13);
    arc(lefteyex,lefteyey-2,20,10,3.2,6.3);
    //eye2
    let righteyex = 222;
    let righteyey = 198;
    noStroke();
    fill(255);
    ellipse(righteyex,righteyey+1,20,16);
    fill(240);
    arc(righteyex,righteyey-2,20,10,3.2,6.3);
    fill(33,6,4);
    noStroke();
    ellipse(righteyex+4,righteyey,10,14)
    fill(255,164,128);
    ellipse(righteyex+4,righteyey+4,6,5);
    fill(0);
    ellipse(righteyex+4,righteyey,5,8);
    fill(255);
    ellipse(righteyex+2,righteyey-2,3,6);
    stroke(0);
    noFill();
    ellipse(righteyex+4,righteyey,9,13);
    arc(righteyex,righteyey-2,20,10,3.2,6.3);
    //mouth
    stroke(0);
    curve(228, 225, 233, 230, 240, 230, 245, 225);
    //nose
    fill(255, 195, 184);
    noStroke();
    triangle(240,215,232,215,235,218);
    stroke(0);
    noFill();
    arc(226,208,18,20,6.1,7.1);
    arc(240,213,15,10,8.8,9.2);
    //eyebrows
    let leftbrowx = 210;
    let leftbrowy = 185;
    let rightbrowx = 273;
    let rightbrowy = 185;
    noStroke();
    fill(26, 2, 20);
    beginShape();
    curveVertex(leftbrowx,leftbrowy+3);
    curveVertex(leftbrowx+7,leftbrowy+2);
    curveVertex(leftbrowx+18,leftbrowy+4);
    curveVertex(leftbrowx+25,leftbrowy+3);
    curveVertex(leftbrowx+20,leftbrowy-1);
    curveVertex(leftbrowx+7,leftbrowy-1);
    endShape(CLOSE);

    beginShape();
    curveVertex(rightbrowx,rightbrowy+3);
    curveVertex(rightbrowx-7,rightbrowy+2);
    curveVertex(rightbrowx-18,rightbrowy+4);
    curveVertex(rightbrowx-25,rightbrowy+3);
    curveVertex(rightbrowx-20,rightbrowy-1);
    curveVertex(rightbrowx-7,rightbrowy-1);
    endShape(CLOSE);
    //hair
    fill(40, 26, 34);

    beginShape();
    vertex(200,175);
    vertex(220,140);
    vertex(228,127);
    vertex(290,139);
    vertex(295,160);
    vertex(295,190);
    vertex(285,190);
    vertex(235,162);
    vertex(225,170);
    endShape();

    
    stroke(80, 40, 54);
    strokeWeight(1)
    arc(borpX-15,borpY+10,20,50,8,3.5);
    noStroke();
    rect(borpX-16,borpY+5,5,5);
    stroke(80, 40, 54);

    beginShape();
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-28,borpY+2);
    curveVertex(borpX-47,borpY-9);
    curveVertex(borpX-28,borpY-7);
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-15,borpY-10);
    endShape();

    beginShape();
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-12,borpY+8);
    curveVertex(borpX-25,borpY+10);
    curveVertex(borpX-40,borpY);
    curveVertex(borpX-30,borpY+3);
    curveVertex(borpX-20,borpY-2);
    curveVertex(borpX-20,borpY-2);
    endShape();

    beginShape();
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX-1,borpY+2);
    curveVertex(borpX-5,borpY+8);
    curveVertex(borpX-15,borpY+14);
    curveVertex(borpX-27,borpY+15);
    curveVertex(borpX-16,borpY+8);
    curveVertex(borpX-8,borpY);
    curveVertex(borpX-8,borpY);
    endShape();

    

    beginShape();
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-15,borpY-10);
    curveVertex(borpX-28,borpY-7);
    curveVertex(borpX-50,borpY-12);
    curveVertex(borpX-35,borpY-16);
    curveVertex(borpX-15,borpY-35);
    curveVertex(borpX,borpY-30);
    curveVertex(borpX,borpY-30);
    endShape();

    beginShape();
    curveVertex(borpX,borpY-30);
    curveVertex(borpX,borpY-30);
    curveVertex(borpX-15,borpY-35);
    curveVertex(borpX-24,borpY-50);
    curveVertex(borpX-15,borpY-40);
    curveVertex(borpX,borpY-40);
    curveVertex(borpX,borpY-40);
    endShape();

    beginShape();

    endShape();

    arc(borpX+36,borpY+5,90,90,5.3,6.9,OPEN);
    arc(borpX+28,borpY-5,90,90,4,5.8,OPEN);

    beginShape();
    curveVertex(borpX+55,borpY+28);
    curveVertex(borpX+55,borpY+28);
    curveVertex(borpX+64,borpY+33);
    curveVertex(borpX+65,borpY+45);
    curveVertex(borpX+72,borpY+35);
    curveVertex(borpX+75,borpY+28);
    curveVertex(borpX+75,borpY+28);
    endShape();

    //sideburn
    push();
    rotate(-0.2);
    arc(borpX+10,borpY+88,10,30,8,5.5,CLOSE);

    //sideswoop
    pop();
    push();
    rotate(-1.4);
    arc(borpX-365,borpY+145,15,30,7.8,4.8,CLOSE);
    rotate(-0.1);
    arc(borpX-390,borpY+130,15,30,7.8,4.8,CLOSE);
    arc(borpX-385,borpY+125,15,30,7.8,4.8,CLOSE);
    pop();

    beginShape();
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+10,borpY-8);
    curveVertex(borpX+20,borpY-2);
    curveVertex(borpX+28,borpY+6);
    curveVertex(borpX+40,borpY+14);
    curveVertex(borpX+65,borpY+25);
    curveVertex(borpX+48,borpY+10);
    curveVertex(borpX+40,borpY);
    curveVertex(borpX+35,borpY-8);
    curveVertex(borpX+35,borpY-8);
    endShape();

   // stroke(255);
   // strokeWeight(4);
   // point(235,268);
   // point(240,245);
   // point(287,264);
   // point(280,223);

    

    noLoop();
}

I found the adjusting of the vertices of the custom shapes to be extremely time consuming and frankly agonizing. Were I to do this again, I would try to take more intuitive approaches.

Leave a Reply