sketch
var eyeSize = 50;
var faceWidth = 300;
var faceHeight = 300;
var mouthSize=20;
var State= 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(180);
fill (255,160,122);
ellipse(width/2, height/2, faceWidth, faceHeight);// face
var eyeLX = width / 2 - faceWidth * 0.25;// x position of left eye
var eyeRX = width / 2 + faceWidth * 0.25;// x position of right eye
fill(255,255,255);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);//left eye
ellipse(eyeRX, height / 2, eyeSize, eyeSize);//right eye
fill(0,0,0);
ellipse(eyeLX, height / 2, eyeSize/3, eyeSize/3);//left pupil
ellipse(eyeRX, height / 2, eyeSize/3, eyeSize/3);//right pupil
fill(255,0,0);
var mouthX =width/2;
var mouthY =height/2+0.25*faceHeight;
ellipse(mouthX, mouthY, mouthSize, mouthSize);//mouth
fill(139,69,19);
}
function mousePressed() {
State= int(random(1,4))
if (State == 1) {
faceWidth= 200;
faceHeight= 400;
eyeSize= 70;
mouthSize=40;
mouthY=height/2+0.5*faceHeight;// surprise face
} else if (State == 2) {
faceWidth= 325;
faceHeight= 275;
eyeSize=30
mouthSize=10;//relaxed face
} else {
faceWidth= 300;
faceHeight= 300;
eyeSize=50;
mouthSize=20// normal face
}
}
When I was designing the project, I was thinking about different states of facial expression and trying to show them in the product.