//Kyunga Ko
//15104B
//kyungak@andrew.cmu.edu
//Assignment-02-Variable-Faces
var facewidth = 260;
var faceheight = 240;
var outerLx = 275;
var outerY = 200;
var eyesize = 40;
var outerRx = 370;
var pupilsize = 7
var nosewidth = 80;
var noseheight = 40;
var nostrilwidth = 5;
var nostrilheight = 10;
var mouthtip = 340;
var mouthheight = 290;
var mouthleft = 310;
var mouthright = 330;
var pupilcolor = 0;
function setup() {
createCanvas(640,480);
}
function draw() {
background(198,192,214);
//ears
fill(228,162,194);
//face
fill(245,216,230);
strokeWeight(3);
stroke(228,162,194);
ellipse(320,240,facewidth,faceheight);
//eyes
fill(255);
stroke(0);
ellipse(outerLx,outerY,eyesize,eyesize); //left outerpart of eye
ellipse(outerRx,outerY,eyesize,eyesize); //right outerrpart of eye
fill(pupilcolor);
ellipse(outerLx,outerY,pupilsize,pupilsize); //left pupil
ellipse(outerRx,outerY,pupilsize,pupilsize); //right pupil
//nose
fill(234,217,225);
ellipse(320,250,nosewidth,noseheight); //outerpart of nose
fill(151,139,145);
ellipse(300,250,nostrilwidth,nostrilheight); //left nostril
ellipse(340,250,nostrilwidth,nostrilheight); //right nostril
//mouth
fill(151,139,145);
triangle(mouthleft,mouthheight,width/2,mouthtip,mouthright,mouthheight);
}
function mousePressed() {
//when the user clicks, the variables are randomly reassigned
//within the given ranges
facewidth = random(250,350);
faceheight = random(230,350);
outerLx = random(250,275);
outerY = random(170,200);
pupilsize = random(5,25);
nosewidth = random(50,150);
noseheight = random(30,70);
nostrilwidth = random(3,10);
nostrilheight = random(5,15);
mouthtip = random(300,347);
mouthleft = random(250,315);
mouthright = random(325,390);
mouthheight = random(300,320);
pupilcolor = random(0,255);
}
As someone who is just learning about this program, learning and experimenting with the “mousePressed” function was interesting. Although I encountered a few problems here and there, I was able to overcome them and learn from the mistakes. I have also attached my notebook sketch of how the face originally looked. Although the result doesn’t synchronize with the sketch, I believe I will be able to make more intricate designs as I learn to utilize more features on javascript.