//body
var bodyWidth = 350;
var bodyHieght = 400;
var bodyColor = 170;
//face
var faceWidth = 250;
var faceHeight = 300;
//ear
var eyeSize = 30;
var earWidth = 50;
var earHeight = 70;
//the two middle points of eyebrows
var eyebrowPoint1 = 180;
var eyebrowPoint2 = 180;
//mouth left side
var mouthCornerL = 300;
//mouth right side
var mouthCornerR= 340;
var mouthHeight = 350;
//skin color
var skinR = 250;
var skinG = 230;
var skinB = 220;
//background begin color
var BackLR = 255;
var BackLG = 249;
var BackLB = 223;
//background end color
var BackRR = 211;
var BackRG = 248;
var BackRB = 238;
function setup() {
createCanvas(640, 480);
}
function draw() {
//background colors
noStroke();
from = color(BackLR, BackLG, BackLB);
to = color (BackRR, BackRG, BackRB);
colorMode(RGB);
interA = lerpColor(from, to, .25);
interB = lerpColor(from, to, .65);
fill(from);
rect(0, 0, 160, 480);
fill(interA);
rect(160, 0, 160, 480);
fill(interB);
rect(320, 0, 160, 480);
fill(to);
rect(480, 0, 160, 480);
//body
fill(bodyColor);
rect(width/2 - bodyWidth/2, height/2 + bodyHieght*0.25 , bodyWidth, bodyHieght, 100);
//face
fill(skinR, skinG, skinB);
ellipse(width/2, height/2, faceWidth, faceHeight);
//ears
fill(skinR, skinG, skinB);
ellipse(width/2 - faceWidth/2, height/2, earWidth, earHeight);
ellipse(width/2 + faceWidth/2, height/2, earWidth, earHeight)
//eyes
fill(31, 28, 27);
var eyeLX = width/2 - faceWidth*0.25;
var eyeRX = width/2 + faceWidth*0.25;
var eyeHeight = height/2
ellipse(eyeLX, eyeHeight, eyeSize, eyeSize);
ellipse(eyeRX, eyeHeight, eyeSize, eyeSize);
//left eyebrow
noFill();
stroke(70);
strokeWeight(2);
beginShape();
curveVertex(width/2 - faceWidth*0.375, height/2 - faceHeight*0.125);
curveVertex(width/2 - faceWidth*0.375, height/2 - faceHeight*0.125);
curveVertex(width/2 - faceWidth*0.3, eyebrowPoint1);
curveVertex(width/2 - faceWidth*0.2, eyebrowPoint2);
curveVertex(width/2 - faceWidth*0.125, height/2 - faceHeight*0.125);
curveVertex(width/2 - faceWidth*0.125, height/2 - faceHeight*0.125);
endShape();
//right eyebrow
noFill();
stroke(70);
strokeWeight(2);
beginShape();
curveVertex(width/2 + faceWidth*0.375, height/2 - faceHeight*0.125);
curveVertex(width/2 + faceWidth*0.375, height/2 - faceHeight*0.125);
curveVertex(width/2 + faceWidth*0.3, eyebrowPoint1);
curveVertex(width/2 + faceWidth*0.2, eyebrowPoint2);
curveVertex(width/2 + faceWidth*0.125, height/2 - faceHeight*0.125);
curveVertex(width/2 + faceWidth*0.125, height/2 - faceHeight*0.125);
endShape();
//mouth
fill(236, 39, 70);
noStroke();
beginShape();
curveVertex(mouthCornerL, height/2 +70);
curveVertex(mouthCornerL, height/2 +70);
curveVertex(width/2 - 10, mouthHeight);
curveVertex(width/2 + 10, mouthHeight);
curveVertex(mouthCornerR, height/2 +70);
curveVertex(mouthCornerR, height/2 +70);
endShape();
}
//when the user clicks, variables are assigned to random values within specifid ranges
function mousePressed(){
//face size change
faceWidth = random(150, 300);
faceHeight = random(200, 350);
//eye size change
eyeSize = random (10, 50);
//ear size change
earHeight = random(60, 80);
earWidth = random(40, 60);
//eyebrow change
eyebrowPoint1 = random(200, 220);
eyebrowPoint2 = random(180, 220);
//mouth change
mouthCornerL = random(280, 300);
mouthCornerR = random(340, 360);
mouthHeight = random(300, 350);
//skin color change
skinR = random(240, 260);
skinG = random(220, 240);
skinB = random(210, 230);
//background color change
BackLR = random(220, 256);
BackLG = random(180, 280);
backLB = random(200, 250);
BackRR = random(210, 256);
BackRG = random(170, 248);
BackRB = random(50, 238);
//body change
bodyWidth = random(350, 400);
bodyHieght = random(400, 450);
bodyColor = random(70, 170)
}
To start this project, I thought about what parts of a face can affect the appearance of it obviously. I came up with the size of the face, size of eyes, shapes of eyebrows and the shape of the mouth. Therefore, I set up different variables for these different part to be changed. Later, I realized the color of skin is also a good point, and I also made it changeable. For the background, I wanted to do something different, I wanted to make it changeable too. I found the function of lerpcolor() in reference, and I thought it would be a fun to make a background that generates gradual colors randomly.