PROJECT 02- VARIABLE FACE

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.

Leave a Reply