For this project, I started with a very complicated idea. I wanted to create three faces that would all have similar randomly changing variables that could flash around the screen like random lights.
However, I soon realized this would just be a lot of work and my code kept getting longer and longer with more and more variables to the point that I started confusing myself. In the end, I decided to just simplify my concept into one face with simple variables that could change.
var hairWidth = 160;
var hairHeight = 135;
var faceWidth = 130;
var faceHeight = 110;
var mouthHeight = 15;
var mouthWidth = 15;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(245, 235, 230);
//blue hair
strokeWeight(10);
stroke(172, 216, 242);
fill(180, 225, 255);
rectMode(CENTER);
rect(width/2, height/2, hairWidth, hairHeight, 20);
noStroke();
fill(250, 218, 190); //face
rect(width/2, height/2 + 13, faceWidth, faceHeight, 20);
fill(180, 225, 255); //bangs
arc(width/2 + hairWidth/2 - 5, height/2 - 50, hairWidth*(7/5), 100, PI/2, PI, PIE);
arc(width/2 - hairWidth/2 + 5, height/2 - 50, hairWidth*(2/3), 90, 0, PI/2, PIE);
strokeWeight(3); //eyes
stroke(255);
fill(188, 235, 203);
ellipse(width/2 - faceWidth/4, height/2 + 15, 20, 20);
ellipse(width/2 + faceWidth/4, height/2 + 15, 20, 20);
noStroke(); //mouth
fill(231, 90, 124);
ellipse(width/2, height/2 + 35, mouthWidth, mouthHeight);
}
function mousePressed(){
hairWidth = random(160, 250);
hairHeight = random(135, 225);
faceWidth = random(130, 220);
faceHeight = random(110, 100);
mouthWidth = random(15, 30);
mouthHeight = random(15, 30);
}