Project 2: Variable Faces

var eyeSize = 35;
var faceWidth = 250;
var faceHeight = 290;
var face = 1; //1 = happy, 2 = surprised, 3 = sad

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

function draw() {
    background(200);
    strokeWeight(0);
    fill(231, 198, 142);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25
    var noseLx = width / 2 - faceWidth * 0.15;
    var noseRx = width / 2 + faceWidth * 0.15;
    var nosey = height / 2 + faceWidth * 0.25;
    var cheekL = width / 2 - faceWidth * 0.3;
    var cheekR = width / 2 + faceWidth * 0.3;
    var hairL = width / 2 - faceWidth * 0.75;
    var hairR = width / 2 + faceWidth * 0.45;
    var earLx = hairL + faceWidth * 0.27; 
    var earLy = height / 2;
    var earRx = hairL + faceWidth * 1.23;
    var earRy = height / 2;
    fill(250); //left eye
    ellipse(pupilLX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(250); //right eye
    ellipse(pupilRX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(0); //left eye
    ellipse(eyeLX, height / 2.1, eyeSize, eyeSize);
    fill(0); //right eye
    ellipse(eyeRX, height / 2.1, eyeSize, eyeSize);
    fill(202, 176, 131); //nose
    triangle(width / 2, height / 2 - faceWidth * 0.1, noseLx, nosey, noseRx, nosey);
    if (face == 1 || face == 2) {
        fill(250, 148, 178); //cheeks
        ellipse(cheekL, height / 1.8, eyeSize * 1.4, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 1.4, eyeSize *1.4);
    } else {
        fill(95, 175, 211); //tears
        ellipse(cheekL, height / 1.8, eyeSize * 0.5, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 0.5, eyeSize *1.4);
    }  
    fill(77, 48, 26); //hair
    rect(hairL, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairR, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairL, height/3.8, faceWidth * 1.5, faceHeight * 0.3);
    fill(231, 198, 142); //ears
    ellipse(earLx, earLy, faceWidth * 0.1, faceHeight * 0.15);
    ellipse(earRx, earRy, faceWidth * 0.1, faceHeight * 0.15);
    if (face == 1) {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.35, 120, 70, 2 * PI, PI, OPEN);
    } else if (face == 2) {
        fill(250, 148, 178); //mouth
        ellipse(width/2, height /2 + faceWidth * 0.4, eyeSize * 2, eyeSize * 1.4);
    } else {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.45, 120, 70, PI, 2 * PI, OPEN);
    }
}

function mousePressed() {
    if (face == 1) {
        face = 2;
    } else if (face == 2) {
        face = 3;
    } else {
        face = 1;
    }
}