// Jessica Timczyk
// Section D
// jtimczyk@andrew.cmu.edu
// Project 02 - Variable Face
var eyeSize = 40;
var faceWidth = 200;
var faceHeight = 300;
var faceColorR = 241;
var faceColorG = 146;
var faceColorB = 188;
var eyeColorR = 126;
var eyeColorG = 242;
var eyeColorB = 230;
var eyeLX = 640 / 2 - faceWidth * 0.25;
var eyeRX = 640 / 2 + faceWidth * 0.25;
var mouthHeight = 480 / 2 + 40
var noseHeight = 25
function setup() {
createCanvas(640, 480);
}
function draw() {
background(226, 179, 239);
// face color
stroke(0);
strokeWeight(2);
fill(faceColorR, faceColorG, faceColorB);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
//eye variables
var eyeLX = 640 / 2 - faceWidth * 0.25;
var eyeRX = 640 / 2 + faceWidth * 0.25;
// eyeball shapes
fill(255);
ellipse(eyeLX, height / 2, eyeSize, eyeSize * 3/4);
ellipse(eyeRX, height / 2, eyeSize, eyeSize * 3/4);
// irises shape
strokeWeight(.75);
// the iris color will change but the variables are rearranged so that
// they are not the same color as the face
fill(eyeColorR, eyeColorG, eyeColorB);
ellipse(eyeLX, height / 2, eyeSize * 2/3, eyeSize * 2/3);
ellipse(eyeRX, height / 2, eyeSize * 2/3, eyeSize * 2/3);
// Pupil
fill(0);
ellipse(eyeLX, height / 2, eyeSize * 1/3, eyeSize * 1/3);
ellipse(eyeRX, height / 2, eyeSize * 1/3, eyeSize * 1/3);
//eyebrow variables
var eyebrowLX = eyeLX - 30;
var eyebrowRX = eyeRX - 30;
// left eyebrow shape
noStroke();
fill(123, 72, 72);
beginShape();
curveVertex(eyebrowLX, height / 2 - 20);
curveVertex(eyebrowLX, height / 2 - 20);
curveVertex(eyebrowLX + 30, height / 2 - 40);
curveVertex(eyebrowLX + 50, height / 2 - 35);
curveVertex(eyebrowLX + 50, height / 2 - 30);
curveVertex(eyebrowLX + 30, height / 2 - 33);
curveVertex(eyebrowLX + 30, height / 2 - 33);
endShape();
// right eyebrow shape
fill(123, 72, 72);
beginShape();
curveVertex(eyebrowRX + 60, height / 2 - 20);
curveVertex(eyebrowRX + 60, height / 2 - 20);
curveVertex(eyebrowRX + 30, height / 2 - 40);
curveVertex(eyebrowRX + 10, height / 2 - 35);
curveVertex(eyebrowRX + 10, height / 2 - 30);
curveVertex(eyebrowRX + 30, height / 2 - 33);
curveVertex(eyebrowRX + 30, height / 2 - 33);
endShape();
// mouth shape
fill(0);
stroke(235, 65, 97);
strokeWeight(4);
arc(width / 2, faceHeight, 80, 80, 0, PI, CHORD);
// restraining mouth height to stay below 2/3 of the way down
// the page as to not overlap with the eyes as they move
if (faceHeight <= height * 2/3) {
faceHeight = mouthHeight;
}
// Pig nose
stroke(0);
fill(227, 138, 190);
ellipse(width / 2, faceHeight - noseHeight, 70, 60);
// nostrils
fill(0);
ellipse(width / 2 - 10, faceHeight - noseHeight, 8, 15);
ellipse(width / 2 + 10, faceHeight - noseHeight, 8, 15);
// ears
strokeWeight(3);
fill(faceColorR, faceColorG, faceColorB);
ellipse(eyeLX, faceHeight * 1/3, 90, 85);
ellipse(eyeRX, faceHeight * 1/3, 90, 85);
// cheaks
// use eyeRX as x value so that the cheeks move with the eyes
arc(eyeRX + 35, faceHeight + 10, 80, 80, PI, PI + HALF_PI, OPEN);
arc(eyeLX - 35, faceHeight + 10, 80, 80, PI + HALF_PI, TWO_PI, OPEN);
}
function mousePressed() {
// when the user clicks, these variables are reassigned
// to random values within specified ranges. For example,
// 'faceWidth' gets a random value between 75 and 150.
faceWidth = random(150, 500);
faceHeight = random(100, 400);
eyeSize = random(30, 85);
faceColorR = random(235, 244);
faceColorG = random(54, 194);
faceColorB = random(161, 224);
eyebrowLX = random(eyeLX - 50, eyeLX - 10);
eyebrowRX = random(eyeRX - 50, eyeLX - 10);
mouthHeight = random(270, 330);
noseHeight = random(40, 15);
eyeColorR = random(126, 242);
eyeColorG = random(126, 242);
eyecolorB= random(126, 242);
}
It took me a little while to understand how to use the random command with variables to get the results I wanted. Each time I would add a new feature, I would draw it on the original face, and then add in the random movement and random function at the end. Most of my time was then spent manipulating the bounds so that the different features of my pig faces would not overlap.