var faceWidth = 225;
var faceHeight = 225;
var faceType = 1;
var earSize = 50;
var earType = 1;
var earStroke = 10;
var faceR = 225;
var faceG = 184;
var faceB = 153;
var eyeSize = 30;
var eyeR = 255;
var eyeG = 255;
var eyeB = 255;
var eyeStroke = 1;
var mouthSize = 40;
var mouthType = 1;
var types = [1,2,3]; // faces, ears, and mouths have 3 different versions which will get randomly chosen
function setup() {
createCanvas(480, 640);
rectMode(CENTER);
}
function draw() {
background(255-faceR, 255-faceG, 255-faceB); //background color is inverse color of face
fill(faceR, faceG, faceB);
//Ear types
strokeWeight(earStroke);
stroke(faceR - 10, faceG - 10, faceB - 30);
if(earType == 2){
ellipse(width/2 - faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
ellipse(width/2 + faceWidth/2, height/2 - faceHeight/4, earSize/3 * 2, earSize);
}
if(earType == 3){
triangle(width/2 - faceWidth/4, height/2 - faceHeight/5,
width/2, height/2 - faceHeight/3,
width/2 - faceWidth/2, height/2 - faceHeight/2 - earSize/2);
triangle(width/2 + faceWidth/4, height/2 - faceHeight/5,
width/2, height/2 - faceHeight/3,
width/2 + faceWidth/2, height/2 - faceHeight/2 - earSize/2);
}
//Face types
strokeWeight(5);
if(faceType == 1){
ellipse(width/2, height/2, faceWidth, faceHeight);
}
if(faceType == 2){
rect(width/2, height/2, faceWidth, faceHeight);
}
if(faceType == 3){
triangle(width/2 - faceWidth/2, height/2 - faceHeight/2,
width/2 + faceWidth/2, height/2 - faceHeight/2,
width/2, height/2 + faceHeight/2);
}
//Eye Sockets
strokeWeight(0);
fill(faceR - 30, faceG - 30, faceB - 50);
ellipse(width/2 - faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
ellipse(width/2 + faceWidth/6, height/2 - faceHeight/6, eyeSize + 2*eyeStroke, eyeSize + 2*eyeStroke);
//Eyes will follow mouse (kinda)
strokeWeight(eyeStroke);
stroke(eyeR/5, eyeG/5, eyeB/3);
fill(eyeR, eyeG, eyeB);
var eyeXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/15, width/2 - faceWidth/6 + eyeSize/15);
var eyeY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/15, height/2 - faceHeight/6 + eyeSize/15);
var eyeXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/15, width/2 + faceWidth/6 + eyeSize/15);
ellipse(eyeXL, eyeY, eyeSize, eyeSize);
ellipse(eyeXR, eyeY, eyeSize, eyeSize);
//Pupils will follow mouse (kinda)
fill(0);
strokeWeight(0);
var pupilXL = constrain(mouseX, width/2 - faceWidth/6 - eyeSize/4, width/2 - faceWidth/6 + eyeSize/4);
var pupilY = constrain(mouseY, height/2 - faceHeight/6 - eyeSize/4, height/2 - faceHeight/6 + eyeSize/4);
var pupilXR = constrain(mouseX, width/2 + faceWidth/6 - eyeSize/4, width/2 + faceWidth/6 + eyeSize/4);
ellipse(pupilXL, pupilY, eyeSize/2, eyeSize/2);
ellipse(pupilXR, pupilY, eyeSize/2, eyeSize/2);
//Mouth
fill(eyeR/3, eyeG/5, eyeB/5);
if(mouthType == 1){
strokeWeight(mouthSize/10);
line(width/2 - mouthSize/2, height/2 + faceHeight/6, width/2 + mouthSize/2, height/2 + faceHeight/6);
}
if(mouthType == 2){
strokeWeight(mouthSize/5);
point(width/2, height/2 + faceHeight/6);
}
}
function mousePressed() {
faceWidth = random(150, 300);
faceHeight = random(150, 300);
faceType = random(types);
earSize = random(75, 125);
earType = random(types);
earStroke = random(5, 20);
//Skin colors are setup so as to mostly resemble realistic skin tones
faceR = random(70,255);
faceG = random(faceR/4, faceR);
faceB = random(faceR/4, faceG);
eyeSize = random(20, 35);
eyeR = random(0, 255);
eyeB = random(0, 255);
eyeG = random(0, 255);
eyeStroke = random(1, 4);
mouthSize = random(30, 60);
mouthType = random(types);
}
I really wanted to focus on creating different types of features rather than just adjusting the same feature by changing variables, and so I found out about using arrays from which the program makes a selection to decide which version of a feature to use, if any. I wanted to make it even more interactive, so I tried to make the eyes follow the mouse (it kinda worked, but I know there’s a different way to do it that I’ll probably try later).