Bo Yang-Project-02-Variable Face

sketch

/*
    Bo Yang
    Section A
    byang2@andrew.cmu.edu
    Project-02-Variable-Face
*/

    var eyeSize = 25;
    var faceWidth = 120;
    var faceHeight = 180;
    var mouth = 55;
    let color = "#86592d";
    let colors = ["#33cccc", "#ccccff", "#cc6600", "##993333"];


function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var eyeL = width / 2 - faceWidth * 0.25;
    var eyeR = width / 2 + faceWidth * 0.25;
    background(color);
 

    //face
    noStroke();
    fill("#006622");
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    ellipse(width / 2, height * 0.6, faceWidth * 1.5, faceHeight);

    //black eyes
    fill("black");
    ellipse(eyeL, height / 3, eyeSize / 3, eyeSize / 3);
    ellipse(eyeR,height / 3, eyeSize / 3, eyeSize /3);

    //eyes
    ellipse(eyeL, height / 3, eyeSize, eyeSize);
    ellipse(eyeR, height / 3, eyeSize, eyeSize);

    //pupil
    fill(255);
    ellipse(eyeL, height / 3, eyeSize / 2, eyeSize / 2);
    ellipse(eyeR, height / 3, eyeSize / 2, eyeSize / 2);

    //cheeks
    fill("#ff99bb");
    ellipse(eyeL - 8, (height / 3) + 40, eyeSize * 1.2, eyeSize * 1.2);
    ellipse(eyeR + 8, (height / 3) + 40, eyeSize * 1.2, eyeSize * 1.2);

    //mouth
    fill("#ff4d4d"); 
    arc(width / 2, height * 0.6, mouth, mouth, TWO_PI, PI);

    
}
 
function mousePressed() {
    
    faceWidth = random(30, 120);
    faceHeight = random(100, 200);
    eyeSize = random(15, 35);
    mouth = random(25, 60);
    color = random(colors);
    eyeL = random(width / 2, width / 2 - faceWidth * 0.25);
}

In this program, I draw a frog in the different background color. The frog’s body shape and eyes size will change when you click it. Before I draw it, I just noticed the face shape is more like a frog’s body shape. It use variables on the face, eyes, mouth and background.