My Variable Portrait

Eamonn Burke Variable Portrait
var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 400;
var mouthWidth = 75;
var mouthHeight = 50;
var noseWidth = 20;
var noseHeight = 75;
var eyeballLeft = 5;
var eyeballRight = 5;

function setup() {
    createCanvas(640, 480);

}

function draw() {
	if (mouseX > width/2 & mouseY > height/2){
		background (0,255,77);		//bright green
	} else if (mouseX < width/2 & mouseY <= height/2){		
		background (0,239,255); 		//bright blue
	} else if (mouseX > width/2 & mouseY < height/2){
		background (255,0,230);			//bright pink
	} else {
		background (255,255,0); 		//bright yellow
	}


		fill(255,204,153);		//beige
	ellipse(width/2,height/2,faceWidth,faceHeight);		//face
		fill(209,109,202);		//pink
		
if (faceHeight <  250) {
  line (width/2, height/2 +faceHeight/3.5, width/2 + faceHeight/3.5, height/2 + faceHeight/3.5);		//straight mouth
} else if (faceHeight < 300) {
	beginShape();		//smile
		curveVertex (width/2,height/2 + faceHeight/3.5);
		curveVertex (width/2,height/2 + faceHeight/3.5);
		curveVertex (width/2 + faceWidth/10, height/2 + faceHeight/3);
		curveVertex (width/2 + faceWidth/5, height/2 + faceHeight/3);
		curveVertex (width/2 + faceWidth/3.5, height/2 + faceHeight/3.5);
		curveVertex (width/2 + faceWidth/3.5, height/2 + faceHeight/3.5);
		endShape();	
} else if (faceHeight < 370) {
	ellipse(width/2,height/2 + faceHeight/3.5,mouthWidth,mouthHeight);		//open mouth
} else {
	fill(0,0,0);		//black
	circle(width/2, height/2 + mouthHeight*1.69, mouthHeight/3.75)		//round mouth dark
	fill(255,46,130);		//pink-red
	beginShape();		//tongue
		curveVertex(width/2 - mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 - mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 + mouthWidth/5, height/2 + mouthHeight*2);
		curveVertex(width/2 + mouthWidth/2.5, height/2 + mouthHeight*2.25);
		curveVertex(width/2 + mouthWidth/2, height/2 + mouthHeight *2);
		curveVertex(width/2 + mouthWidth/10, height/2 + mouthHeight*1.75);
		curveVertex(width/2 + mouthWidth/10, height/2 + mouthHeight*1.75);
	endShape();
}

		fill(255,192,129);		//dark beige
	beginShape();		//nose
		curveVertex(width/2 - noseWidth/2.5, height/2 - noseHeight);
		curveVertex(width/2 - noseWidth/2.5, height/2 - noseHeight);
		curveVertex(width/2, height/2 + noseHeight);
		curveVertex(width/2 - noseWidth, height/2 + noseHeight*2);
		curveVertex(width/2 - noseWidth*2, height/2 + noseHeight);
		curveVertex(width/2 - noseWidth*0.7, height/2 - noseHeight);
		curveVertex(width/2 - noseWidth*0.7, height/2 - noseHeight);
	endShape();

if (noseHeight < 30) {		
	fill(0,0,0)
	var nostrilSize = 15
	ellipse (width/2-noseWidth * 1.6, height/2 + noseHeight, nostrilSize, nostrilSize);			//left nostril
	ellipse (width/2 - noseWidth * 0.5, height/2 + noseHeight, nostrilSize, nostrilSize);		//right nostril
}

if (faceWidth < 200) {
		var eyeLX = width/2 - faceWidth/4;		//spread apart eyes
		var eyeRX = width/2 + faceWidth/4;
} else {
		var eyeLX = width/2 - faceWidth * 0.35;		//normal
		var eyeRX = width/2; - faceWidth * 0.2;		//normal
}

		var eyeLY = height/2 - faceHeight * 0.3;
		var eyeRY = height/2 - faceHeight * 0.3;

		fill(255,255,255);		//white
	ellipse(eyeLX,eyeLY,eyeSize,eyeSize);		//left eye
	ellipse(eyeRX,eyeRY,eyeSize,eyeSize);		//right eye
		
if (eyeSize > 50) {		
		fill(3,129,75);		//green
	ellipse(eyeLX,eyeLY,eyeballLeft, eyeballLeft);		//left pupil
	ellipse (eyeRX,eyeRY, eyeballRight, eyeballRight);		//right pupil
} else {
		fill(3,129,75);		//green
		var x = constrain(mouseX,eyeLX - eyeSize/2 + eyeSize/4,eyeLX + eyeSize/2 - eyeSize/4);		//eyeball constraint
	ellipse (x,eyeLY, eyeSize/4, eyeSize/4);		//moving left pupil
		var y = constrain(mouseX,eyeRX - eyeSize/2 + eyeSize/4,eyeRX + eyeSize/2 - eyeSize/4);		//eyeball constraint
	ellipse (y, eyeRY, eyeSize/3, eyeSize/3);		//moving right pupil
}
		
		fill(0,0,0);		//black
if (faceHeight > 300) {
	rect(eyeLX - eyeSize/2,eyeLY - eyeSize/2 - faceHeight/10, eyeSize, eyeSize/4);		//left eyebrow
} else {
	rect(eyeLX - eyeSize/2,eyeLY - eyeSize/1.3- faceHeight/10, eyeSize, eyeSize/4);		//raised left eyebrow
}	
	rect(eyeRX - eyeSize/2,eyeRY - eyeSize/2 - faceHeight/10, eyeSize, eyeSize/4);		//right eyebrow

}





function mousePressed(){		
	faceWidth = random(100,400);
	faceHeight = random(200, 500);
	eyeSize =  random(30,80);
	mouthWidth = random (50,80);
	mouthHeight = random (50,80);
	noseWidth = random (20,50);
	noseHeight = random (20,65);
	eyeballRight = random (5,30);
	eyeballLeft = random (5,30);
	nostrilSize = random (10,15);
	}

noLoop();

My self portrait contains variables such as face height, face width, mouth height and width, eye size, and more. I used lots of conditionals so as to try to make the face as unique as possible each time. I also used constraints, but was not able to include motion, so I want to figure out how to integrate that soon soon.

Leave a Reply