Author: eyshi@andrew.cmu.edu

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);
    
    }