//Min Young Jeong
//Section A 9:30am
//mjeong1@andrew.cmu.edu
//Project-02-Variable Faces
var facewidth = 150;
var faceheight = 170;
var eyesize = 10;
var a = 100;
var b = 45;
var c = 74;
//color rgb
var earwidth = 50;
var earheight = 40;
var hairx = 200;
var hairy = 400;
//hair
var line = 2;
//eyes stroke weight
var beardlengthx = 0;
var beardlengthy = 0;
var bright = 0;
//background brightness
function setup() {
createCanvas(640,480);
}
function draw() {
if (mouseIsPressed) {bright = 0;}
background(bright);
bright = bright + 1;
//background
noStroke();
fill(a,b,c);
quad(width/2,hairy,width/2+hairx,200,width/2+100,100,width/2-100,100);
triangle(width/2-100,100,width/2-hairx,200,width/2,hairy);
//hair
fill(248,170,35);
ellipse(width/2,height/2-20,facewidth,faceheight);
//facefoundation
arc(width/2-facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
arc(width/2+facewidth*0.35,height/2-120,earwidth,earheight,PI,0,CHORD);
//ear
fill(253,108,1);
arc(width/2-facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);
arc(width/2+facewidth*0.35,height/2-120,earwidth/2,earheight/2,PI,0,CHORD);
fill(a,b,c);
ellipse(width/2-65,height/2+50,65,65);
ellipse(width/2+65,height/2+50,65,65);
//hair2
noStroke();
fill(253,108,1);
rectMode(CORNER);
fill(248,134,35);
quad(width/2-33,height/2+50,width/2-15,height/2,width/2+15,height/2,width/2+33,height/2+50);
fill(241,87,1);
rect(width/2-15,height/2-105,30,155);
//inside face
noFill();
strokeWeight(4);
stroke(a,b,c);
ellipse(width/2,height/2-20,facewidth,faceheight);
//outerfaceline
noFill();
strokeWeight(2);
stroke(b,a,c);
beginShape();
curveVertex(width/2,height/2+50);
curveVertex(width/2,height/2+52);
curveVertex(width/2+30+beardlengthx,height/2+38+beardlengthy);
curveVertex(width/2+70+beardlengthx,height/2+40+beardlengthy);
curveVertex(width/2+80+beardlengthx,height/2+50+beardlengthy);
endShape();
beginShape();
curveVertex(width/2,height/2+50);
curveVertex(width/2,height/2+52);
curveVertex(width/2+30+beardlengthx,height/2+48+beardlengthy);
curveVertex(width/2+70+beardlengthx,height/2+50+beardlengthy);
curveVertex(width/2+80+beardlengthx,height/2+60+beardlengthy);
endShape();
beginShape();
curveVertex(width/2,height/2+50);
curveVertex(width/2,height/2+52);
curveVertex(width/2-30-beardlengthx,height/2+38+beardlengthy);
curveVertex(width/2-70-beardlengthx,height/2+40+beardlengthy);
curveVertex(width/2-80-beardlengthx,height/2+50+beardlengthy);
endShape();
beginShape();
curveVertex(width/2,height/2+50);
curveVertex(width/2,height/2+52);
curveVertex(width/2-30-beardlengthx,height/2+48+beardlengthy);
curveVertex(width/2-70-beardlengthx,height/2+50+beardlengthy);
curveVertex(width/2-80-beardlengthx,height/2+60+beardlengthy);
endShape();
//beard
noStroke();
fill(253,108,1);
arc(width/2,height/2+50,70,70,0,PI,CHORD);
fill(a,b,c);
arc(width/2,height/2+50,30,30,0,PI,CHORD);
//nose
strokeWeight(line);
stroke(250);
fill(0);
ellipse(width/2-facewidth*0.25,height/2-20,eyesize,eyesize);
ellipse(width/2+faceheight*0.25,height/2-20,eyesize,eyesize);
//eyes
}
function mousePressed(){
eyesize = random(0,20);
earwidth = random(10,60);
earheight = random(10,80);
hairx = random(200,240);
hairy = random(400,440);
a = random(0,15);
b = random(50,200);
c = random(50,100);
line = random(1,7);
beardlengthx = random(0,30);
beardlengthy = random(0,20);
}
For this assignment, I drew lion’s face with variables for eye size, ear size, hair style, hair color, and length of beard. Background also fades alway as soon as a person presses the mouse and it reappears for each mouse click, which I wanted to highlight each variable face of the lion. For this assignment I challenged to use curveVertex to depict the smooth curve for lion’s beard.