Project 01 – Self Portrait

function setup() {
    createCanvas(600, 600);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(181, 206, 203);
    noStroke();

    //hair back
    fill(80, 71, 104);
    ellipse(width/2-30, height/2+50, 300, 400);
    //neck
    fill(232, 199, 182);
    rect(250, 415, 80, 120)
    //hair in front of neck
    fill(80, 71, 104);
    ellipse(225, 460, 65, 155);
    //face
    fill(199, 171, 156);
    ellipse(width/2-30, height / 2, 200, 250);
    fill(232, 199, 182);
    ellipse(width/2, height/2, 150, 250);
    //eyebrows
    fill(121, 149, 155)
    triangle(162, 285, 190, 280, 217, 288);
    fill(121, 149, 155)
    triangle(253, 283, 275, 275, 300, 280);

    //hair front
        //right
    fill(80, 71, 104);
    ellipse(width/2+10, height/2-70, 140, 112);
    fill(80, 71, 104);
    ellipse(width/2+55, height/2+25, 55, 175);
    fill(80, 71, 104);
    ellipse(width/2+55, height/2+108, 65, 155);
        //left
    fill(80, 71, 104);
    arc(width/2-110, height/2-95, 135, 140, 7*PI/4, 3*PI/4);
    fill(80, 71, 104);
    ellipse(width/2-20, height/2-100, 100, 80);

    //eye shadow
    fill(206, 144, 140);
    arc(195, 314, 38, 27, PI, 0);
    fill(206, 144, 140);
    arc(279, 305, 38, 27, PI, 0);
    //wink eye
    fill(79, 63, 54);
    triangle(162, 312, 200, 306, 219, 316);
    fill(79, 63, 54);
    triangle(172, 302, 195, 310, 185, 313);
    fill(79, 63, 54);
    triangle(178, 300, 202, 312, 192, 313);
    //right eyelashes
    fill(79, 63, 54);
    triangle(265, 299, 280, 304, 305, 291);
    fill(79, 63, 54);
    triangle(265, 309-9, 280, 314-5, 305+5, 301-5);
    //right eye
    fill(79, 63, 54);
    ellipse(width/2-22, height/2+15, 50, 37);
    //moving pupil
        //setting boundaries
    if(mouseX < 250) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
    else if (mouseX > 366) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
    else if (mouseY < 305) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
    else if (mouseY > 442) {
        fill(232, 199, 182)
        circle(width/2-32, height/2+11, 13);
        circle(width/2-23, height/2+19, 6);
    }
        //movement
    else {
        fill(232, 199, 182);
        circle(mouseX-20, mouseY-20, 13);
        circle(mouseX-13, mouseY-13, 6);
    }
    //undereye shadow
    fill(199, 171, 156);
    triangle(268, 337, 277, 340, 294, 335);
    
    //ear
    fill(232, 199, 182);
    ellipse(width/2+30, height/2+35, 50, 50);
    fill(199, 171, 156);
    arc(width/2+33, height/2+30, 30, 30, 3*PI/2, PI/2)
    fill(232, 199, 182);
    arc(width/2+30, height/2+37, 30, 30, 3*PI/2, PI/2)
    //nose
    fill(232, 199, 182);
    triangle(219, 355, 228, 302, 237, 362);
    fill(199, 171, 156);
    triangle(238, 362, 248, 362, 253, 352);
    //mouth
    fill(168, 102, 98);
    arc(253, 385, 31, 25, 11*PI/12, 23*PI/12);
    fill(168, 102, 98);
    arc(260, 383, 37, 25, 23*PI/12, 11*PI/12);
    strokeWeight(2);
    stroke(155, 133, 121);
    line(230, 390, 290, 375);

    //clothes
    strokeWeight(5);
    stroke(181, 206, 203);
    fill(121, 149, 155);
    ellipse(width/2+4, 706, 300, 500);
}