Project 2: Variable Faces

sketch-beansDownload
//Yeon Lee, Section C
//Project-02: Variable Faces; Face Variables

var backgroundR = 180;
var backgroundG = 200;
var backgroundB = 255;
var head = 190;
var hoodieColorR = 253;
var hoodieColorG = 253;
var hoodieColorB = 150;
var headWidth = 150;
var headHeight = 150;
var eyeSize = 24;
var blushSize = 25;
var mouth =  1
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //ears + head (back)
    var w = 330;
    var h = 250;
    var earSize = 80;
    var earY = h - 0.5 * head;
    var leftEarX = w + 0.45 * head; //hoodie size changes every time you click
    var rightEarX = w - 0.45 * head;

    fill(hoodieColorR, hoodieColorG, hoodieColorB); //hoodie color changes every time you click
    noStroke();
    ellipse(leftEarX, earY, earSize, earSize); //head with hoodie
    ellipse(rightEarX, earY, earSize, earSize);
    ellipse(w, 220, head, 1 * head); //cheek shape on the bottom
    ellipse(w, 280, 35 - head, head / 2);

    //head (front)
    fill(255, 255, 255);
    ellipse(w, h - 10, head / 1.2, head / 1.2); //face
    ellipse(w, h + 30, 45 - head, head / 2); //cheek shape on the bottom

    //eyebrows + eyes
    var leftEyeX = w - headWidth * 0.3; //eye size changes every time you click
    var rightEyeX = w + headWidth * 0.3;

    fill(45, 34, 25); 
    arc(leftEyeX, h - 40, 10, 5, PI, 0); //eyebrows
    arc(rightEyeX, h - 40, 10, 5, PI, 0);
    ellipse(leftEyeX, h, eyeSize, eyeSize); //eyes
    ellipse(rightEyeX, h, eyeSize, eyeSize);

    fill(255, 255, 255); //white part of eyes
    ellipse(leftEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5);
    ellipse(rightEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5); 
    ellipse(leftEyeX, h + 15, eyeSize, eyeSize / 4); //smiling eyes
    ellipse(rightEyeX, h + 15, eyeSize, eyeSize / 4);

    //nose
    var noseX = w;
    var noseY = head * 0.05 + 245; //nose size changes every time you click
    var noseSize = head / 45;
    fill(255, 182, 193);
    ellipse(noseX, noseY, noseSize, noseSize - 2);

    //blush
    var mouthSize = head / 35;
    var mouthW = noseSize * 3;
    var leftBlushX = w - mouthW * 5;
    var rightBlushX = w + mouthW * 5;

    fill(255, 139, 139, 50);
    ellipse(leftBlushX, h + 40, blushSize * 2, blushSize * 2);
    ellipse(rightBlushX, h + 40, blushSize * 2, blushSize * 2);

    //mouth
    var mouthX = w;
    var mouthY = head * 0.05 + 253;

    if (mouth < 2){ //mouth changes to either a smile or surprised every time you click 

        //smile
        fill(255, 106, 106);
        arc(mouthX, mouthY, 12, 20, 0, PI, CHORD);

    } else if (mouth < 3) {
        //surprise
        fill(255, 106, 106);
        ellipse(mouthX, mouthY + 10, 15, 20);
    }

}
 
function mousePressed() {
    // when you click, these variables are reassigned
    // to random values within specified ranges
    backgroundR = random(100, 150);
    backgroundG = random(100, 150);
    backgroundB = random(200, 250);    
    head = random(180, 300);
    hoodieColorR = random(220, 255);
    hoodieColorG = random(220, 255);
    hoodieColorB = random(130, 180);
    headWidth = random(100, 200);
    headHeight = random(100, 250);
    eyeSize = random(24, 34);
    blushSize = random(25, 30);
    mouth = random(1, 3);
}

At first, it was challenging to work with positioning locations, but I got used to arithmetic solutions and enjoyed assigning names to variables. I had a lot of fun experimenting with reassigning the random values when you click for mousePressed() function.

Leave a Reply