//variables for face
var eyeSize = 35;
var pupilSize = 10;
var hairLength = 250;
var hairWidth = 100;
var browY = 120
var browLength = 25;
var browWidth = 50;
//create the canvas
function setup() {
createCanvas(640, 480);
}
//build the basic face
function draw() {
background(200, 50, 50);
//hair
rectMode(CORNER);
noStroke();
fill(240);
rect(width / 4, height / 5, hairWidth, hairLength);
fill(5);
rect(width / 4, height / 5, hairWidth / 2, hairLength);
//mouth
fill(10);
strokeWeight(5);
rectMode(CENTER);
rect(width / 2, 275, 150, 35);
//eyes
var eyeLX = (width / 4) + hairWidth
var eyeRX = eyeLX + hairWidth
fill(5);
ellipse(eyeLX, height / 3, eyeSize, eyeSize);
ellipse(eyeRX, height / 3, eyeSize, eyeSize);
//pupils
fill(255);
ellipse(eyeLX, height / 3, pupilSize, pupilSize);
ellipse(eyeRX, height / 3, pupilSize, pupilSize);
//brows
stroke(5)
strokeWeight(15)
line(240, browY, 280, browY);
line(340, browY, 380, browY);
}
//create mouse functions: when the mouse is clicked,
//the size or position of these elements change value.
function mousePressed() {
eyeSize = random(20, 70);
browY = random(140, 90);
pupilSize = random(3, 30);
}
I created a number of variables as I built this face, inspired by modular 1960s design styles. After building the face, I spent a while experimenting with randomizing the size and position of all the elements and chose the three (eye size, pupil size, and eyebrow position) that I found most strongly affected the expressive qualities of the face.