// Doo Won Nam
// 15-104 :: 1 Section B
// dnam@andrew.cmu.edu
// Project-02-Variable-Face
var faceWidth = 258
var faceHeight = 216
var eyebrowWidth = 78
var eyebrowHeight = 13
var maskHeight = 63
var mouthHeight = 24
var eyeWidth = 43
var eyeHeight = 30
var noseWeight = 18
var noseHeight = 74
var toothWidth = 19
var toothHeight = 14
var x = 640;
var dir = 1;
var speed = 10;
function setup() {
createCanvas(640, 489);
}
function draw() {
background(200, 147, 188);
noStroke();
//hat
fill(142, 79, 46);
rect(144, 111, 362, 43);
ellipse(325, 95, 340, 80);
//face
fill(209, 158, 131);
rect(190, 155, faceWidth, faceHeight);
fill(248, 173, 133);
rect(200, 155, faceWidth - 20, faceHeight - 10);
//eyebrows left then right
fill("black");
rect(209, 153, eyebrowWidth, eyebrowHeight);
rect(335, 153, eyebrowWidth, eyebrowHeight);
//mask
fill(95, 83, 76);
rect(190, 166, faceWidth, maskHeight);
//mouth
fill(185, 79, 79);
rect(270, 318, 130, mouthHeight);
ellipse(335, 317, 130, 24);
//teeth
fill("white");
rect(300, 305, toothWidth, toothHeight);
rect(330, 305, toothWidth, toothHeight);
//left eye
fill("white");
ellipse(248, 190, eyeWidth, eyeHeight);
fill("black");
ellipse(245, 190, eyeWidth - 24, eyeHeight - 12);
fill("white");
ellipse(240, 185, eyeWidth - 30, eyeHeight - 20);
//right eye
fill("white");
ellipse(366, 197, eyeWidth * 1.5, eyeHeight * 1.5);
fill(0);
ellipse(363, 197, eyeWidth * 1.5 - 32, eyeHeight * 1.5 - 20);
fill("white");
ellipse(358, 192, eyeWidth * 1.5 - 45, eyeHeight * 1.5 - 30);
//nose
fill(209, 158, 131);
rect(285, 212, noseWeight, noseHeight);
ellipse(284, 276, noseWeight + 2, noseHeight - 54);
}
//random change in width/height everytime mouse is pressed
function mousePressed() {
eyebrowWidth = random(50, 78);
eyebrowHeight = random(1, 30);
maskHeight = random(20, 80);
mouthHeight = random(24, 50);
eyeWidth = random(23, 63);
eyeHeight = random(20, 40);
noseWeight = random(9, 21);
noseHeight = random(50, 90);
toothWidth = random(15, 24);
toothHeight = random(10, 20);
}
Basing the face on classic cartoon image of a thief (with the line mask) and toast, I wanted to use the mousePress function to make it almost seem like the thief is surprised after being caught by the police. Using variables to make the placements and size of the facial parts easier, I was able to produce an efficient code for a interactive face.