Category: Project-02-Variable-Face

sketch

// Rhea Nayyar
// rnayyar@andrew.cmu.edu
// Section C
// Variable Face (02-C)



// W -> Width
// H -> Height
// Vert -> Vertical/Height
// Acr -> Across/Width

var headVert = 200;
var headAcr = 165;
var noseW = 28;
var noseH = 55;
var eyesW = 40;
var eyesH = 25;
var toplipW = 25;
var bottomlipW = 40;
var toplipH = 15;
var bottomlipH = 20;
var pupil = 6;
var iris = 20;
var eyebrowH = 8;
var eyebrowW = 45;


function setup() {
    createCanvas(500, 500);


}
//original face
function draw() {
  background(0, 178, 191);
  noStroke(0);
  fill( 116, 89, 71); //face color
  ellipse( 225, 250, headAcr, headVert); //head
  fill(145, 110, 89);
  rect(210,230,noseW,noseH); //nose
  fill(225);
  ellipse(180,220,eyesW,eyesH); //eye
  ellipse(265,220,eyesW,eyesH); //eye
  fill(74,61,92);
  ellipse(182,220,iris,iris);
  ellipse(263,220,iris,iris);
  fill(0);
  ellipse(182,220,pupil,pupil);
  ellipse(263,220,pupil,pupil);
  rect(160,190,eyebrowW,eyebrowH); //eyebrow
  rect(245,190,eyebrowW,eyebrowH); //eyebrow
  fill(182,74,117);
  ellipse(225,316,bottomlipW,bottomlipH); //bottom lip
  fill(121, 74, 94);
  ellipse(215,310,toplipW,toplipH); //top lip
  ellipse(235,310,toplipW,toplipH); //top lip

}
//randomized faces
function mousePressed() {
  headAcr = random(120, 230);
  headVert = random(180,265);
  noseH = random(45,67);
  noseW = random(25,35);
  eyesW = random(25,52);
  pupil = random(6,20);
  eyebrowH = random(5,20);
  toplipW = random(20,40);
  toplipH = random(12,20);
  bottomlipH = random(15,23);
  bottomlipW = random(33,45);
  iris = random(20,26);
}

A lot of experimenting with features had to go into this. Despite having previous knowledge from the self-portrait assignment on how to make a simple face with p5, I had to tweak things a lot for the ‘randomize’ process. Nevertheless, I’m starting to get the hang of correlating coordinates on the text editor to where the object I’m making would appear when I run the code. The faces look a little foolish but I like them 🙂

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.

sketch

/*
* Rachel Griswold
* rgriswol@andrew.cmu.edu
* Section B
* Project 02
*
*/

var faceWidth = 300;
var faceHeight = 300;
var eyebrowWidth = 50;
var eyebrowHeight = 10;
var eyeSize = 50;
var irisSize = 20;
var pupilSize = 10;
var noseBaseHeight = 75;
var noseBaseWidth = 30;
var noseTipHeight = 20;
var noseTipWidth = 30;
var noseTipArc1 = 3.14;
var noseTipArc2 = 6.28;
var mouthWidth = 20;
var mouthHeight = 20;
var mouthArc1 = 3.14;
var mouthArc2 = 0;
var irisColorR = 2;
var irisColorG = 174;
var irisColorB = 227;

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

function draw() {
	var eyeL = width/2 - faceWidth * 0.25
	var eyeR = width/2 + faceWidth * 0.25
	var eyeL2 = height/2 - faceHeight * 0.17
	var eyeR2 = height/2 - faceHeight * 0.17
	background(26, 26, 26);

	fill(223, 157, 151)
	ellipse(width/2, height/2, faceWidth, faceHeight) // face

	fill(0)
	ellipse(eyeL, eyeL2, eyebrowWidth, eyebrowHeight) // eyebrow L
	ellipse(eyeR, eyeR2, eyebrowWidth, eyebrowHeight) // eyebrow R

	fill(255)
	ellipse(eyeL, height/2, eyeSize, eyeSize) // eye L
	ellipse(eyeR, height/2, eyeSize, eyeSize) // eye R

	fill(irisColorR, irisColorG, irisColorB)
	ellipse(eyeL, height/2, irisSize, irisSize) // iris L
	ellipse(eyeR, height/2, irisSize, irisSize) // iris R

	fill(0)
	ellipse(eyeL, height/2, pupilSize, pupilSize) // pupil L
	ellipse(eyeR, height/2, pupilSize, pupilSize) // pupil R

	fill(223, 157, 151)
	arc(width/2, height/1.9, noseBaseWidth, noseBaseHeight, 3.14, 0) // nose base
	arc(width/2, height/1.75, noseTipWidth, noseTipHeight, noseTipArc1, noseTipArc2) // nose tip

	fill(109, 27, 30)
	arc(width/2, height/1.45, mouthWidth, mouthHeight, mouthArc1, mouthArc2) // mouth
}

