![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
This face generator makes lots of cool folks to chill with! About half of the characteristics of each person — for instance, the shirt size and color, the background, and the skin tone — are completely random, while other components such as the eye color or headwear/hairstyle are randomly selected from a list of options. Writing this code really dusted off the ol’ middle school algebra. Some of said algebra is visible in the positively chicken-scratch notebook hieroglyphs I made while figuring out some of the first few variables. Once I had those established, though, I found I wasn’t writing anything down, instead just relying on the variables I’d already defined to write the next ones–quite the departure from how I worked through last week’s homework.
sketch
var width = 480;
var height = 640;
//background color
var backgroundR = 100;
var backgroundG = 0;
var backgroundB = 0;
//shirt color and size
var shirtR = 200;
var shirtG = 200;
var shirtB = 0;
var shirtWide = 400;
var shirtTall = 100;
//skintone
var skinR = 47;
var skinG = 39;
var skinB = 32;
//neck
var neckTall = 250;
var neckWide = 100;
var neckY = 200;
//head
var headWide = 250;
var headTall = 300;
var headX = width/2;
var headY = 200;
//ears
var earSize = 40;
//eyes
var eyeColor = 1;
var eyeSize = 30;
var eyeDistance = 30;
//nose
var noseLong = 20;
var noseWide = 10;
//mouth
var mouthSelector = 1;
//eyebrows
var eyebrowTall = 30;
var eyebrowWide = 30;
var eyebrowColorSelector = 1;
var eyebrowWeight = 10;
//hair
var hairstyle = 1;
function setup() {
createCanvas(480, 640);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
noStroke();
background(backgroundR, backgroundG, backgroundB);
// sleeve location variables -- have to be here (not global) so will update with new shirtWide values
var shirtCornerStar = ((width-shirtWide)/2)+((shirtWide/4)/2); //x coord of starboard sleeve
var shirtCornerPort = width-shirtCornerStar; //x coord of port sleeve
//shirt
fill(shirtR, shirtG, shirtB);
//rect(((width-shirtWide)/2), (height-shirtTall), shirtWide, shirtTall);
rect(shirtCornerStar, (height-shirtTall), (shirtWide-(shirtWide/4)), shirtTall);
//sleeves
fill(shirtR-20, shirtG-20, shirtB-20); //makes sleeves slightly darker than shirt
triangle(shirtCornerStar, (height-shirtTall), shirtCornerStar, height, (shirtCornerStar-((shirtWide/4)/2)), height); //starboard sleeve
triangle( shirtCornerPort, (height-shirtTall), shirtCornerPort, height, (shirtCornerPort+((shirtWide/4)/2)), height); //port sleeve
//neck
neckWide = shirtWide/3
neckY = height-neckTall-shirtTall+(shirtTall/6);
fill(skinR-20, skinG-20, skinB-20);
rect(width/2-neckWide/2, neckY, neckWide, neckTall);
ellipse(width/2, neckY+neckTall, neckWide, neckTall/4);
//head
headX = width/2
headY = neckY
fill(skinR, skinG, skinB);
ellipse(headX, headY, headWide, headTall);
//ears
fill(skinR-10, skinG-10, skinB-10);
ellipse(headX-(headWide/2), headY, earSize, earSize*1.5); //starboard ear
ellipse(width-(headX-(headWide/2)), headY, earSize, earSize*1.5); //port ear
//redraw head to cover ears, theres prob a better way to do this but ears rely on the head variables
fill(skinR, skinG, skinB);
ellipse(headX, headY, headWide, headTall);
//nose (length and width)
strokeWeight(noseWide);
stroke(skinR, skinG-20, skinB-20);
line(headX, headY, headX, headY+noseLong);
noStroke();
//eyes (color and distance from center of head)
if (eyeColor <= 1) {
fill(54, 43, 17); //brown
} else if (eyeColor <= 2) {
fill(52, 95, 45); //green
} else if (eyeColor <= 2.8) {
fill(13, 200, 200); //blue
} else {
fill(255, 20, 0); //red!
}
ellipse((width/2)-eyeDistance, headY, eyeSize);
ellipse((width/2)+eyeDistance, headY, eyeSize);
//mouth (arc of different size and stroke color)
if (mouthSelector <= 1) { //open smile
fill(61, 32, 31);
arc(headX, headY+noseLong*2, headWide/3, headTall/4, radians(0), radians(180));
} else if (mouthSelector <= 2) { //closed smile
noFill();
stroke(skinR+20, skinG-20, skinB-20);
strokeWeight(20);
arc(headX, headY+noseLong*2, headWide/3, headTall/5, radians(10), radians(170));
noStroke();
} else { //bubblegum
fill(40, 0, 0);
ellipse(headX+10, headY+(headTall/2)-(headTall/6), 30); //mouth
fill(238, 168, 234, 70); //pink transparent
ellipse(headX+10, headY+(headTall/2)-(headTall/6), 175, 175); //bubble1
ellipse(headX+10, headY+(headTall/2)-(headTall/6), 180, 180); //bubble 2
fill(255, 240, 240, 90);
ellipse(headX+40, headY+(headTall/2)-headTall/3, 30, 30); //highlight
}
//and finally, hair!
if (hairstyle <=1) { //bald
//do nothing
} else if (hairstyle <=2) { //beanie
strokeWeight(12);
strokeCap(ROUND);
if (hairstyle <= 1.3){
fill(168, 47, 47); //red hat
stroke(168-10, 47-10, 47-10);
} else if (hairstyle <=1.6) {
fill(200 , 120, 218); //pink hat
stroke(200-10, 120-10, 218-10);
} else {
fill(86, 93, 200); //perriwinkle hat
stroke(86-10, 93-10, 200-10);
}
arc(headX, headY-(headTall/2)+40, headWide+5, headTall-60, radians(180), radians(360));
rect(headX-(headWide/2)-10, headY-(headTall/2)+40, headWide+20, 60);
} else { //bowl cut
if (hairstyle <= 2.3){
fill(45, 40, 30); //dark brown
stroke(45, 40, 30);
} else if (hairstyle <=2.8) {
fill(130, 96, 57); //light brown
stroke(130, 96, 57);
} else if (hairstyle <=2.9 & skinR > 80 && skinG > 80 && skinB >30) {
fill(222, 129, 25); //red
stroke(222, 129, 25);
} else {
fill(25, 183, 222); //blue
stroke(25, 183, 222);
}
arc(headX, headY-headY/4, headWide+5, headTall-60, radians(180), radians(360));
}
//eyebrows
if (eyebrowColorSelector <=1) {
stroke(40, 35, 20); //dark brown
} else if (eyebrowColorSelector <=2) {
stroke(230, 230, 138); //blonde
} else {
stroke(140, 230, 200); //blue
}
noFill();
strokeWeight(eyebrowWeight);
arc((width/2)-eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
arc((width/2)+eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
noStroke();
}
function mousePressed() {
//background color change
backgroundR = random(0, 255);
backgroundG = random(0, 255);
backgroundB = random(0, 255);
//shirt color and size change
shirtR = random(0, 255);
shirtG = random(0, 255);
shirtB = random(0, 255);
shirtWide = random((width-(width/3)), (width-20));
shirtTall = random((height/6), (height/4));
//neck and skin changes
skinR = random(60, 200);
skinG = random(skinR, skinR-10);
skinB = random(skinR-20, skinR-30);
neckTall = random(200, 250);
//head
headWide = random(neckWide+100, neckWide+150);
headTall = random(headWide, headWide*1.4);
earSize = random(50, 60);
//eyes
eyeColor = random(0,3);
eyeSize = random(20, 40);
eyeDistance = random(30, headWide/2-30);
//nose
noseLong = random(headTall/10, headTall/6);
noseWide = random(25, 40);
//mouth
mouthSelector = random(0, 3);
//eyebrows
eyebrowColorSelector = random(0,2.1);
eyebrowWeight = random(10, 18);
eyebrowTall = random(20, 40);
//hair
hairstyle = random(0,3);
}
