GarrettRauck-Project-2

sketch

//Garrett Rauck
//Section C
//grauck@andrew.cmu.edu
//Project-02

///////////////////////////////////
//INIT VARS
///////////////////////////////////
//Layout parameters
var canvasWidth = 600;
var canvasHeight = 600;
var cx = canvasWidth/2;
var cy = canvasHeight/2;
var padding = 15;
var textY = canvasHeight-5

//Shape attributes
var normalStrokeWeight = 2;

//Face parameters
var faceWidth, faceHeight; //face
var chinWidth, chinHeight; //chin
var mouthType, mouthWidth, mouthHeight, mouthY; //mouth
var eyesType, eyesSpacing, eyesWidth, eyesHeight, eyesY; //eyes
var r, g, b;

//Names
var name;
var names = ["Mark","Steve","Kevin","Meredith","Kyle","Sharon",
             "Danny","John","Rachel","Sam","Nate","Will","Ashwath",
             "Gerry","Bob","Michael","Chris","Isaac","Alex","Gary",
             "Chloe","Anne","Maria","Sophia","Kelsey","Monica",
             "Phoebe","Marcos","Amy","Candace","Garrett","Sean",
             "Judy","Nico","Shannon","Alison","Margaret","Fuad",
             "Peter","Dave","Mary","Lisa","Susan"];

///////////////////////////////////
//HELPER FNS
///////////////////////////////////
function randomizeVars() {
    //face
    faceWidth = random(125,275);
    faceHeight = random(125,275);
    //chin
    chinWidth = random(125,275);
    chinHeight = random(125,275);
    //eyes
    eyesType = int(random(0,3));
    eyesSpacing = 100;
    eyesWidth = random(5,25);
    eyesHeight = random(5,25);
    eyesY = random(cy-eyesHeight/2,cy-faceHeight+eyesHeight/2);
    //mouth
	mouthType = int(random(0,4));
	mouthWidth = random(50, chinWidth-padding*2);
	mouthHeight = random(50, chinHeight-padding*2);
	mouthY = random(cy+mouthHeight/2,cy+chinHeight-mouthHeight/2);
	
	//skin color
	r = random(10,245);
	g = random(10,245);
	b = random(10,245);

	//name
	name = random(names);
}

function drawMouth() {
	if (mouthType == 0) {drawMouth0();}
    else if (mouthType == 1) {drawMouth1();}
	else if (mouthType == 2) {drawMouth2();}
	else if (mouthType == 3) {drawMouth3();}
}

function drawMouth0() { //toothy grin
	noStroke();
	fill(0);
	rect(cx, mouthY, mouthWidth, mouthHeight);
	fill(255);
	rect(cx, mouthY-mouthHeight/3, mouthWidth, mouthHeight/3); //teeth
	fill(127);
	rect(cx, mouthY+mouthHeight/3, mouthWidth, mouthHeight/3); //tongue
	stroke(0);
	noFill();
	strokeWeight(normalStrokeWeight);
	rect(cx, mouthY, mouthWidth, mouthHeight); //outline
	line(cx, mouthY+mouthHeight/6, cx, mouthY+mouthHeight/3);
}

function drawMouth1() { //basic line mouth
	stroke(0);
	strokeWeight(normalStrokeWeight);
    line(cx-mouthWidth/2, mouthY, cx+mouthWidth/2, mouthY);
}

function drawMouth2() { //basic circle mouth
	stroke(0);
	fill(25);
	strokeWeight(normalStrokeWeight);
	ellipse(cx, mouthY, mouthWidth, mouthHeight);
}

function drawMouth3() { //basic frown
    stroke(0);
    noFill();
    strokeWeight(normalStrokeWeight);
    arc(cx, mouthY, mouthWidth, mouthHeight, PI+PI/8, -PI/8);
}

function drawEyes() {
	if (eyesType == 0) {drawEyes0();}
	else if (eyesType == 1) {drawEyes1();}
	else if (eyesType == 2) {drawEyes2();}
}

function drawEyes0() {
	noStroke();
	fill(0);
	strokeWeight(normalStrokeWeight);
	ellipse(cx-eyesSpacing/2, eyesY, eyesWidth, eyesHeight); //left
	ellipse(cx+eyesSpacing/2, eyesY, eyesWidth, eyesHeight); //right
}

function drawEyes1() {
	noStroke();
	fill(255);
	ellipse(cx-eyesSpacing/2, eyesY, eyesWidth, eyesHeight); //left
	ellipse(cx+eyesSpacing/2, eyesY, eyesWidth, eyesHeight); //right
	fill(0);
	ellipse(cx-eyesSpacing/2, eyesY, eyesWidth/6, eyesHeight/6);
	ellipse(cx+eyesSpacing/2, eyesY, eyesWidth/6, eyesHeight/6);
}

function drawEyes2() {
	stroke(0);
	strokeWeight(normalStrokeWeight);
	line(cx-eyesSpacing/2-eyesWidth/2, eyesY, cx-eyesSpacing/2+eyesWidth/2, eyesY);
	line(cx+eyesSpacing/2-eyesWidth/2, eyesY, cx+eyesSpacing/2+eyesWidth/2, eyesY);
}

///////////////////////////////////
//RUN
///////////////////////////////////
function setup() {
    createCanvas(canvasWidth, canvasHeight);
    background(255);
    ellipseMode(CENTER);
    rectMode(CENTER);
    noStroke();
    randomizeVars();
}

function draw() {
	background(255);
	//face
	fill(r,g,b);
	rect(cx, cy-faceHeight/2, faceWidth, faceHeight);
	//chin
	fill(r,g,b);
	rect(cx, cy+chinHeight/2, chinWidth, chinHeight);
	//eyes
	drawEyes();
	//mouth
	drawMouth();

	//name
	noStroke();
	fill(0);
	textAlign(CENTER);
	textFont("Courier New");
	text(name,cx,textY);
}

function mousePressed() {
	randomizeVars();
}

For this exercise, I thought it was critical to define certain parameters that would allow each of the faces to be compared very easily. The face was simplified to an upper “face” rectangle and a lower “chin” rectangle, each of which was randomized with each generation creating unique but comparable facial shapes. Rather than changing the dimensions or inflection of facial features like the mouth and eyes, I thought it would be more interesting to have multiple “types” of eyes and mouths to suggest different expressions. These types would then respond to the dimensions of the chin and face, creating even more variety. Finally, I decided to add a name to each face. I created a list of possible names, hoping that viewers can relate to at least a few of them and have a laugh at what faces pair with what names. The randomization of color helps to bring the characters to life a bit and truly make them believable as individual personas.