var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 200;
var Rf;
var Gf;
var Bf;
var Re;
var Ge;
var Be;
var rect1y=(480/2-100);
var rect2y=(480/2-130);
function setup() {
createCanvas(640, 480);
}
function draw() {
background(200,100,150);
//face
rectMode(CENTER);
fill(Rf,Gf,Bf);
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 - faceWidth * 0.30;
var eyeRX = width / 2 + faceWidth * 0.30;
//eyes
fill(Re,Ge,Be);
ellipse(eyeLX, (height / 2-40), eyeSize, eyeSize);
ellipse(eyeRX, (height / 2-40), eyeSize, eyeSize);
ellipse()
//mouth
p1 = {x: 200, y: 200}, p2 = {x:350, y:275 };
p3 = {x:290, y: 275}, p4 = {x: 200, y: 200};
noFill();
stroke(0);
curve(p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y);
//nose
q1 = {x: 230, y: 200}, q2 = {x:350, y:240 };
q3 = {x:310, y: 260}, q4 = {x: 200, y: 200};
curve(q1.x, q1.y, q2.x, q2.y, q3.x, q3.y, q4.x, q4.y);
}
function mousePressed() {
//when clicked the face and eyes change shape and color
//color
Rf= random(0,255);
Gf=random(0,255);
Bf=random(0,255);
Re= random(0,255);
Ge=random(0,255);
Be=random(0,255);
//shape
faceWidth = random(100, 250);
faceHeight = random(150, 300);
eyeSize = random(10, 50);
rect2y=(2-(faceWidth/2));
rect1y=((width/2),(faceHeight-10),60,80);
}
I had trouble figuring out curves and uploading the document.