var eyeSize = 50;
var faceWidth = 250;
var faceHeight = 300;
var mouthWidth = 100
var mouthHeight = 50
var flufF = 50
function setup() {
createCanvas(640,480);
}
function draw() {
background(252, 136, 3);
//body
fill(234, 255, 0);
strokeWeight(5);
ellipse(width / 2, height, faceWidth, faceHeight);
//face
fill(234, 255, 0);
strokeWeight(5);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
//eyes
fill(255);
stroke(0);
strokeWeight(0);
var eyeLX = width / 2 - faceWidth * 0.2;
var eyeRX = width / 2 + faceWidth * 0.2;
ellipse(eyeLX + 10, height / 2, eyeSize + 10, eyeSize);
ellipse(eyeRX + 10 , height / 2, eyeSize + 10, eyeSize);
fill(0);
stroke(0);
strokeWeight(0);
var eyeLX = width / 2 - faceWidth * 0.2;
var eyeRX = width / 2 + faceWidth * 0.2;
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
//mouth
fill(194, 66, 66);
strokeWeight(0);
ellipse(width / 2, height / 1.5, mouthWidth, mouthHeight);
//fluff
stroke(234, 255, 0);
strokeWeight(30);
line(width / 2.05, 80, width /2.1 , 120);
stroke(234, 255, 0);
strokeWeight(20);
line(width / 2.5, 80, width /2.1 , 120);
stroke(234, 255, 0);
strokeWeight(10);
line(width / 2.3, 50, width /2.1 , 120);
}
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(200, 250);
faceHeight = random(250, 350);
eyeSize = random(30, 60);
mouthHeight = random(40, 60);
mouthWidth = random(75, 100);
}
This is my chick! I first made variables for the values that I wanted to change. Then made a canvas and shapes. I used canvas width/height variable to control a lot of shape positioning. Finally, I set some values to random when click, and also set restraints so shapes don’t come out of the face.