var bgColor;
var blushColor;
var cheekBlush;
var blushSize;
var blushHeight;
var faceWidth;
var faceHeight;
var faceStyle;
var Bun;
var bunY;
var noseStyle;
var mouthStyle;
var eyeStyle;
function setup() {
createCanvas(600, 600);
//background(220);
//text("p5.js vers 0.9.0 test.", 10, 15);
bgColor = color(255, 235, 232);
blushColor = color(255, 138, 130);
cheekBlush = 0;
blushSize = 0;
blushHeight = 0;
Bun = 0;
bunY = 0;
noseStyle = 0;
faceStyle = 0;
mouthStyle = 0;
eyeStyle = 0;
}
function draw() {
background(bgColor);
// HAIR BUNS
fill(0);
ellipse((width/3), bunY, Bun, Bun);
ellipse((width/1.5), bunY, Bun, Bun);
// FACE
fill(255);
strokeWeight(5);
if (faceStyle >= 2) {
ellipse((width/2), (height/2), 300, 300); //circular face
}
else if (faceStyle >= 1) { //teardrop face
ellipse((width/2), (height/2.2), 360, 250);
bezier(475, 300, 400, 500, 220, 550, 125, 300);
}
else {
ellipse((width/2), (height/2), 350, 280); //oval face
}
// EYES
if (eyeStyle >= 2){ //oval eyes
push();
fill(255);
ellipse((width-375), (height-300), 50, 35); // left eye
ellipse((width-225), (height-300), 50, 35); // right eye
noStroke();
fill(0);
ellipse((width-375), (height-300), 30, 30); //left pupil
ellipse((width-225), (height-300), 30, 30); // right pupil
pop();
}
else if (eyeStyle >= 1) { //round owl eyes
stroke(5);
push();
fill(255);
ellipse((width-375), (height-300), 60, 60); //left eye
ellipse((width-225), (height-300), 60, 60); //right eye
noStroke();
fill(0);
ellipse((width-375), (height-300), 45, 45); //left pupil
ellipse((width-225), (height-300), 45, 45); //right pupil
pop();
}
else { //closed eyes
arc((width-375), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //left eye
arc((width-225), (height-300), 50, 35, HALF_PI + HALF_PI, TWO_PI); //right eye
}
// BLUSHING CHEEKS
if (cheekBlush >= 0.5){
push();
fill(blushColor);
noStroke();
ellipse((width-400), blushHeight, blushSize, blushSize); //left blush
ellipse((width-200), blushHeight, blushSize, blushSize); //right blush
pop();
}
//MOUTH
noFill();
strokeWeight(5);
if (mouthStyle >= 2){ //closed smile
arc((width-300), (height-280), 200, 140, QUARTER_PI, QUARTER_PI + HALF_PI);
}
else if (mouthStyle >= 1){ //open smile
push();
fill(0);
translate((width-300), (height-220));
rotate(TWO_PI);
arc(0, 0, 75, 50, 0, PI, CHORD);
pop();
}
else { //shocked mouth
fill(0);
ellipse((width/2), (height - 205), 50, 50);
}
//NOSE
if (noseStyle >= 2) {
noFill();
arc((width-300), (height-270), 45, 55, QUARTER_PI, QUARTER_PI + HALF_PI); //down-turned nose
} else if (noseStyle >= 1){ //nostrils
push();
noStroke();
fill(0);
ellipse((width-310), (height-250), 10, 10); //left nostril
ellipse((width-290), (height-250), 10, 10); //right nostril
pop();
}
else { //pink button nose
fill(blushColor);
ellipse((width/2), (height-260), 20, 20);
}
//BANGS
fill(0); //right bang
push();
translate((width-225), height-350);
rotate(-QUARTER_PI - HALF_PI);
arc(0, 0, 250, 200, 0, PI);
pop();
translate((width-375), (height-350)); //left bang
rotate(QUARTER_PI + HALF_PI);
fill(0);
arc(0, 0, 250, 200, 0, PI);
}
function mousePressed(){
cheekBlush = random(0, 1); //randomize blush
blushSize = random(30, 60); //randomize blush size
blushHeight = random(350, 360); //randomize blush's Y-axis
bunY = random(200, 400); //randomize hair buns' Y-axis
Bun = random(150, 250); //randomize hair buns' size
noseStyle = random(0,3); //randomize nose shape
faceStyle = random(0,3); //randomize face shape
mouthStyle = random(0,3); //randomize mouth shape
eyeStyle = random(0,3); //randomize eyes
}
For this project, I drew inspiration from the Moomin books, the logo for Utz Snacks, the mascots for PBS Kids, and the logo for a Korean supermarket franchise. The generative process became a lot easier once I started incorporating if-else statements!