/*
Aaron Lee
//Section C
//sangwon2@andrew.cmu.edu
Project-02-variable faces
*/
//variables
var x = 5;
var y = 5;
var r = 255;
var g = 255;
var b = 255;
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
function setup() {
createCanvas(480, 640);
}
function draw() {
background(r,g,b);
//eyes
var eyeLX = width / 2 - faceWidth * 0.35;
var eyeRX = width / 2 + faceWidth * 0.35;
ellipse(eyeLX, height / 2 + x, eyeSize, eyeSize + x);
ellipse(eyeRX, height / 2 + y, eyeSize, eyeSize + y);
//face
noFill();
beginShape();
curveVertex(width / 2, 160);
curveVertex(width / 2, 160);
curveVertex(width - 160 + x, 200 + x);
curveVertex(width - 120 + x, height / 2 + x);
curveVertex(width - 160 + x, height - 200 + x);
curveVertex(width / 2, height - 160 + x);
curveVertex(160 + x, height - 200 + x);
curveVertex(120 + x, height / 2 + x);
curveVertex(160 + x, 200 + x);
curveVertex(width / 2, 160);
curveVertex(width / 2, 160);
endShape();
//hat
fill(50);
rect(width / 5 + x, height / 8 + 50 + x, width / 2 + 50 + y, 100 + y);
//nose
noFill();
beginShape();
curveVertex(width / 2, height /2);
curveVertex(width / 2, height /2);
curveVertex(width / 2 + x, 350 + x);
curveVertex(width / 2, 370);
curveVertex(width / 2, 370);
endShape();
//mouth
noFill();
beginShape();
curveVertex(width / 2 - 20, height - 230);
curveVertex(width / 2 - 20, height - 230);
curveVertex(width / 2 - 10 + y, height - 230 + y);
curveVertex(width / 2 + 10 + x, height - 230 + x);
curveVertex(width / 2 + 20, height - 230);
curveVertex(width / 2 + 20, height - 230);
endShape();
}
function mousePressed() {
// when the user clicks, these variables are reassigned
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
x = random(-30,30);
y = random(-30,30);
r = random(0,255);
g = random(0,255);
b = random(0,255);
}
I utilized curveVertx () command to create smooth transitions of the curves.