Project 2: Variable Face

/*
*Alyssa Song
*agsong@andrew.cmu.edu
*Section C
*Project 02- Variable Faces; Face Variables
*
*/

var eyeSizeX = 40;
var eyeSizeY = 20;
var faceWidth = 150;
var faceHeight = 200;
var noseLength = 20;
var noseWidth = 10;
var browHeight = 170; //determines general brow height
var browExpression = 4; //determines brow arch
var leftMouth = 170; //determines the left edge of mouth
var rightMouth = 230; //determines the right edge of mouth
var mouthHeight = 250; //determines the height of the edges of the mouth
var mouthExpression = 260; //determines the expression of the mouth

function setup() {
    createCanvas(400, 400);
    //background(255, 255, 255);
}
   

function draw() {
	stroke(0);
	strokeWeight(2);


	//background changes color when mouse is on
    // left or right side of screen
	 if (mouseX < 0.5 * width) {
    	background(228, 228, 253); //light purple background
    } else {
    	background(198, 226, 249); //light blue background
    }

    //hair
    point (width / 2, height * 0.2);
    point (width * 0.7, height * 0.3);
    point (width * 0.75, height / 2);
    point (width * 0.75, height * 0.8);
    point (width * 0.25, height * 0.8);
    point (width * 0.25, height / 2);
    point (width * 0.3, height * 0.3);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.7, height * 0.3);
    curveVertex(width * 0.75, height / 2);
    curveVertex(width * 0.75, height * 0.8);
    curveVertex(width * 0.25, height * 0.8);
    curveVertex(width * 0.25, height / 2);
    curveVertex(width * 0.3, height * 0.3);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    fill(227, 180, 171); //skin color
    ellipse((width / 2), (height / 2), faceWidth, faceHeight) //face shape

    point (width / 2, height * 0.2);
    point (width * 0.4, height * 0.35);
    point (width * 0.3, height * 0.4);
    point (width * 0.4, height * 0.25);

    point (width / 2, height * 0.2);
    point (width * 0.6, height * 0.35);
    point (width * 0.7, height * 0.4);
    point (width * 0.6, height * 0.25);

    fill(0, 0, 0);
    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.4, height * 0.35);
    curveVertex(width * 0.3, height * 0.4);
    curveVertex(width * 0.4, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();

    beginShape();
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width * 0.6, height * 0.35);
    curveVertex(width * 0.7, height * 0.4);
    curveVertex(width * 0.6, height * 0.25);
    curveVertex(width / 2, height * 0.2);
    curveVertex(width / 2, height * 0.2);
    endShape();
    //eyes
    fill(255, 255, 255); //whites of eyes
    var leftEyeX = width / 2 - faceWidth * 0.25; //placement of left eye
    var rightEyeX = width / 2 + faceWidth * 0.25; //placement of right eye
    var eyeIrisX = 20; //placement of iris
    ellipse(leftEyeX, height / 2, eyeSizeX, eyeSizeY);
    ellipse(rightEyeX, height  /2, eyeSizeX, eyeSizeY);
    fill(149, 85, 73); //light brown

    ellipse(leftEyeX, height / 2, eyeIrisX, eyeSizeY); //left Iris
    ellipse(rightEyeX, height / 2, eyeIrisX, eyeSizeY); //right Iris
    fill(0, 0, 0); //black
    ellipse (leftEyeX, height / 2, 10); //left pupil
    ellipse (rightEyeX, height / 2, 10); //right pupil

    //if the eyes are big enough, this program will add
    //an eye reflection to make the face seem more "cute"
    if (eyeSizeY > 20) {
        fill(255, 255, 255);
        ellipse((leftEyeX + 3), height / 2, 5);
        ellipse((rightEyeX + 3), height / 2, 5);
    }
	
    //nose
    noFill();
    beginShape();
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2 - noseLength);
    curveVertex(width / 2, height / 2);
    curveVertex(width / 2 + noseWidth, height / 2 + noseLength);
    curveVertex(width / 2, height / 2 + 25);
    curveVertex(width / 2 - 5, height / 2 + noseLength);
    endShape();

    //mouth
    fill(152, 41, 41);
    //mouth outline
    point(leftMouth, mouthHeight);
    point(rightMouth, mouthHeight);
    point(width / 2, mouthExpression);
    //mouth shape
    fill(255, 255, 255);
    beginShape();
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(rightMouth, mouthHeight);
    curveVertex(width / 2, mouthExpression);
    curveVertex(leftMouth, mouthHeight);
    curveVertex(leftMouth, mouthHeight);
    endShape();

    //adds blush if the face is grinning or not frowning
    if (mouthExpression > 260) {
        strokeWeight(0);
        fill(251, 195, 204);
        ellipse(leftMouth - 10, mouthHeight - 20, 15);
        ellipse(rightMouth + 10, mouthHeight - 20, 15);
        strokeWeight(2);
    }

    //eyebrows
    strokeWeight(5);
    var leftBrowFront = width / 2 - faceWidth * 0.15
    var rightBrowFront = width / 2 + faceWidth * 0.15

    //left brow outline
    point(leftBrowFront, browHeight);
    point(leftBrowFront - 20, browHeight - browExpression);
    point(leftBrowFront - 35, browHeight);

    //left brow shape
    noFill();
    beginShape();
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront, browHeight);
    curveVertex(leftBrowFront - 20, browHeight - browExpression);
    curveVertex(leftBrowFront - 35, browHeight);
    curveVertex(leftBrowFront - 35, browHeight);
    endShape();

    //right brow outline
    point(rightBrowFront, browHeight);
    point(rightBrowFront + 20, browHeight - browExpression);
    point(rightBrowFront + 35, browHeight);
    
    //right brow shape
    noFill();
    beginShape();
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront, browHeight);
    curveVertex(rightBrowFront + 20, browHeight - browExpression);
    curveVertex(rightBrowFront + 35, browHeight);
    curveVertex(rightBrowFront + 35, browHeight);
    endShape();
    strokeWeight(2);

}

function mousePressed() {
    faceWidth = random(130, 170);
    faceHeight = random(230, 160);
    eyeSizeX = random(35, 45);
    eyeSizeY = random(15, 25);
    noseLength = random (15, 25);
    noseWidth = random (5, 15);
    browHeight = random (160, 180);
    browExpression = random (0, 10);
    leftMouth = random (160, 180);
    rightMouth = random (220, 240);
    mouthHeight = random (240, 260);
    mouthExpression = random (230, 270);


}