For this project, my idea was to start out with a relatively normal-looking, black-and-white image of a face and when the user clicked on it, the face would immediately erupt with color. Thus, as one can see, all features of the face change color with each click. Originally, I was also going to make the background change color as well, but unfortunately I was unable to find a way to do so. In order to play with the emotion of the face, I focused on making subtle changes to the eyebrows, eyes, and mouth. I chose these features because I believe that they can tell the most about a person’s emotions. The combination of these changing features — color, shape, and position — allow facial expressions to range from looking surprised, sinister, happy, and more.
Project 2: Variable Faces
/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Variable Faces Project 2
*/
var eyepupil = 20
var eye = 40
var facewidth = 250
var faceheight = 300
var eyex = 356
var eyey = 238
var cheekw = 50
var cheekh = 40
var cheekx = 242
var cheeky = 296
var earlx = 174
var eary = 280
var earrx = 425
var earring = 14
var arcA = 229
var arcAA = arcA + 104
var arcB = 200
var arcC = 90
var arcStart = 1
var arcStop = 0
var arcLipA = 300
var arcLipB = 340
var arcChord = 0
var mid = 300
var z = 0
var x3arc = 84.88
var y3arc = 201
var oh = 100
var rBlack = 0
var gBlack = 0
var bBlack = 0
var White = 285
var rWhite = 285
var gWhite = 285
var bWhite = 285
var rHair = 15
var gHair = 15
var bHair = 15
var rEyebrow = 16
var gEyebrow = 16
var bEyebrow = 16
var rCheek = 158
var gCheek = 158
var bCheek = 158
var rLip = 78
var gLip = 78
var bLip = 78
var rNose = 144
var gNose = 144
var bNose = 144
var rEar = 140
var gEar = 140
var bEar = 140
var rFace = 181
var gFace = 181
var bFace = 181
function setup() {
createCanvas(600, 600);
background(208);
}
function draw() {
fill(rFace, gFace, bFace);
noStroke();
ellipse(faceheight, facewidth + 10, facewidth, faceheight);//face
rect(facewidth + 20, faceheight + 50, faceheight / 5, facewidth - 110);//neck
fill(255);
ellipse(eyex, eyey, eye, eye);//right eye
ellipse(eyex - 100, eyey, eye, eye);//left eye
noFill();
stroke(rEyebrow, gEyebrow, bEyebrow);
strokeWeight(3);
arc(arcA, arcB, arcC, arcStart, arcStop, HALF_PI);//left eyebrow
arc(arcAA, arcB, arcC, arcStart, arcStop, HALF_PI);//right eyebrow
noFill();
stroke(rHair, gHair, bHair);
strokeWeight(6);
arc(mid, mid - 20, mid - 40, mid + 58, x3arc, y3arc, HALF_PI);//hair outline
arc(mid, mid, mid - 40, mid + 58, x3arc, y3arc, HALF_PI);//hair outline
arc(mid, mid - 10, mid - 40, mid + 58, x3arc, y3arc, HALF_PI);//hair outline
arc(mid, mid - 5, mid - 40, mid + 58, x3arc, y3arc, HALF_PI);//hair outline
arc(mid, mid - 15, mid - 40, mid + 58, x3arc, y3arc, HALF_PI);//hair outline
fill(rHair, gHair, bHair);
ellipse(mid, 70, eye*2, eye*2);//hair bun
noFill();
strokeWeight(3);
arc(eyex, eyey, 44, 45, mid + 80, 50, HALF_PI);//right eye liner
arc(eyex - 100, eyey, 44, 45, mid + 80, 50, HALF_PI);//left eye liner
noStroke();
fill(rBlack, gBlack, bBlack);
ellipse(eyex + 10, eyey + 1, eyepupil, eyepupil);//left eye pupil
ellipse(eyex - 90, eyey + 1, eyepupil, eyepupil);//right eye pupil
fill(White);
ellipse(eyex - 90, eyey + 1, eye/9, eye/9);//right eye pupil light
ellipse(eyex + 10, eyey + 1, eye/9, eye/9);//left eye pupil light
noStroke();
fill(rNose, gNose, bNose);
ellipse(mid, mid, oh - 60, oh / 5);//nose
fill(rCheek, gCheek, bCheek);
ellipse(cheekx, cheeky, cheekw, cheekh);//left cheek
ellipse(cheekx + 120, cheeky, cheekw, cheekh);//right cheek
fill(rFace, gFace, bFace);
ellipse(earlx, eary, oh - 76, 60);//left ear
ellipse(earrx, eary, oh - 76, 60);//right ear
fill(rEar, gEar, bEar);
ellipse(earlx, eary, earring, oh / 5);//left inner ear
ellipse(earrx, eary, earring, oh / 5);//right inner ear
fill(rWhite, gWhite, bWhite);
ellipse(earlx, eary + 20, earring, earring);//left earring
ellipse(earrx, eary + 20, earring, earring);//right earring
fill(White)
stroke(rLip, gLip, bLip);
strokeWeight(4); //lip outline
arc(arcLipA, arcLipB, 70, 70, arcChord, PI, CHORD);//teeth
}
function mousePressed(){
//when user clicks, eye color changes
rBlack = random(0, 285);
gBlack = random(0, 285);
bBlack = random(0, 285);
//when user clicks, earring color changes
rWhite = random(0, 285);
gWhite = random(0, 285);
bWhite = random(0, 285);
//when user clicks, hair and eyeliner change color
rHair = random(0, 285);
gHair = random(0, 285);
bHair = random(0, 285);
//when user clicks, eyebrow color changes
rEyebrow = random(0, 285);
gEyebrow = random(0, 285);
bEyebrow = random(0, 285);
//when user clicks, cheek color changes
rCheek = random(0, 285);
gCheek = random(0, 285);
bCheek = random(0, 285);
//when user clicks, lip color changes
rLip = random(0, 285);
gLip = random(0, 285);
bLip = random(0, 285);
//when user clicks, nose color changes
rNose = random(0, 285);
gNose = random(0, 285);
bNose = random(0, 285);
//when user clicks, inner ear color changes
rEar = random(0, 285);
gEar = random(0, 285);
bEar = random(0, 285);
//when user clicks, face/neck color changes
rFace = random(0, 285);
gFace = random(0, 285);
bFace = random(0, 285);
//when user clicks, eye pupil size changes
eyepupil = random (5, 30);
//when user clicks, eyebrow position changes
arcB = random(170, 215);
//when user clicks, mouth position changes
arcChord = random(0,100);
}
![[OLD – FALL 2016] 15-104 • COMPUTING for CREATIVE PRACTICE](https://courses.ideate.cmu.edu/15-104/f2016/wp-content/uploads/2020/08/stop-banner.png)
