/*Claire Yoon
Section E
claireyo@andrew.cmu.edu
Assignment-02
*/
// variables for face.
var eyeSize = 35;
var pupilSize = 25;
var faceWidth = 110;
var faceHeight = 110;
var facecolorR = 255
var facecolorG= 204;
var facecolorB= 77;
var brow = 185;
var mouthx= 60
var mouthy= 40
function setup() {
createCanvas(640, 480);
}
function draw() {
background(249);
noStroke (0)
//face
fill(250, facecolorG, facecolorB)
ellipse(width / 2, height / 2, faceWidth*2, faceHeight*2);
//outer eye
fill("white")
var eyeLX = width / 2 - faceWidth * 0.40;
var eyeRX = width / 2 + faceWidth * 0.40;
ellipse(eyeLX, height / 2.05, eyeSize, eyeSize);
ellipse(eyeRX, height / 2.05, eyeSize, eyeSize);
//pupil
fill(103, 70, 0)
var pupilLX = width / 2 - faceWidth * 0.40;
var pupilRX = width / 2 + faceWidth * 0.40;
ellipse(pupilLX, height / 2.05, pupilSize, pupilSize);
ellipse(pupilRX, height / 2.05, pupilSize, pupilSize);
//blush
fill(238, 134, 154)
var eyeLX = width / 2 - faceWidth*0.7;
var eyeRX = width / 2 + faceWidth*0.7;
ellipse(eyeLX, height / 1.8, eyeSize, eyeSize);
ellipse(eyeRX, height / 1.8, eyeSize, eyeSize);
//eyebrow
stroke(103, 70, 0);
strokeWeight(9);
noFill();
beginShape();
curveVertex(250, 200);
curveVertex(250, 200);
curveVertex(270, brow);
curveVertex(300, brow);
curveVertex(300, brow);
endShape();
stroke(103, 70, 0);
strokeWeight(9);
noFill();
beginShape();
curveVertex(340, brow);
curveVertex(340, brow);
curveVertex(370, brow);
curveVertex(390, 200);
curveVertex(390, 200);
endShape();
//mouth
stroke(103, 70, 0);
strokeWeight(9);
noFill();
arc(width / 2, height / 1.8, mouthx, mouthy, TWO_PI, PI);
}
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(100, 130);
faceHeight = random(100, 130);
facecolorG = random(76, 250);
facecolorB = random(36, 120);
eyeSize = random(0,50)
pupilSize = random(20, 30);
brow = random(180,200)
mouthx = random(40,80)
mouthy= random(30,70)
}
I gained inspiration from the emoji and set some values for things such as the eyebrows, eyes and the color of the face to show the difference in emotions when clicking on it.