//global variables
var eyeSize = 20;
var faceWidth = 200;
var faceHeight = 200;
var pupilSize = 10;
var noseLength = 30;
var noseHeight = 30;
function setup() {
createCanvas(640, 480);
rectMode(CENTER);
}
function draw() {
noStroke();
background(108, 207, 246);
//hair + torso
fill(112, 102, 119);
rect(width/2, height/2 + 30, faceWidth + 10, faceHeight - 30);
ellipse(width/2, height/2 - faceHeight/4, faceWidth + 10, faceHeight - 40);
//face shape
fill(204, 183, 174);
ellipse(width/2, height/2, faceWidth, faceHeight);
//eyeballs + pupils
var eyeLX = width/2 - faceWidth * 0.25;
var eyeRX = width/2 + faceWidth * 0.25;
var eyeLH = height/2 - faceHeight * 0.25;
var eyeRH = height/2 - faceHeight * 0.25;
fill(255);
ellipse(eyeLX, eyeLH, eyeSize, eyeSize);
ellipse(eyeRX, eyeRH, eyeSize, eyeSize);
fill(186, 199, 190);
ellipse(eyeLX, eyeLH, pupilSize, pupilSize);
ellipse(eyeRX, eyeRH, pupilSize, pupilSize);
//mouth
fill(166, 128, 140);
arc(width/2, height/2 + faceHeight * 0.25, 100, 50, HALF_PI, PI);
//nose
fill(255, 202, 177);
rect(width/2, height/2, noseLength, noseHeight);
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges.
faceWidth = random(100, 400);
faceHeight = random(70, 300);
eyeSize = random(55, 70);
pupilSize = random(5, 50);
noseLength = random(20, 70);
noseHeight = random(20, 70);
}
At first I wanted to make this a lot more complex than the way it turned out, but I definitely didn’t give myself enough time. I was going to make the shape of the nose switch between a circle, square, and triangle, in addition to having randomized proportions. I was also going to go with three different hairstyles and mouth options.
Unfortunately, I ended up only messing around with the proportions of the face, so I’m a little disappointed in the result. I might play with it more on my own.