sketch
var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var mouth = 1;
function setup() {
createCanvas(300, 300);
faceShape = 1;
}
function mousePressed() {
faceShape = -faceShape;
faceWidth = random(75, 200);
faceHeight = random(100, 200);
eyeSize = random(10, 50);
pupilSize = random(1,4)
mouth = random(1,4);
}
function draw() {
background(180);
//head shapes
if (faceShape>0) {
ellipse(width/2,height/2,faceWidth,faceHeight);
}
else if (faceShape<0){
rect((width - faceWidth)/2,(height - faceHeight)/2,faceWidth,faceHeight);
}
//eyes and pupils
var LeftEye = width / 2 - faceWidth / 4;
var Righteye = width / 2 + faceWidth / 4;
ellipse(LeftEye, 5*height / 12, eyeSize);
ellipse(Righteye, 5*height / 12, eyeSize);
fill(0);
ellipse(LeftEye, 5*height / 12, eyeSize/pupilSize);
ellipse(Righteye, 5*height / 12, eyeSize/pupilSize);
fill(255);
//mouths
if (mouth<2) {
//smile
ellipse(width/2,height/2+25,50,25);
stroke(255);
rect(width/2-30,height/2+10,60,15);
stroke(0);
}
else if (mouth<3) {
//sad
ellipse(width/2,height/2+35,50,25);
stroke(255);
rect(width/2-30,height/2+35,60,15);
stroke(0);
}
else if (mouth<4) {
line((width/2)-faceWidth/4, (height/2)+faceHeight/5, (width/2)+faceWidth/4, (height/2)+faceHeight/5);
}
}
One of the difficulties I had with this project was creating a uniform smile. In order to do so, I used certain blocks to cover the ellipses and removed the stroke color. I had a lot of trouble with the random() function because I had also forgotten that it outputted float point numbers.