anabelle’s project 01

// anabelle lee < 3
// section c

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

function draw() {
    //pink heart side
    background(255);

    if ((mouseX < 400 & mouseY > 300) ||
        (mouseX < 400 && mouseY < 300) ||
        (mouseX > 400 && mouseY < 300)) {
        
        // pink background
        fill(235, 192, 194);
        square(50, 50, 500);
        
        // back hair
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75); 
        rect(100, 250, 400, 220); 

        // face
        noStroke();
        fill(255, 238, 222);
        circle(300, 300, 300);

        // neck
        rect(260, 400, 80, 150);

        // ears
        circle(160, 300, 70);
        circle(440, 300, 70);

        // side bangs
        stroke(254, 206, 138, 100);
        strokeWeight(5);
        fill(121, 97, 75);
        triangle(160, 250, 140, 400, 180, 400)
        triangle(440, 250, 420, 400, 460, 400)

        // top hair
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(300, 390, 450, 600, (7*PI/6), (11*PI/6), CHORD);

        // forehead
        noStroke()
        fill(255, 238, 222);
        triangle(300, 164, 245, 280, 360, 280);

        // front bangs
        stroke(254, 206, 138, 100);
        fill(121, 97, 75);
        arc(100, 150, 400, 400, 0, HALF_PI, CHORD);
        arc(527, 25, 500, 650, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // eyes
        stroke(92, 64, 51); 
        strokeWeight(5);
        noFill()
        arc(370, 320, 80, 45, radians(200), 0)
        arc(230, 320, 80, 45, radians(185), radians(340))

        // mouth
        happyMouth(300, 370, 120, 90);

        // cheeks
        fill(171, 95, 97);
        circle(200, 350, 25);
        circle(220, 350, 25);
        triangle(187, 354, 233, 354, 210, 380);

        circle(385, 350, 25);
        circle(405, 350, 25);
        triangle(372, 354, 418, 354, 395, 380);

        // shoulders
        fill(231, 208, 208);
        ellipse(300, 650, 420, 300);

        // heart follows mouse
        noStroke()
        fill(231, 84, 128);
        circle(mouseX - 12, mouseY, 30);
        circle(mouseX + 12, mouseY, 30);
        triangle(mouseX - 28, mouseY - 2, mouseX + 28, mouseY - 2, mouseX, mouseY + 45);

    // gray scale side
    } else {
        background(0);
        fill(150);
        square(400, 400, 50);

        //shoulders
        fill(20);
        rect(408, 440, 36, 10);

        //back hair
        fill(100); 
        stroke(80);
        rect(410, 420, 30, 20);

        // face
        fill(200);
        noStroke();
        circle(425, 425, 20); 

        //neck
        fill(200);  
        rect(423, 420, 5, 20);

        //ears
        circle(415, 425, 5);
        circle(435, 425, 5);

        //side hair
        fill(100);
        stroke(80);
        strokeWeight(1);
        triangle(415, 420, 412, 435, 418, 435);
        triangle(435, 420, 432, 435, 438, 435);

        //top hair
        arc(425, 433, 40, 50, (7*PI/6), (11*PI/6), CHORD);

        // front bangs
        arc(410, 410, 25, 35, 0, HALF_PI, CHORD);
        arc(440, 405, 30, 40, (PI + 3*PI / 2), (5*PI / 6), CHORD);

        // spotlight
        noStroke()
        fill(255, 150);
        circle(mouseX, mouseY, 200); 

    }
}

function happyMouth(x, y, w, h, color) {
    var r = (w / 8);

    //rectangle
    fill(255, 183, 210, 150);
    noStroke();
    rect(x-w/2+r, y-r, w-2*r, r);

    // bottom arc
    arc(x, y, w, h, 0, radians(180));

    // right quarter circle
    arc((x-(w/2)+r), y, 2*r, 2*r, radians(180), radians(270));

    // left quarter circle
    arc(x+(w/2)-r, y, 2*r, 2*r, radians(270), 0);
    line(x-(w/2)+r, y-r, x+(w/2)-r, y-r); 

}