Emily Zhou –– Variable Face

sketch

// face
var faceWidth = 225;
var faceHeight = 225;

var skin1 = 255;
var skin2 = 220;
var skin3 = 175;
// eyes
var eyeSize = 50;

var color1 = 0;
var color2 = 0;
var color3 = 0;

var pupilSize = 30;
//nose
var noseW = 30;
var noseH = 20;
// mouth (2)
// ver. semi-circle
var mouthW = 70;
var mouthH = 40;
// ver. circle
var mouth2d = 50;
// choice
var mouthChoice = 0;
// hat
var hat1 = 170;
var hat2 = 90;
var hat3 = 255;

var hatX1 = 275;
var hatY3 = 55;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(0);
    // skin
    fill(skin1, skin2, skin3)
    // face
    noStroke();
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    // eyeballs
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    // pupils
    fill(color1, color2, color3);
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
    // mouth (2)
    var mouthX = width / 2;
    var mouthY = height / 2 + faceHeight * 0.25;
    // ver. semi-circle
    if (mouthChoice == 0) {
        fill(250, 140, 140);
        noStroke();
        arc(mouthX, mouthY, mouthW, mouthH, TWO_PI, PI, CHORD);
    }
    // ver. circle
    else if (mouthChoice == 1) {
        fill(250, 140, 140);
        ellipse(mouthX, mouthY, mouth2d, mouth2d);
    }
    //nose
    var noseY = mouthY - mouthH / 2 - 20;
    fill(color1, color2, color3);
    ellipse(width / 2, noseY, noseW, noseH);
    // hat
    var hatX2 = width - hatX1;
    var hatX3 = (hatX1 + hatX2) / 2;
    var hatY = height / 2 - faceHeight / 2 + 15;
    fill(hat1, hat2, hat3);
    triangle(hatX1, hatY, hatX2, hatY, hatX3, hatY3);
}
 
function mousePressed() {
    // face
    faceWidth = random(150, 250);
    faceHeight = random(150, 250);
    skin1 = random(0, 255);
    skin2 = random(0, 255);
    skin3 = random(0, 255);
    // eyes
    eyeSize = random(25, 55);
    pupilSize = random(15, eyeSize - 10);
    color1 = random(0, 255);
    color2 = random(0, 255);
    color3 = random(0, 255);
    // nose
    noseW = random(30, 70);
    noseH = random(30, 70);
    // mouth (2)
    // ver. semi-circle
    mouthW = random(10, faceWidth - 80);
    mouthH = random(10, faceHeight * 1/4);
    // ver. circle
    mouth2d = random(30, faceHeight * 1/3);
    // choice
    mouthChoice = Math.floor(random(0, 1) * 2);
    // hat
    hat1 = random(0, 255);
    hat2 = random(0, 255);
    hat3 = random(0, 255);
    hatX1 = random(275, 300);
    hatY3 = random(45, 75);
}

It took me a while to figure out, but I found the way to randomize a range of colours using the 3 RGB values. I used this tactic in the skin, eyes, and hat to generate a ton of faces that all look very distinct. I added the party hat at the end because the face seemed too naked.

Leave a Reply