![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
When making this project, I was thinking of all the proportional measurements I use to make human faces, especially the relationship between the eyes and the rest of the face. Starting out, I noticed that my random faces were just scaling up and down because the ratios were all established on one variable: the eye size. The end result is more interesting and resembles some of the steps I would make to draw a face.
//Allison Traylor, atraylor,
//section B, Project 02
var eyeSize = 30; //eye size
var eyeSpaceL = 0.25; //eye space left
var eyeSpaceR = 0.25; //eye space right
var faceWidth = (eyeSize * 5); //face oval width (relative to eye size)
var faceHeight = 210; // face oval height
var craniumWidth = 150;
var craniumHeight = 150;
var mouthWidth = 25; // corner locations for mouth
var colorL = (200,200,200,200); // color of left eye
var colorR = (200,200,200,200); // color of right eye
var mColor = (200,200,200,200); // color of mouth
function setup() {
createCanvas(480, 640);
background(220);
}
function draw() {
background(222);
var noiseVal = random(0.001, .6); // flickering lines
//chin height is proportional to faceHeight, tring to make it right below the mouth
var chinHeight = height/2 + faceHeight/4 + faceHeight/8 + faceHeight/16;
// Cranium
noFill();
ellipse(width/2, height/2 - eyeSize, craniumWidth, craniumHeight);
//bounding box
push();
noFill();
stroke(noiseVal * 255); // lines flicker
rect(width/2 - craniumWidth/2, height/2 - eyeSize - craniumHeight/2, craniumWidth, craniumHeight);
pop();
//face ellipse
noFill();
ellipse(width/2, height/2, faceWidth, faceHeight);
// nose line proportional to eyes
line(width/2 - eyeSize/2, height/2 + faceHeight/4,
width/2 + eyeSize/2, height/2 + faceHeight/4);
//eyes
fill(colorL);
ellipse((width/2) - faceWidth*eyeSpaceL, height/2, eyeSize, eyeSize); // Left eye (to viewer)
fill(colorR);
ellipse((width/2) + faceWidth*eyeSpaceR, height/2, eyeSize, eyeSize); // right eye
//eye line
line(width/2 - faceWidth/2, height/2, width/2 + faceWidth/2, height/2);
// mouth
fill(mColor);
//I'm trying to isolate the mouth in a certain area between nose and chin
triangle((width/2) - mouthWidth, height/2 + faceHeight/4 + faceHeight/8,
width/2, height/2 + faceHeight/4 + faceHeight/12,
(width/2) + mouthWidth, height/2 + faceHeight/4 + faceHeight/8);
//chin
push();
noFill();
stroke(noiseVal * 255);
ellipse(width/2, chinHeight, mouthWidth, mouthWidth);
pop();
// plumbline
line(width/2, height/4, width/2, (height - height/4));
}
function mousePressed(){
// generating random values
eyeSize = random(20, 50);
eyeSpaceR = random(0.20, 0.30);
eyeSpaceL = random(0.20, 0.30);
faceHeight = random(190, 250);
craniumWidth = random(150, 200);
craniumHeight = random(150, 200);
mouthWidth = random(10, 30);
var from = color(200,200,200,200); //interpolate from this color
var to = color(0,0,0,200); // to this color
// random numbers to be used in lerpColor
var lerpNumber = random(0,1);
var lerpNumber2 = random(0,1);
var lerpNumber3 = random(0,1);
mColor = lerpColor(from, to, lerpNumber); // random shade for mouth
colorR = lerpColor(from, to, lerpNumber2); //random shade for right eye
colorL = lerpColor(from, to, lerpNumber3); // random shade for left eye
}
