Fallon Creech-Project-02-Variable-Face

sketch

//Fallon Creech
//Section A
//fcreech@andrew.cmu.edu
//Project-02

var eyeSize = 20;
var faceWidth = 375;
var faceHeight = 275;
var cheekSize = 20;
var noseWidth = 30;
var noseHeight = 20;
var noseColor = 0;
var patchSize = 50;
var earSize = 100;

function setup() {
    createCanvas(640, 480);
    background(255, 200, 200);
}

function draw() {
    //ears
    noStroke();
    fill(0);
    var earLX = width / 2 - faceWidth * 0.40;
    var earRX = width / 2 + faceWidth * 0.40;
    ellipse(earLX, height / 2.5, earSize, earSize);
    ellipse(earRX, height / 2.5, earSize, earSize);

    //face
    fill(255);
    ellipse(width / 2, height / 1.75, faceWidth,  faceHeight);

    //black patches
    noStroke();
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 1.6, patchSize, patchSize);
    ellipse(eyeRX, height / 1.6, patchSize, patchSize);

    //eyes
    noStroke();
    fill(255);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 1.575, eyeSize, eyeSize);
    ellipse(eyeRX, height / 1.575, eyeSize, eyeSize);

    //nose
    fill(noseColor);
    ellipse(width / 2, height / 1.40, noseWidth, noseHeight);

    //cheeks
    fill(255, 200, 200);
    var cheekLX = width / 2 - faceWidth * 0.375;
    var cheekRX = width / 2 + faceWidth * 0.375;
    ellipse(cheekLX, height / 1.5, cheekSize, cheekSize);
    ellipse(cheekRX, height / 1.5, cheekSize, cheekSize);
}

function mousePressed() {
    eyeSize = random(10, 30);
    earSize = random(80, 120);
    cheekSize = random(5, 20);
    noseColor = random(0, 255);
}

For this project, I tried making a panda that changed its facial expression when the mouse is clicked; to simulate this, I defined variables for most of the facial features and decided to limit the variances to certain features; those features include the eyes, cheeks, nose, and ears.