My variable faces are all completely computer generated and unique. Every feature is drawn from a set of randomly generated variables. I like the variation in emotions they can express.
sketch
// Evan Stuhlfire
// estuhlfi, Section B
// Project-02: Variable Faces; Face Variables
// Declare global variables
// variable controling head dimensions and shape
var headX = 0; // x value of head center
var headY = 0; // y value of head center
var minHead = 100;
var maxHeadW = 500; //max head width
var maxHeadH = 420; // max head height
var headHeight = 300;
var headWidth = 350;
// variables controling face dimensions and attributes
var eyeSize = 25;
var percentEyeW = 1; // value to adjust eye shape and position
var percentEyeH = 1; // value to adjust eye shape and position
var eyeVert = 2;
var lookAdjustLeft = .25; // Controls eye placement for look direction
var lookAdjustRight = .25;
var lookMax = .45;
// variable to control nose
var nose1 = 1;
var nose2 = 1.1;
var nose3 = 1.1;
var nose4 = 1;
var noseEnd = 1;
var noseLeft1 = 1;
var noseLeft2 = .9;
var noseLeft2 = 1;
// mouth variables
var noseMouthGap = 10;
var mouthStart = 1;
var mouth1 = 1.05;
var mouth2 = 1;
var mouthIncrease = 1.02;
// color variables
var color1 = 0;
var color2 = 0;
var color3 = 0;
function setup() {
createCanvas(640, 480);
// set head center
centerX = width/2;
centerY = height/2;
// get initial colors
getRandomColors();
}
function draw() {
var colorChange = .4; // factor to modify color
background(color1, color2, color3); // draw background from color variables
// calculate eyes
var eyeLeftX = centerX - headWidth * lookAdjustLeft; // x coordingate of left eye
// x coordinate of right eye, can look different directions
var eyeRightX = centerX + headWidth * lookAdjustRight;
var eyeHeight = min(eyeSize * percentEyeH, headHeight * .90);
var eyeWidth = eyeSize * percentEyeW;
var eyePositionY = height / eyeVert; // calculate vertical position of eyes
// calculate pupils
var pupilSize = .2;
var pupilLook = 4;
var pupilX = eyeLeftX;
var pupilY = eyeRightX;
if (lookAdjustLeft > lookAdjustRight){ // looking left move pupils left
pupilX -= pupilLook;
pupilY -= pupilLook;
} else { // looking right move pupils right
pupilX += pupilLook;
pupilY += pupilLook;
}
// variables for nose
var maxNose = .90;
var nose1X = (eyeLeftX + eyeRightX)/2;
var nose1Y = eyePositionY;
if (lookAdjustLeft > lookAdjustRight) {
// looking left point nose left
var nose2X = nose1X * noseLeft1;
var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
var nose3X = nose2X * noseLeft2;
var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
var nose4X= nose1X * noseLeft3;
var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);
} else {
// looking right point nose right
var nose2X = nose1X * nose1;
var nose2Y= min(nose1Y * nose2, (centerY + headHeight/2) * maxNose);
var nose3X = nose2X * nose3;
var nose3Y= min(nose2Y * nose3, (centerY + headHeight/2) * maxNose);
var nose4X= nose1X * noseEnd;
var nose4Y= min(nose3Y * nose4, (centerY + headHeight/2) * maxNose + noseMouthGap);
}
// calculate mouth
var maxMouth = .98;
var mouth1X = centerX * mouthStart;
var mouth1Y = min(nose4Y * mouth1, (centerY + headHeight/2) - noseMouthGap);
// keep mouth on face
if (headHeight > headWidth){
mouth1X = centerX - noseMouthGap;
}
var mouth2X = mouth1X * mouthIncrease;
var mouth2Y = mouth1Y * mouth2;
var mouth3X = mouth2X * mouthIncrease;
var mouth3Y = mouth2Y;
var mouth4X = mouth3X * mouthIncrease;
var mouth4Y = mouth1Y;
// draw head
fill(color1 * colorChange, color2, color3);
ellipse(centerX, centerY, headWidth, headHeight);
// draw eyes
fill(color1, color2 * colorChange, color3);
ellipse(eyeLeftX, eyePositionY, eyeWidth, eyeHeight);
ellipse(eyeRightX, eyePositionY, eyeWidth, eyeHeight);
// draw pupils
fill(10);
ellipse(pupilX, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);
ellipse(pupilY, eyePositionY, eyeWidth * pupilSize, eyeHeight * pupilSize);
// draw mouth
beginShape();
curveVertex(mouth1X, mouth1Y);
curveVertex(mouth1X, mouth1Y);
curveVertex(mouth2X, mouth2Y);
curveVertex(mouth3X, mouth3Y);
curveVertex(mouth4X, mouth4Y);
curveVertex(mouth4X, mouth4Y);
endShape();
// draw nose
fill(color1 * colorChange, color2, color3);
beginShape();
curveVertex(nose1X, nose1Y);
curveVertex(nose1X, nose1Y);
curveVertex(nose2X, nose2Y);
curveVertex(nose3X, nose3Y);
curveVertex(nose4X, nose4Y);
curveVertex(nose4X, nose4Y);
endShape();
}
function mousePressed() {
// When the mouse is clicked random values are generated to control the
// dimensions, position, and color of a face
// randomly generate head value
headWidth = random(minHead, maxHeadW);
headHeight = random(minHead, maxHeadH);
// randomly generate eye values
eyeSize = headWidth * random(.1, .3);
percentEyeW = random(.5, 1);
percentEyeH = random(.5, 1);
eyeVert = random(2, 2.25); // vertical position of eyes
lookAdjustLeft = random(.01, lookMax);
lookAdjustRight = lookMax - lookAdjustLeft;
// generate nose values
nose1 = random(1, 1.1);
nose2 = random(1, 1.2);
nose3 = random(1.1, 1.15);
nose4 = random(.98, 1.05);
noseEnd = random(.95, 1.05);
noseLeft1 = random(.95, 1);
noseLeft2 = random(.85, 1);
noseLeft3 = random(1, 1.12);
// generate mouth values
mouthStart = random(.95, 1.05);
mouth1 = random(1.05, 1.2);
mouth2 = random(.98, 1.02);
mouthIncrease = random(1.02, 1.03);
// randomly generate a new color combination
getRandomColors();
}
function getRandomColors(){
// function generates a random number for color variables
color1 = random(80, 255);
color2 = random(80, 255);
color3 = random(80, 255);
}