Category: Project-02-Variable-Face

sketch

//Jamie Park           jiminp@andrew.cmu.edu
//15-104        Section E         Project #2

var bodySize = 130;
var tail = 150;
var eyes = 25;
var pupil = 10;
var faceWidth = 110;
var faceHeight = 150;
var mouth = 70;
var cheeks = 20;
var noseLength = 250

function setup(){
    createCanvas(640,480);
}

function draw(){
    background(128, 124, 115);

    strokeWeight(40);
    stroke(217, 180, 98);
    noFill();
    beginShape();
    curveVertex(width / 2 + 50, 640); //tail
    curveVertex(width / 2 - 80, 460);
    curveVertex(width / 2 - 130, 300);
    curveVertex(tail, 200);
    endShape();

    noStroke();
    fill (242, 205, 121);
    ellipse (width / 2, height / 2 + 150, bodySize, 250); //body

    fill (255, 233, 184);
    ellipse (width / 2, height / 2, faceWidth, faceHeight); //face
    var eyeLeft = width / 2 - faceWidth * 0.35;
    var eyeRight = width / 2 + faceWidth * 0.35;

    fill(255, 200, 176);
    ellipse (eyeLeft - 3, height / 1.80, cheeks, cheeks); //cheeks
    ellipse (eyeRight + 3, height / 1.80, cheeks, cheeks);

    fill(250);
    ellipse (eyeLeft, height / 2, eyes, eyes); //eyes
    ellipse (eyeRight, height / 2, eyes, eyes);

    fill(74, 72, 65);
    ellipse (eyeLeft, height / 2, pupil, pupil); //pupil
    ellipse (eyeRight, height / 2, pupil, pupil);

    fill(242,111,63);
    arc(width / 2, height / 1.80, mouth, mouth, TWO_PI, PI); //mouth

    strokeWeight(2);
    stroke (170, 156, 112);
    line (width / 2, noseLength, width / 2, height /2 + 3); //nose

    fill("pink");
    noStroke();
    triangle(eyeLeft - 10, height / 2 - 100, eyeLeft - 10, //horn
      height / 2 - 27, eyeLeft + 10, height / 2 - 32);
    triangle(eyeRight + 10, height / 2 - 100, eyeRight - 10,
      height / 2 - 32, eyeRight + 10, height / 2 - 27);
}

function mousePressed(){
    bodySize = random (110, 200);
    faceWidth = random(90, 170);
    faceHeight = random(130, 165);
    eyes = random(15, 28);
    mouth = random(50, 80);
    tail = random (0, 160);
    pupil = random(10, 15);
    cheeks = random(10, 20);
    noseLength = random (245, 260);
}

At first, I was skeptical with my ability to code this project. But once I started, I had a lot of fun altering the features that would fit into my creature! I am still struggling with effectively using curve vertex, but hopefully it will naturally come as I code more things.

sketch

// JOSEPH ZHANG
// SECTION E
// HAOZHEZ@ANDREW.CMU.EDU
// PROJECT-02

// GLOBAL VARS
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthX = 18;
var mouthY = 32;
var mouthPosY = 192;
var bodyW = 150;
var browWeight = 5;
var browHeight = 5;

// CANVAS
function setup() {
    createCanvas(640, 480);
}
 

function draw() {
    background('#B4A4D0');
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;

    // BODY
    noStroke();
    fill('#EFB616');
    ellipse(width/2,height/2 + 170,bodyW,265)

    // FACE
    fill('#FFD100');
        noStroke();
        ellipse(width / 2, height / 2, faceWidth,  faceHeight);
        ellipse(width / 2, height / 2 + 40, faceWidth * 1.2,  faceHeight / 1.4);

    // EYES
    fill('black')
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);


    // INNER EYE
    noStroke();
    fill('white')
        ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2);
        ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2);

    // MOUTH
    stroke('#871200');
    strokeWeight(2);
    fill('#FF7D62');
    ellipse(width / 2,mouthPosY + 90, mouthX, mouthY);

    // BROWS
    strokeWeight(browWeight);
        // Left Brow
        line(eyeLX - 10, height / 2 - 20 + browHeight, eyeLX + 10 , height / 2 - 7);

        // Right Brow
        line(eyeRX - 7, height / 2 - 10, eyeRX + 10 , height / 2 - 20 + browHeight);
    
}
 
function mousePressed() {
    
    // FACE WIDTH + HEIGHT
    faceWidth = random(75,150);
    faceHeight = random(100,150);

    //EYE SIZE
    eyeSize = random(10,30);

    // MOUTH RATIOS
    mouthX = random(22,42);
    mouthY = random(22,42);

    // BODY WIDTH
    bodyW = random(50,180)
    
    //BROW WIDTH + HEIGHT
    browWeight = random(3,6);
    browHeight = random(-5,5);
}

Varying Faces

To built this project, I experimented a lot with the manipulation of shapes and how to combine them with others to create more interesting forms; the variables I chose to manipulate included, the eye size, eyebrow form, head shape, body width, and mouth. To begin the process, I mocked up what I wanted to make in Adobe Illustrator and from there, adapted to what actually could and couldn’t be done. Unfortunately, I don’t have the Illustrator file anymore so I can’t attach a screenshot. But I did use the surprised Pikachu meme as initial inspiration!

angela-generative-face

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Assignment-02
 */

// variables for eye size, face width, and face height
var eye_size = 40;
var face_width = 200;
var face_height = 300;
var mouth_width = 30;
var mouth_height = 30;
var color_change = 0;
var mouth_change = 0;


function setup(){
	createCanvas (480, 640);
}

function draw(){
	background (230, 255, 255);

    // body
    fill (253, 255, 158);
    ellipse (width / 2, height / 2 + face_height * 0.75, face_width, face_width);
    rect (width / 2 - face_width / 2, height / 2 + face_height * 0.75, face_width, 400)

    // face
    noStroke ()
    fill (255 - color_change, 217 - color_change, 177 - color_change);
    ellipse (width / 2, height / 2, face_width, face_height);

    // variables for eye position
    var left_eye = width / 2 - face_width * 0.25;
    var right_eye = width / 2 + face_width * 0.25;

    // eyes
    noStroke ()
    fill ("black")
    ellipse (left_eye, height / 2, eye_size, eye_size);
    ellipse (right_eye, height / 2, eye_size, eye_size);
    
    // highlights of the eyes
    fill ("white")
    ellipse (left_eye + eye_size / 5, height / 2 - eye_size / 5, 10, 10)
    ellipse (right_eye + eye_size / 5, height / 2 - eye_size / 5, 10, 10)
    
    // creating mouth
    noStroke ()
    fill (222 - mouth_change, 81 - mouth_change, 73 - mouth_change)
    ellipse (width / 2, height / 2 + 0.25 * face_height, mouth_width, mouth_height);



}

function mousePressed() {
    face_width = random (175, 300);
    face_height = random (175, 300);
    eye_size = random (30, 50);
    mouth_width = random (40, 80);
    mouth_height = random (30, 50);
    color_change = random (0,150);
    mouth_change = random (0, 50);
}

I started this project feeling slightly intimidated since I had no idea how you could create faces that changed. I went through a couple of iterations to get to this final product; being able to visually see mistakes really helped me adjust my shapes. This project helped me experience how powerful variables and built-in functions such as random can be. One thing I had fun playing with was randomizing color but also adhering to a skin tone palette—I hope to experiment more with randomization of color in the future.