//Zhuoying Lin
//Section A
//zhuoyinl@andrew.cmu.edu
// Project-02-Variable-Face
//color
var colorA = 243;
var colorB = 175;
var colorC = 133;
var colorD = 75;
var colorE = 251;
var colorF = 228;
var colorG = 243;
var colorH = 275;
var colorI = 244;
var colorJ = 145;
var colorK = 5;
//position
var hairA = 290;
var eyeLX = 155
var eyeLY = 235
var eyeRX = 245
var eyeRY = 235
//size
function setup() {
createCanvas(640, 480);
}
function draw() {
background(180);
//neck
fill(colorA, colorB, colorB);
noStroke();
quad(220, 350, 160, 480, 100, 480, 160, 350);
//hair
fill(colorC, colorD, colorE);
noStroke();
arc(200, hairA, 330, hairA + 150, PI, 0);
//face
fill(colorF, colorG, colorH);
noStroke();
ellipse(200, 240, 200 ,240);
//eyebrowse
noFill();
strokeWeight(10);
stroke(85, 75, 37);
curve(120, 200, 140, 180, 160, 180, 180, 200);
curve(210, 200, 230, 180, 250, 180, 270, 200);
//eyes
fill(255);
stroke(1);
strokeWeight(5);
ellipse(150, 230, 30, 30);
ellipse(240, 230, 30, 30);
//eyeballs
fill(1),
noStroke();
ellipse(eyeLX, eyeLY, 10, 10);
ellipse(eyeRX, eyeRY, 10, 10);
//nose
fill(244, 145, 5);
noStroke();
triangle(195, 250, 215, 290, 175, 290);
//mouse
fill(246, 124, 150);
noStroke();
arc(195, 305, 40, 80, 0, PI);
stroke(1);
strokeWeight(5);
line(155, 305, 235 ,305);
}
function mousePressed() {
hairA = random(290, 350);
colroA = random(10, 255);
colorB = random(10, 230);
colorC = random(0, 200);
colorD = random(50, 100);
colorE = random(0, 255);
colorF = random(0, 255);
colorG = random(0, 255);
colorH = random(0, 255);
colorI = random(0, 255);
colorJ = random(0, 255);
eyeLX = random(140, 155);
eyeLY = random(218, 235);
eyeRX = random(228, 245);
eyeRY = random(218, 235);
}
For this project, I want to make different elements to change in a different way. I tried to make the distance between the end of hair end and headtop to maintain the same so I use equations to replace a single variable.