Click the bear to change its mood!
var headShape = 0;
var eyeShape = 0;
var noseShape = 0;
var mouthShape = 0;
var cheekColor = 0;
function setup() {
createCanvas(640, 480);
}
function draw() {
//background fit mouth mood
if (mouthShape == 0){ //happy
background(227, 212, 95);
} else if (mouthShape == 1){ //gasp
background(191, 153, 209);
} else if (mouthShape == 2){ //unamused
background(153, 175, 209);
} else { //slanted
background(153, 209, 173);
}
//head
fill(255);
noStroke();
if (headShape == 0){
//ears
ellipse((width/2)-125, 80, 50, 50);
ellipse((width/2)+125, 80, 50, 50);
//face
ellipse(width/2, height/2, 400, 400);
} else if (headShape == 1){
//ears
ellipse((width/2)-125, 100, 50, 50);
ellipse((width/2)+125, 100, 50, 50);
//face
ellipse(width/2, height/2, 400, 350);
} else {
//ears
ellipse((width/2)-125, 100, 50, 50);
ellipse((width/2)+125, 100, 50, 50);
//face
rect(120, 90, 400, 300, 130);
}
//eyes
var eyeLX = width/2 - 100;
var eyeRX = width/2 + 100;
var eyeSize = 20;
if (eyeShape == 0){ //eyes open
fill(0);
ellipse(eyeLX, height/2, eyeSize);
ellipse(eyeRX, height/2, eyeSize);
} else if (eyeShape == 1){ //eyes closed straight
stroke(0);
strokeWeight(7);
line(eyeLX-(eyeSize/2), height/2, eyeLX+(eyeSize/2), height/2);
line(eyeRX-(eyeSize/2), height/2, eyeRX+(eyeSize/2), height/2);
} else if (eyeShape == 2){ //eyes closed arc
stroke(0);
strokeWeight(7);
arc(eyeLX, height/2, eyeSize, eyeSize, PI, TWO_PI);
arc(eyeRX, height/2, eyeSize, eyeSize, PI, TWO_PI);
}else { //eyes closed arc 180
stroke(0);
strokeWeight(7);
arc(eyeLX, height/2, eyeSize, eyeSize, TWO_PI, PI);
arc(eyeRX, height/2, eyeSize, eyeSize, TWO_PI, PI);
}
//nose
if (noseShape == 0){
fill(0);
noStroke();
ellipse(width/2, (height/2)+ 10, 30, 15);
} else {
fill(0);
noStroke();
triangle((width/2)-15, (height/2)+10, (width/2)+15, (height/2)+10, width/2, (height/2)+15);
}
//mouth
if (mouthShape == 0){ //happy
noFill();
stroke(10);
strokeWeight(5);
arc(width/2, (height/2)+40, 30, 20, TWO_PI, PI);
} else if (mouthShape == 1){ //gasp
noFill();
stroke(10);
strokeWeight(5);
ellipse(width/2, (height/2)+50, 30);
} else if (mouthShape == 2){ //unamused
stroke(10);
strokeWeight(5);
line((width/2)-15, (height/2)+40, (width/2)+15, (height/2)+40);
} else { //slanted
stroke(10);
strokeWeight(5);
line((width/2)-15, (height/2)+35, (width/2)+15, (height/2)+45);
}
//cheeks
if (cheekColor == 0){
noStroke();
fill(189, 138, 134);
ellipse((width/2)-125, (height/2)+20, 30, 10);
ellipse((width/2)+125, (height/2)+20, 30, 10);
} else if (cheekColor == 1){
noStroke();
fill(227, 119, 104);
ellipse((width/2)-125, (height/2)+20, 30, 10);
ellipse((width/2)+125, (height/2)+20, 30, 10);
} else{
}
}
function mousePressed() {
headShape = int(random(3));
eyeShape = int(random(4));
noseShape = int(random(2));
mouthShape = int(random(4));
cheekColor = int(random(3));
}
This is programmed so that every time you click the bear, it has a different mood using a combination of different facial variables: head shape, eyes, nose, mouth, and cheeks. The background color reflects the mood based on the mouth, since the mouth shapes seemed the most emotive to me.
There are 5 variables for a face, each with 2-3 options.
There are 3 types of heads you could get: circle, oval, or rounded rectangle. Then there are 4 types of eyes, open (circles), or closed (straight, or arc up or arc down).
There are 2 types of noses, either round or triangular.
There are 4 different mouths: smiling, gasping, straight unamused, or slanted. This random variable is also linked to the background color.
There are 3 options for cheeks: rosy cheeks, bright blush, or no blush.
I hope this program makes you giggle!