Project 02: Variable Face

/*
    Joan Lee
    Section D

    Aspects of variability
        4 different expressions with mouse movement
        switching hair color each click
        different posture each click
        background changes every click
*/

var eyeSize = 20;
var faceWidth = 150;
var faceHeight = 180;
var shoulderHeight = 480;
var bodyColor = "white";
var on = false;
var r = 100;
var g = 74;
var b = 65;
var bgColor = 0;

function setup() {
    createCanvas(640, 480);
}

function draw() {
    background(bgColor);

    //hair behind face
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    ellipse(width / 2, height / 2 + (faceHeight / 4), faceWidth + 50, 330);

    //person
    noStroke();
    fill(bodyColor);
    ellipse(width / 2, height, 170, shoulderHeight);    //body
    fill(250, 230, 180);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);     //head
   
    //eyes
    stroke(0);
    strokeWeight(1);
    fill("white");
    var eyeLX = width / 2 - faceWidth / 4;
    var eyeRX = width / 2 + faceWidth / 4;
    var x = constrain(mouseX, 20, 35);  //eyes getting bigger with mouse moving right
    circle(eyeLX, height / 2, x);
    circle(eyeRX, height / 2, x);   //whites of eyes
    fill(63, 35, 11);
    circle(eyeLX + 1, height / 2, 5);
    circle(eyeRX - 1, height / 2, 5);   //pupils considering interpupillary distance

    //nose
    noFill();
    stroke(205, 179, 156);  //shadow
    strokeWeight(1);
    beginShape();
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2 + 5, height / 2 + 10);
    curveVertex(width / 2, height / 2 + 20);
    curveVertex(width / 2 - 5, height / 2 + 10);
    curveVertex(width / 2 - 5, height / 2 + 10);
    endShape();
    
    //mouth
    strokeWeight(4);
    stroke(255, 200, 200);
    fill(0);
    var x1 = constrain(mouseX, 1, 40);
    ellipse(width / 2, height / 2 + 50, 60, x1);    //making mouth bigger with mouse placement
    
    //bangs
    noStroke();
    if(on == true){
        fill(r, g, b);
    } else{
        fill(255 - r, 255 - g, 255 - b);
    }
    arc(width / 2, height / 2 - faceHeight / 6, faceWidth + 10, faceHeight - 30, PI, 0);

    //eyebrows
    fill(73, 45, 35);
    var y = constrain(mouseY, height / 2 - 50, height / 2 - 30);
    rect((width / 2) - (faceWidth / 3), y, 30, 5);      
    rect((width / 2) + (faceWidth / 8), y, 30, 5);  //raised vs furrowed eyebrows with mouse moving up or down
}

function mousePressed() {
    bgColor = random(0, 255);
    faceWidth = random(110, 160);
    faceHeight = random(160, 200);
    shoulderHeight = random(330, 450);
    if(on == true){     //changing hair color each click
        on = false;
    } else{
        on = true;
    }
}