function mousePressed() {
	// when mouse is pressed, variables are randomly reassigned
	faceWidth = random(200, 400);
	faceHeight = random (200, 400);
	eyebrowWidth = random(45, 75);
	eyebrowHeight = random(5, 25);
	eyeSize = random(30, 70);
	irisSize = random(15, 25);
	pupilSize = random(5, 15);
	noseBaseWidth = random(20, 40);
	noseBaseHeight = random(50, 100);
	noseTipWidth = random(30, 60);
	noseTipHeight = random(10, 60);
	noseTipArc1 = random(0, 6.28);
	noseTipArc2 = random(0, 6.28);
	mouthWidth = random(10, 60);
	mouthHeight = random(10, 40);
	mouthArc1 = random(0, 6.28);
	mouthArc2 = random(0, 3.14);
	irisColorR = random(0, 255);
	irisColorG = random(0, 255);
	irisColorB = random(0, 255);

}

I wasn’t a fan of my original face from project 01, so I decided to create a new base-face from scratch. I wanted to make the face vary a lot, but as a result sometimes the randomly generated face looks pretty stupid. I wasn’t quite sure how to balance “lots of variability” with “not looking ridiculous” but I tried my best.

sketch

// Sofia Miren Syjuco
// Section A
// smsyjuco@andrew.cmu.edu
// Assignment-02-C

// 5 pixels / inch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthWidth = 50;
var mouthHeight = 20;
var pupilSize = 10;
var cheekSize = 10;
var noseWidth =5;
var noseHeight = 20;
var browHeight = 2;
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(244,147,144);
    noStroke (0);

    //Ears. On either side of the middle of the face.
    fill (217,115,77);
    ellipse(width/2 - faceWidth/2, height / 2, eyeSize, eyeSize);
    ellipse(width/2 + faceWidth/2, height / 2, eyeSize, eyeSize);

    //Face: Center of canvas
    fill (217,115,77);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


    //Cheeks (blush). Positioned just under the eyes, but same idea.
    fill (255,104,77);
    var cheekLX = width / 2 - faceWidth * 0.25;
    var cheekRX = width / 2 + faceWidth * 0.25;
    ellipse(cheekLX, height/2 + faceHeight/8, cheekSize, cheekSize);
    ellipse(cheekRX, height/2 + faceHeight/8, cheekSize, cheekSize);

    //Eyes.
    fill (250);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    //Eyebrows, just above the eyes
    fill (0);
    ellipse(eyeLX, height / 2 - eyeSize/2, eyeSize, browHeight);
    ellipse(eyeRX, height / 2 - eyeSize/2, eyeSize, browHeight);

    //Pupils, in center of the eyes
    fill (0);
    ellipse (eyeLX, height/2, pupilSize, pupilSize);
    ellipse (eyeRX, height/2, pupilSize, pupilSize);

    //Mouth
    fill (246,30,74);
    ellipse (width/2, height/2 + faceHeight/4, mouthWidth, mouthHeight);

    //Nose
    fill (179,66,34);
    ellipse (width/2, height/2 + faceHeight/15, noseWidth, noseHeight);

}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(16, 30);
    mouthWidth = random(20, 50);
    mouthHeight = random(10, 15);
    pupilSize = random(2, 15);
    cheekSize = random(10, 25);
    noseWidth = random(5, 15);
    noseHeight = random(10, 30);
    browHeight = random(2, 5);
}

My process involved a lot of experimentation. Being a visual learner, it’s hard to try and understand things purely in terms of numbers. This project allowed me greater freedom with which to practice my programming, but set it within the bounds of facial proportions – which is something I am more familiar with. I am trying to stay away from using “magic numbers,” and instead work through how I can represent values through arithmetic and variables.