![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2018/wp-content/uploads/2020/08/stop-banner.png)
// face
var faceWidth = 225;
var faceHeight = 225;
var skin1 = 255;
var skin2 = 220;
var skin3 = 175;
// eyes
var eyeSize = 50;
var color1 = 0;
var color2 = 0;
var color3 = 0;
var pupilSize = 30;
//nose
var noseW = 30;
var noseH = 20;
// mouth (2)
// ver. semi-circle
var mouthW = 70;
var mouthH = 40;
// ver. circle
var mouth2d = 50;
// choice
var mouthChoice = 0;
// hat
var hat1 = 170;
var hat2 = 90;
var hat3 = 255;
var hatX1 = 275;
var hatY3 = 55;
function setup() {
createCanvas(640, 480);
}
function draw() {
background(0);
// skin
fill(skin1, skin2, skin3)
// face
noStroke();
ellipse(width / 2, height / 2, faceWidth, faceHeight);
// eyeballs
var eyeLX = width / 2 - faceWidth * 0.25;
var eyeRX = width / 2 + faceWidth * 0.25;
fill(255);
ellipse(eyeLX, height / 2, eyeSize, eyeSize);
fill(255);
ellipse(eyeRX, height / 2, eyeSize, eyeSize);
// pupils
fill(color1, color2, color3);
ellipse(eyeLX, height / 2, pupilSize, pupilSize);
ellipse(eyeRX, height / 2, pupilSize, pupilSize);
// mouth (2)
var mouthX = width / 2;
var mouthY = height / 2 + faceHeight * 0.25;
// ver. semi-circle
if (mouthChoice == 0) {
fill(250, 140, 140);
noStroke();
arc(mouthX, mouthY, mouthW, mouthH, TWO_PI, PI, CHORD);
}
// ver. circle
else if (mouthChoice == 1) {
fill(250, 140, 140);
ellipse(mouthX, mouthY, mouth2d, mouth2d);
}
//nose
var noseY = mouthY - mouthH / 2 - 20;
fill(color1, color2, color3);
ellipse(width / 2, noseY, noseW, noseH);
// hat
var hatX2 = width - hatX1;
var hatX3 = (hatX1 + hatX2) / 2;
var hatY = height / 2 - faceHeight / 2 + 15;
fill(hat1, hat2, hat3);
triangle(hatX1, hatY, hatX2, hatY, hatX3, hatY3);
}
function mousePressed() {
// face
faceWidth = random(150, 250);
faceHeight = random(150, 250);
skin1 = random(0, 255);
skin2 = random(0, 255);
skin3 = random(0, 255);
// eyes
eyeSize = random(25, 55);
pupilSize = random(15, eyeSize - 10);
color1 = random(0, 255);
color2 = random(0, 255);
color3 = random(0, 255);
// nose
noseW = random(30, 70);
noseH = random(30, 70);
// mouth (2)
// ver. semi-circle
mouthW = random(10, faceWidth - 80);
mouthH = random(10, faceHeight * 1/4);
// ver. circle
mouth2d = random(30, faceHeight * 1/3);
// choice
mouthChoice = Math.floor(random(0, 1) * 2);
// hat
hat1 = random(0, 255);
hat2 = random(0, 255);
hat3 = random(0, 255);
hatX1 = random(275, 300);
hatY3 = random(45, 75);
}It took me a while to figure out, but I found the way to randomize a range of colours using the 3 RGB values. I used this tactic in the skin, eyes, and hat to generate a ton of faces that all look very distinct. I added the party hat at the end because the face seemed too naked.
