jiaxinw-Project-01

sketch

function setup() {
    createCanvas(600, 600);
    noCursor();    
}

function draw() {
    background(254,207,67);
    noStroke();
    //shadow
    fill(219, 179, 58)
    quad(width/2+40, height/3-115, width, height/2, width, height, width/2, height, )
    //shirt
    fill(243);
    quad(width/2-130, height/2+30, width/2, height/2+10, 
        width/2, height/2+400, width/2-180, height/2+400);
    fill(220, 221, 223);
    quad(width/2+130, height/2+30, width/2, height/2+10, 
        width/2, height/2+400, width/2+180, height/2+400);
    //neck
    fill(243, 210, 165);
    rect(width/2-30, height/2-20, 60, 30);
    arc(width/2, height/2+10, 60, 40, 0, PI);
    //hair
    fill(11);
    ellipse(width/2, height/3-25, 175, 200)
    quad(width/2+30, height/2-20, width/2+70, height/2-60, width/2+30, height/2+80)
    //face
    fill(254, 226, 205);
    ellipse(width/2, height/3, 160, 200);
    //ears
    ellipse(width/2-75, height/3, 50, 60);
    ellipse(width/2+75, height/3, 50, 60);
    //earrings
    push();
    translate(width/2-80, height/3+20)
    rotate(45);
    fill(0);
    rect(0, 0, 10, 10);
    pop();
    push();
    translate(width/2+80, height/3+20)
    rotate(315);
    fill(0);
    rect(0, 0, 10, 10);
    pop();
    //eyes
    fill(11);
    ellipse(width/2-35, height/3-15, 20);
    ellipse(width/2+35, height/3-15, 20);
    //glass
    noFill();
    strokeWeight(3);
    stroke(126, 112, 71);
    ellipse((width/2)-35,(height/3)-10, 55, 50);
    ellipse((width/2)+35,(height/3)-10, 55, 50);
    line((width/2)-6,(height/3)-15,(width/2)+6, (height/3)-15);
    line((width/2)-62,(height/3)-15,(width/2)-85, (height/3)-30);
    line((width/2)+62,(height/3)-15,(width/2)+85, (height/3)-30);
    //mouth
    noStroke();
    fill(241, 84, 75);
    arc(width/2, height/3+55, 50, 50, 0, PI);
    //nouse
    fill(226, 54, 52);
    ellipse(mouseX, mouseY, 30, 30);

}

Before I started to code, I drew a sketch to have a concrete idea of how the portrait looks like. After that, I broke down the whole picture into different simple shapes and measured the position of them. Instead of using all numbers, I used the half or 1/3 of the width and height as the unit of coordinate. For making the portrait more interesting, I had an idea of making my nose as a clown’s nose and letting it become interactive. Therefore, I made the mouse as a red nose and remove the original mouse on my portrait so that people can try to put my red nose in the right place. : )