var eyeSize = 25;
var faceWidth = 150;
var faceHeight = 180;
var mouthWidth = 40;
var mouthHeight = 15;
var browWidth = 10;
var browHeight = 3;
var noseColor = 230;
function setup() {
createCanvas(480, 640);
}
function draw() {
background(173,216,230);
fill(246,232,205);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 - faceWidth * 0.2;
var eyeRX = width / 2 + faceWidth * 0.2;
fill(0,100,0);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
fill(0,100,0);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
fill(199,54,59);
ellipse(width/2, (height/2+35), mouthWidth, mouthHeight);
var browY = height/2 - 30;
fill(0);
rect(eyeLX-5,browY,browWidth, browHeight);
fill(0);
rect(eyeRX-5,browY,browWidth, browHeight);
fill(noseColor);
triangle(width/2,height/2+5,width/2-8,height/2+20, width/2+8,height/2+20)
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
mouthWidth = random(10,45);
mouthHeight = random(10,20);
browWidth = random (10,20);
browHeight = random (3,7);
noseColor = random (0,255);
}
The face that I created varies the mouth shape, eye size, and face shape, brow shape and nose shade on each click.