Since I did not use the environmental variables to write my function, it took me a while at first to rewrite parts of my code. Then I re-define some variables by using the var …=random(num1, num2) to approach to the final generative faces. It is frustrating during the process when debugging it, but I feel super proud of myself when I finally get my code working.
siyunw-Generative faces
var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var hairWidth =350;
var hairHeight =350;
var neckWidth = width / 2;
var neckHeight= 4*neckWidth / 3;
var mouthSize= 40;
var mouthHeight = 30;
var backgroundR=250;
var backgroundG=150;
var backgroundB=100;
function setup() {
createCanvas(480, 640);
}
function draw() {
background(backgroundR,backgroundG,backgroundB);
fill(255,204,153);
circle((width-hairWidth) / 2,height / 2,50);
circle(width-(width-hairWidth) / 2,height / 2,50);//ears
fill(255,153,51);
ellipse(width / 2, height / 2, hairWidth, hairHeight);
rect((width-hairWidth) / 2,(height / 2),hairWidth,4*(hairHeight / 2) / 3);//face
var eyeLX = width / 2 - faceWidth * 0.15;
var eyeRX = width / 2 + faceWidth * 0.15;
fill(0);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);//eyes
fill(0);
ellipse(width/2,3*height / 4,mouthSize,mouthHeight);
//mouse
}
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.
backgroundR=random(200,300);
backgroundG=random(100,200);
backgroundB=random(50,150);
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
hairWidth = random(300,400)
hairHeight = random(300,400);
neckWidth = random(150,250);
mouthSize = random(35,80);
mouthHeight = random(25,70);
}