sunmink-project2-VariableFace

sketch

//Sun Min (Chloe) Kim 
//Section E
//sunmink@andrew.cmu.edu
//Project-02

var eyeSize = 20; 
var faceWidth = 120; 
var faceHeight = 140; 
var noseSize = 15; 
var mouthSize = 30; 
var background1 = (203); 
var background2 = (228);
var background3 = (248); 

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

function draw() {
    background(background1, background2, background3);
    //face
    noStroke(0); 
    fill(246, 217, 188);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.3; 
    var eyeRX = width / 2 + faceWidth * 0.3; 

    //eyes
    fill(255, 255, 255); 
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //pupil 
    fill(64, 60, 58); 
    ellipse(eyeLX, height / 2, eyeSize / 2.5, eyeSize / 2.5);
    ellipse(eyeRX, height / 2, eyeSize / 2.5, eyeSize / 2.5);

    //nose 
    stroke(64, 60, 58);
    strokeWeight(1);
    arc(width / 2, height / 1.9, noseSize, noseSize, 180, 11.7, PI);

    //mouth 
    fill(217, 134, 138);
    noStroke(0);
    ellipse(width / 2, height / 2 + 40, mouthSize * 1.2, mouthSize / 2);
    


}

    function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 100 and 150.
    faceWidth = random(100, 150);
    faceHeight = random(120, 150);
    eyeSize = random(10, 30);
    noseSize = random(20, 10); 
    mouthSize = random(30, 10); 
    background1 = random(0, 255); 
    background2 = random(0, 255); 
    background3 = random(0, 255); 

}

For this project, I chose a simple face structure to emphasize the change in background color and change in the elements of the face when “mousePressed” function is activated. It was interesting to use this new function and create an interactive graphics for the first time, and I look forward to experimenting more variables to build more complex designs in the future.