My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.
sketch
//Favour Adesina Section B
var faceWidth = 300;
var lipHeight = 20;
var lipWidth = 60;
var BlipWidth = 100;
var eyeWidth = 70;
var eyeHeight = 100;
var pupSize = 60;
var faceHeight = 400;
function setup() {
createCanvas(600, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
noStroke()
background(247, 195, 218);
//SHOULDER
fill(255, 67, 89);
ellipse(width/2, height/2 + faceHeight/2, 2*faceWidth, faceHeight);
//EARS
fill(141, 75, 36);
ellipse(width/2 - faceWidth/2, height/2, faceWidth/4, faceHeight/4); //right ear outer
ellipse(width/2 + faceWidth/2, height/2, faceWidth/4, faceHeight/4); //left ear outer
fill(34, 20, 13);
ellipse(width/2 - faceWidth/2, height/2, faceWidth/8, faceHeight/8); //right ear inner
ellipse(width/2 + faceWidth/2, height/2, faceWidth/8, faceHeight/8); //left ear inner
//FACE
fill(141, 75, 36);
ellipse(width/2, height/2, faceWidth, faceHeight); // face
//EARRINGS
fill(255, 255, 0);
triangle((width/2 - (faceWidth/2 + faceWidth/50)), height/2 + faceHeight/4, width/2 - faceWidth/2, height/2 + faceHeight/16, width/2 - faceWidth/1.5, height/2 + faceHeight/4);
triangle((width/2 + (faceWidth/2 - faceWidth/100)), height/2 + faceHeight/4, width/2 + faceWidth/2, height/2 + faceHeight/16, width/2 + faceWidth/1.55, height/2 + faceHeight/4);
//EYES
var LXeye = width/2 - faceWidth * 0.26;
var RXeye = width/2 + faceWidth * 0.26;
fill(255, 255, 255);
ellipse(LXeye, height/2, eyeWidth, eyeHeight); //Eye Whites
ellipse(RXeye, height/2, eyeWidth, eyeHeight); //Eye Whites
fill(104, 54, 37);
ellipse(LXeye, height/2, pupSize, pupSize); //Pupils
ellipse(RXeye, height/2, pupSize, pupSize); //pupils
fill(0);
ellipse(LXeye, height/2, 20, 20); //inner pupils
ellipse(RXeye, height/2, 20, 20); //inner pupils
//NOSE
stroke(35, 31, 32);
strokeWeight(7);
line(width/2, height/2, width/2, (height/2)+ eyeHeight/3); //Nose bridge
ellipse((width/2)-5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25); // nose
ellipse((width/2)+5, (height/2)+ eyeHeight/3, faceWidth/25, faceWidth/25); // nose
//LIPS
strokeWeight(2);
var BlipY = height/2 + faceHeight * 0.27 + lipHeight/2;
fill(122, 22, 25);
ellipse(width/2, BlipY, BlipWidth, lipHeight);
noStroke();
fill(173, 69, 87); //light pink
ellipse(width/2, BlipY, lipWidth/2, lipHeight/2); //inner mouth
//HAIR
fill(34, 20, 13);
ellipse(width/2, height/2 - faceHeight/2, width/7, height/6);
ellipse(width/2 - 55, height/2 - faceHeight/2, width/8, height/7);
ellipse(width/2 + 55, height/2 - faceHeight/2, width/8, height/7);
}
function mousePressed() {
faceWidth = random(300, 500);
faceHeight = random(260, 400);
lipHeight = random(10, 50);
pupSize = random(20, 70);
lipWidth = random(10, 60);
BlipWidth = random(30, 100);
eyeWidth = random(20, 150);
eyeHeight = random(80, 170);
}