Project 2: Variable Face

generative_faces

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!

Leave a Reply