project 02: variable faces

m’s project 2
/* atayao
    lab section E
    project 2
*/

// random reassignment (RR)
var eyeSize = 20;
var eyeDistance = 0.20;
var faceWidth = 115;
var faceHeight = 105;

// pick a card, any card (PAC)
var mouth = 0;
var skin = 0;

// variables from canvas dimensions
var x = 320;
var y = 240;

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

function draw() {
    background(255);
    strokeWeight(2.5);
    /* if-else statements test for the current value of 
    PAC variables to fill in skin color, mouth, & any facial marks.*/

    // SKIN COLORS
    if (skin == 0) {
        // bright blue skin
        fill(33, 118, 255);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 1) {
        // pink skin
        fill(255, 79, 170);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 2) {
        // green skin
        fill(136, 212, 38);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 3) {
        // orange skin
        fill(255, 117, 43);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else if (skin == 4) {
        // turquoise skin
        fill(2, 206, 217);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    } else {
        // yellow skin
        fill(255, 228, 56);
        ellipse(width/2, height/2, faceWidth, faceHeight);
    }   

    // MOUTH SHAPES
    if (mouth == 0) {
        // open mouth
        fill(0);
        circle(width/2, (height/2 + (faceHeight/3)), faceWidth/6); 
    } else if (mouth == 1) {
    // neutral mouth
        line((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4));
    } else if (mouth == 2) {
    // smiling mouth
        fill(255);
        triangle((x - faceWidth/5), (y + faceHeight/4), (x + faceWidth/5), (y + faceHeight/4), x, (y + faceHeight/3));
    } else {
    // dot mouth
        fill(0);
        circle(width/2, (height/2 + (faceHeight/3)), faceWidth/25); 
    }

    // EYES
    var eyeLX = width / 2 - faceWidth * eyeDistance;    // x-coordinate for left eye
    var eyeRX = width / 2 + faceWidth * eyeDistance;    // x-coordinate for right eye
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);    // left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);    // right eye
    fill(0);
    ellipse(eyeLX, height/2, eyeSize/2, eyeSize/2);    // left pupil
    ellipse(eyeRX, height/2, eyeSize/2, eyeSize/2);    // right pupil
    fill(0);
}

function mousePressed() {
    /* when the mouse is clicked, variables are reassigned to random values within
    specified ranges. */

    // RR
    eyeSize = random(18, 35);
    eyeDistance = random(0.20, 0.28);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);

    // PAC
    skin = int(random(0, 6)); 
    mouth = int(random(0, 4));
    cheeks = int(random(0, 6));
}

The most challenging and interesting part of this project for me was figuring out the maximum random variability possible to create interesting combinations while still making the overall images legible as faces.

Leave a Reply