JUNE_VARIABLEFACE
var face=1;
var backColor=1;
var glasses=1;
var mouth=1;
function setup() {
createCanvas(400,400);
background(100);
}
function draw() {
//background
if (backColor==1) {
background(136,160,150);
} else if (backColor==2) {
background(53,61,47);
} else {
background(32,42,37);
}
//face
rectMode(CENTER);
var facex=(width/2);
var facey=(height/2);
if (face==1) {
noStroke();
fill(255);
rect(facex,facey,width/3,height/2.5);
} else if (face==2) {
noStroke();
ellipse(facex,facey,width/3,height/2);
} else {
noStroke();
rect(facex,facey,width/3.5,height/2.2,40);
}
//glasses
print(glasses);
if (glasses==1) {
stroke(5);
strokeWeight(0);
fill(0);
ellipse(facex-25,facey-30,30,30);
ellipse(facex+25,facey-30,30,30);
strokeWeight(2.5);
stroke(0);
line(facex-25,facey-30,facex+25,facey-30);
} else if (glasses==2) {
fill(0);
stroke(0);
strokeWeight(3);
rect(facex-25,facey-30,30,25,10);
rect(facex+25,facey-30,30,25,10);
line(facex-25,facey-30,facex+25,facey-30);
} else {
stroke(0);
strokeWeight(10);
point(facex-25,facey-30);
point(facex+25,facey-30);
}
//nostrils
stroke(0);
strokeWeight(2+(1*face));
point(facex-5,facey+10);
point(facex+5,facey+10);
//mouth
fill(129,93,109);
noStroke();
if (mouth==1) {
rect(facex,facey+40,15,30,5);
} else if (mouth==2) {
ellipse(facex,facey+40,30,15);
} else {
ellipse(facex,facey+40,30,30);
}
//hair strand
noFill();
stroke(100);
strokeWeight(5);
curve(facex,facey-70,facex,facey-70,facex+50,facey-(100-(5*glasses)),facex+50,facey-(120+(20*glasses)));
//label
fill(255);
noStroke();
textSize(6);
textAlign(CENTER);
text("JUNE LEE / SECTION C",width/2,25);
}
function mousePressed() {
face=(int(random(1,4)));
backColor=(int(random(1,4)));
glasses=(int(random(1,4)));
mouth=(int(random(1,4)));
}
I enjoyed doing this project as I was able to explore different functions with the mousePressed() function on p5.js. By defining some variables, I was able to type code in relation to other measurements existing on the canvas.