// Simple beginning template for variable face.
var eyeSize = 20;
var eyeInside = 10;
var faceWidth = 100;
var faceHeight = 150;
var earWidth = 5;
var earHeight = 20;
var noseBridge = 15;
var hairType = 3;
var colorR = 180;
var colorG = 180;
var colorB = 180;
var colorR2 = 200;
var colorG2 = 200;
var colorB2 = 200;
var mouthWidth = 20;
var mouthHeight = 5;
var mouthPosition = 4;
var eyeBrow = 1;
function setup() {
createCanvas(300, 300);
}
function draw() {
background(colorR, colorG, colorB);
noStroke();
fill(255);
switch(hairType) {
case 1:
fill(colorR2, colorG2, colorB2);
ellipse(width/2, height/2+faceHeight/6, faceWidth+30, faceHeight+80);
break;
case 2:
fill(color(colorR2, colorG2, colorB2));
rectMode(CENTER);
rect(150, 150-faceHeight/2.5, faceWidth-20, faceHeight/6,80);
rect(150, 150-faceHeight/2.5, faceWidth-50, faceHeight/2,90);
break;
default:
strokeWeight(10);
stroke(color(colorR2, colorG2, colorB2));
arc(150, 150, faceWidth, faceHeight, PI, 0);
}
fill(255);
strokeWeight(1);
noStroke();
//face
ellipse(width / 2, height / 2, faceWidth, faceHeight);
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
var earLX = width / 2 - faceWidth / 2;
var earRX = width / 2 + faceWidth / 2;
var mouthY = height / 2 + faceWidth / mouthPosition;
noStroke();
//ear
ellipse(earLX, height / 2, earWidth, earHeight);
ellipse(earRX, height / 2, earWidth, earHeight);
fill(colorR, colorG, colorB);
//eye
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
fill(255);
ellipse(eyeLX, height / 2, eyeInside, eyeInside);
ellipse(eyeRX, height / 2, eyeInside, eyeInside);
fill(colorR, colorG, colorB);
//nose
stroke(color(colorR, colorG, colorB));
line(150,160,150,150+noseBridge);
//mouth
ellipse(width / 2, mouthY, mouthWidth, mouthHeight);
//neck
rectMode(CENTER);
fill(255);
noStroke();
rect(150, 150+faceHeight/2,25,30);
//eyebrows
switch(eyeBrow) {
case 1:
noFill();
stroke(color(colorR, colorG, colorB));
arc(eyeLX, eyeRX-40, 30, 30, PI, 0);
arc(eyeRX, eyeRX-40, 30, 30, PI, 0);
break;
case 2:
noFill();
stroke(color(colorR, colorG, colorB));
strokeWeight(4);
line(eyeLX-10, eyeRX-50, eyeLX+10,eyeRX-50);
line(eyeRX-10, eyeRX-50, eyeRX+10,eyeRX-50);
break;
default:
noFill();
stroke(color(colorR, colorG, colorB));
arc(eyeLX-10, eyeRX-faceHeight/2, 40, 20, 0, HALF_PI);
arc(eyeRX+10, eyeRX-faceHeight/2, 40, 20, HALF_PI, PI);
}
if (hairType == 1) {
noStroke();
fill(colorR2, colorG2, colorB2);
arc(150, 150-faceHeight/4, faceWidth/1.1, faceHeight/1.9, PI, 0);
}
}
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.
colorRandomizer();
colorRandomizer2();
faceWidth = random(75, 150);
faceHeight = random(100, 200);
eyeSize = random(10, 30);
earWidth = random(5, 15);
earHeight = random(15, 30);
hairType = floor(random(1, 4));
mouthPosition = random(2, 5);
mouthWidth = random(10, 30);
mouthHeight = random(1, 5);
noseBridge = random(5,20);
eyeInside = random(5,10);
eyeBrow = floor(random(1,4));
}
function colorRandomizer() {
colorR = random(0, 250);
colorG = random(0, 250);
colorB = random(0, 250);
}
function colorRandomizer2() {
colorR2 = random(0, 250);
colorG2 = random(0, 250);
colorB2 = random(0, 250);
}
I tried changing the eyebrows and hairstyles in this project as I think eyebrows are the easiest way to express different emotions, and hairstyles can make the individual look drastically different. Other than that I changed the variable and position of the mouth, nose, eyes, and ears to represent differences.