sketch

var eyeSize = 60;
var faceWidth = 300;
var faceHeight = 350;
var value = 'blue';

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(141,209,247);
   if (mouseX < width/2)
      background(51);

    //head
    fill(77,47,23);
    arc(width / 2, height / 3 + 0.75 * faceHeight, faceWidth * 1.5 , faceHeight * 2.3, PI, TWO_PI);
    fill('tan');
    ellipse(width / 2,height / 2,faceWidth,faceHeight);
    fill(77,47,23)
    arc(width / 2, height / 3, faceWidth * 0.9 , faceHeight * 0.6, PI, TWO_PI);
    

    //left eye
    fill('white');
    var eyeLX = width / 2 - faceWidth * 0.25;
    ellipse(eyeLX, height / 2, 1.5 * eyeSize, eyeSize);

    //left eyeball (blue iris, black pupil and white glissen)
    fill(value);
    ellipse(eyeLX + 15, height / 2, 0.5 * eyeSize, 0.5 * eyeSize);
    fill(51);
    ellipse(eyeLX + 15, height / 2, 0.25 * eyeSize, 0.25 * eyeSize);
    fill('white');
    ellipse(eyeLX + 10, height / 2, eyeSize / 8, eyeSize / 8);

     //right eye
    fill('white');
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeRX, height / 2, 1.5 * eyeSize, eyeSize);

    //right eyeball (blue iris, black pupil and white glissen)
    fill(value);
    ellipse(eyeRX + 15, height / 2, eyeSize / 2, eyeSize /2);
    fill(51);
    ellipse(eyeRX + 15, height / 2, eyeSize / 4, eyeSize /4);
    fill('white');
    ellipse(eyeRX + 10, height / 2, eyeSize / 8, eyeSize / 8);

    //eyebrows (left then right)
    fill(77,47,23);
    ellipse(eyeLX, height / 2 - 30 , eyeSize * 1.5, eyeSize / 6);
    ellipse(eyeRX, height / 2 - 30, eyeSize * 1.5, eyeSize / 6);

    //mouth
    noFill();
    arc(width / 2, height * 0.66, faceWidth / 4, faceHeight  / 4, 0, PI);

}

function mouseClicked() {
   if(value === 0) {
        value = 'blue';
    } else {
        value = color(random(0,255), random(0,255), random(0,255));
    } 

}
 
function mousePressed() {
    faceWidth = random(200, 350);
    faceHeight = random(325, 350);
    eyeSize = random(35, 50);
}

I really enjoyed this project as I felt that I now have a better understanding of how to use a lot of the code that was established last week and cool new functions introduced this week. I also enjoyed this project in the sense that it was kind of entertaining to play with and trying to understand the ratio of canvas and face features using established values and ratios.

sketch

//Kyle Leve
//Section A
//kleve@andrew.cmu.edu
//Project-02-Variable Faces

var glassesWidth = 8;
var glassesHeight = 8;
var faceWidth = 350;
var faceHeight = 350;
var eyeSize = 50;
var irisSize = 30;
var pupilSize = 15;
var glimmerSize = 7;
var backgroundColor;
 
function setup() {
    createCanvas(640, 480);
    var red; random(50, 250);
    var green; random(100, 250);
    var blue; random(20, 250);
    backgroundColor = color(red, green, blue);
}
 
 function draw() {
    background(backgroundColor);

    //face
    noStroke();
    fill('tan');
    ellipse(width / 2, height / 2, faceWidth, faceHeight);

    //eyes
    fill('white'); //left eyeball
    var eyeLX = width / 2 - faceWidth * 0.25;
    ellipse(eyeLX + 10, height / 2 + 15, eyeSize, eyeSize);

    fill('white'); //right eyeball
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeRX - 30, height / 2 + 15, eyeSize, eyeSize);

    fill(77,47,23); //left iris
    ellipse(eyeLX + 15, height / 2 + 20, irisSize, irisSize);

    fill(77,47,23); //right iris
    ellipse(eyeRX - 25, height / 2 + 20, irisSize, irisSize);

    fill('black'); //left pupil
    ellipse(eyeLX + 20, height / 2 + 25, pupilSize, pupilSize);

    fill('black'); //right pupil
    ellipse(eyeRX - 20, height / 2 + 25, pupilSize, pupilSize);

    fill('white'); //left eye shimmer
    ellipse(eyeLX + 25, height / 2 + 22, glimmerSize, glimmerSize);

    fill('white'); //right eye shimmer
    ellipse(eyeRX - 15, height / 2 + 22, glimmerSize, glimmerSize);

    //Glasses
    fill('black');
    rect(280, 250, 40, glassesHeight);

    fill('black');
    rect(280, 210, glassesWidth, 80);

    fill('black');
    rect(180, 210, 100, glassesHeight);

    fill('black');
    rect(180, 285, 108, glassesHeight);

    fill('black');
    rect(180, 210, glassesWidth, 75);

    fill('black');
    rect(155, 247, 30, glassesHeight);

    fill('black');
    rect(315, 210, glassesWidth, 80);

    fill('black');
    rect(315, 210, 100, glassesHeight);

    fill('black');
    rect(315, 285, 108, glassesHeight);

    fill('black');
    rect(415, 210, glassesWidth, 75);

    fill('black');
    rect(415, 247, 28, glassesHeight);
}

function mousePressed() {
    faceWidth = random(300, 400);
    faceHeight = random(250, 350);
    glassesWidth = random(5, 15);
    glassesHeight = random(5, 15);
    eyeSize = random(40, 60);
    irisSize = random(25, 35);
    pupilSize = random(10, 20);
    glimmerSize = random(7, 10);
    var red = random(50, 250);
    var green = random(100, 250);
    var blue = random(20, 250);
    backgroundColor = color(red, green, blue);
}

I found this project to be very interesting in that for me it started out with me knowing exactly what I wanted to do, but having no idea how to do it. Through trial-and-error I found out how to change dimensions and colors randomly by using variables to make an interactive project. This project has taught me how to use variables effectively to make my projects more fun and interesting.