Project 2 – Variable Faces

Click the bear to change its mood!

sketch_rachell
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!

Leave a Reply