Project-02-Variable-Face

sketch

//Hanna Jang 
//hannajan@andrew.cmu.edu 
//Section B 
//Project 2: Variable Faces

var BGcircleSize=250;
var BGcircleSize2=280;
var UpperFaceWidth=100; 
var UpperFaceHeight=80; 
var SmileX=300; 
var SmileY=245;
var Smilewidth=15; 
var SmileHeight=15; 
var anglestart=0; 
var LowerFaceWidth=150; 
var LowerFaceHeight=100;
var EyeSize=27;
var PupilSize=7;
var NostrilWidth=5;
var NostrilHeight=15; 
var EarSize=25;
var InnerEarSize=13;

function setup() {
    createCanvas(640, 480);
    background(245, 196, 224);
}

function draw() {
	//Background Circles
	fill(27, 71, 128);
	ellipse(width/2, height/2-45, BGcircleSize2, BGcircleSize2);
	fill(255);
	noStroke();
	ellipse(width/2, height/2-45, BGcircleSize, BGcircleSize);
	
	//ears 
	fill(202, 197, 245);
	var LXear =width/2-UpperFaceWidth*0.40; 
	var RXear =width/2+UpperFaceWidth*0.40; 
	ellipse(LXear, height/2-105, EarSize, EarSize);
	ellipse(RXear, height/2-105, EarSize, EarSize);
	
	//innerears
	fill(157, 141, 187); 
	var LXear =width/2-UpperFaceWidth*0.40; 
	var RXear =width/2+UpperFaceWidth*0.40; 
	ellipse(LXear, height/2-105, InnerEarSize, InnerEarSize);
	ellipse(RXear, height/2-105, InnerEarSize, InnerEarSize);
	
	//UpperFace
	fill(202, 197, 245); 
	ellipse(width/2, height/2-75, UpperFaceWidth, UpperFaceHeight);
	
	//LowerFace 
	fill(202, 197, 245);
	ellipse(width/2, height/2-20, LowerFaceWidth, LowerFaceHeight);

	//eyes 
	var LXeye =width/2-UpperFaceWidth*0.27;
	var RXeye =width/2+UpperFaceWidth*0.27;
	fill(255);
	noStroke();
	ellipse(LXeye, height/2-83, EyeSize, EyeSize);
	ellipse(RXeye, height/2-83, EyeSize, EyeSize);
	
	//pupils
	var LXpupil =width/2-UpperFaceWidth*0.27; 
	var RXpupil =width/2+UpperFaceWidth*0.27;
	fill(0);
	ellipse(LXpupil, height/2-81, PupilSize, PupilSize);
	ellipse(RXpupil, height/2-81, PupilSize, PupilSize);
	
	//nostrils
	var LXnostril =width/2-LowerFaceWidth*0.30;
	var RXnostril =width/2+LowerFaceWidth*0.30;
	ellipse(LXnostril, height/2-30, NostrilWidth, NostrilHeight);
	ellipse(RXnostril, height/2-30, NostrilWidth, NostrilHeight);
	
	//smile 
	fill(198, 73, 59);
	arc(SmileX, SmileY, Smilewidth, SmileHeight, anglestart, PI+QUARTER_PI, OPEN);
	}
	
function mousePressed() {
	//when the user's mouse clicks, these variables are reassigned
	//to random variables within specified ranges 
	
	BGcircleSize2=random(270, 350);
	EyeSize=random(20, 35);
	LowerFaceWidth=random(100, 180);
	LowerFaceHeight=random(90, 120);
	NostrilWidth=random(5, 15);
	NostrilHeight=random(15, 30);
	SmileX=random(280, 330);
	SmileY=random(240, 250);
	EarSize=random(25, 35); 
	
}
	
	

When I first saw the project assignment, I knew I wanted to make my character a hippo, one of my favorite animals. I then sketched up different ideas to make different changes on the hippo’s face when the mouse was clicked. This included variations in eyes, nostrils, ears, and the lower mouth area.

I then experimented with the different variations of sizes and movement of face structures. I was pleased to see that each time the mouse was clicked, a completely new hippo identity appeared, by random variation.