Project2_Variable_face
var eyeWidth = 68;
var eyeHeight = 52;
var faceWidth = 360;
var faceHeight = 320;
var faceX = 232
var faceY = 320
var fillR = 50;
var fillG = 41;
var fillB = 46;
function setup() {
createCanvas(480, 640);
}
function draw() {
background(254,230,240);
fill(fillR,fillG,fillB);
rect(50,254,360,354);
noStroke();
fill(253,227,204);
ellipse(faceX, faceY, faceWidth, faceHeight);
var LeftEyeX = width*0.48-faceWidth*0.2;
var RightEyeX = width*0.48+faceWidth*0.2;
fill(0);
ellipse(LeftEyeX, faceHeight, eyeWidth, eyeHeight);
ellipse(RightEyeX, faceHeight, eyeWidth, eyeHeight);
var LeftPupilX = LeftEyeX*1.14;
var RightPupilX = RightEyeX*1.07;
fill(255);
ellipse(LeftPupilX, faceHeight, 12, 12);
ellipse(RightPupilX, faceHeight, 12, 12);
noStroke();
fill(fillR,fillG,fillB);
arc(86,faceHeight*0.9,140,200,HALF_PI,PI+HALF_PI);
arc(32,faceHeight*1.2,140,200,PI+HALF_PI,HALF_PI);
arc(84,faceHeight*1.65,140,200,HALF_PI,PI+HALF_PI);
arc(382,faceHeight*0.87,140,200,PI+HALF_PI,HALF_PI);
arc(440,faceHeight*1.24,140,200,HALF_PI,PI+HALF_PI);
arc(382,faceHeight*1.65,140,200,PI+HALF_PI,HALF_PI);
arc(236,faceHeight*0.7,408,280,PI,PI+PI,OPEN);
arc(40,faceHeight*0.59,190,200,0,QUARTER_PI);
arc(90,faceHeight*0.59,190,200,0,QUARTER_PI);
arc(130,faceHeight*0.59,190,200,0,QUARTER_PI);
arc(170,faceHeight*0.59,190,200,0,QUARTER_PI);
arc(220,faceHeight*0.59,190,200,0,QUARTER_PI);
arc(280,faceHeight*0.59,190,200,0,QUARTER_PI);
arc(320,faceHeight*0.59,190,200,0,QUARTER_PI);
noStroke();
stroke(223,197,168);
strokeWeight(4);
line(faceWidth*0.67,faceHeight*1.07,faceWidth*0.70,faceHeight*1.14);
line(faceWidth*0.70,faceHeight*1.14,faceHeight*0.72,faceHeight*1.16);
var browHeight = 274
noFill();
stroke(fillR, fillG, fillB);
strokeWeight(9);
beginShape();
curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
curveVertex(LeftEyeX-eyeWidth/2-4, browHeight+12);
curveVertex(LeftEyeX-15, browHeight);
curveVertex(LeftEyeX+15, browHeight);
curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
curveVertex(LeftEyeX+eyeWidth/2+4, browHeight+12);
endShape();
noFill();
stroke(fillR, fillG, fillB);
strokeWeight(9);
beginShape();
curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
curveVertex(RightEyeX-eyeWidth/2-4, browHeight+12);
curveVertex(RightEyeX-15, browHeight);
curveVertex(RightEyeX+15, browHeight);
curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
curveVertex(RightEyeX+eyeWidth/2+4, browHeight+12);
endShape();
noFill();
stroke(237,34,93);
strokeWeight(7);
var x1 = 170,
x2 = faceWidth*0.6,
x3 = faceWidth*0.7,
x4 = 300;
var y1 = 410,
y2 = faceHeight*1.35,
y3 = faceHeight*1.37,
y4 = 410;
bezier(x1, y1, x2, y2, x3, y3, x4, y4);
var earY = faceHeight+20
fill(253,227,204);
noStroke();
arc(faceX - faceWidth/3,earY,100,100,HALF_PI,PI+HALF_PI);
arc(faceX + faceWidth/3,earY,100,100,PI+HALF_PI,HALF_PI);
fill(255);
ellipse(faceX - faceWidth/3-20,earY+30,14,14);
ellipse(faceX + faceWidth/3+20,earY+30,14,14);
noStroke();
fill(253,227,204);
rect(176,460,120,100);
fill(253,227,204);
ellipse(295,591,127,100);
fill(5,57,111);
rect(46,520,400,200,80);
fill(253,227,204);
noStroke();
triangle(230,600,176,520,296,520);
stroke(255);
strokeWeight(13);
line(176,520,230,600);
line(230,600,296,520);
}
function mousePressed() {
faceWidth = random(340, 380);
faceHeight = random(300,340);
eyeWidth = random(60,80);
eyeHeight = random(24,66);
browArc = random(5, 50);
browHeight = random(246,340);
browHeight = constrain(browHeight,faceHeight*0.9+20,faceHeight+eyeHeight/2+10);
x1 = random(100,180);
y1 = random(380,600);
x4 = random(270,340);
y4 = random(380,600);
fillR = random(20,80);
fillG = random(10,70);
fillB = random(16,76);
}
Creating an animation was fun yet quite complex requiring to use many variables and equations instead of the usual coordinates. It really helped me understand setting the variables as well as the random functions. I also had to learn other functions including the curve vertex and the berzier point as using ellipses and arcs limited creating certain motions.