Category: Project-02-Variable-Face

jiheek1_project2(faceVariables)

//Jihee Kim
//15-104 MWF 9:30
//jiheek1@andrew.cmu.edu
//project2 face variables
//section D

var pupilRed = 226;
var pupilGreen = 172;
var pupilBlue = 75;

var ribbonRed = 255;
var ribbonGreen = 160;
var ribbonBlue = 228;

var lashHeight = 320;
var mouthWidth = 41;
var mouthHeight = 28;
var earLoc = 360;

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

function draw() {
    background(242, 187, 205);

//these variables will allow the mouse to control the pupils within the eyeball (white area)
var x = constrain(mouseX, 203.5, 216.5);
var y = constrain(mouseY, 263.5, 276.5);


    //ears
    noStroke();
    fill(239, 220, 228);
    ellipse(width/2-80, earLoc, 20, 20);
    ellipse(width/2+80, earLoc, 20, 20);

    //face
    noStroke();
    fill(239, 220, 228);
    ellipse(width/2, height/2+40, 160, 160);

    //legs
    fill(239, 220, 228);
    rect(width/2-15, height/2+200, 8, 8); //left leg
    rect(width/2+8, height/2+200, 8, 8); //right leg

    //eyes shape (white area)
    fill(255);
    noStroke();
    ellipse(210, 350, 35, 35); //left eye
    ellipse(270, 350, 35, 35); //right eye

    //pupils shape
    fill(pupilRed, pupilGreen, pupilBlue);
    noStroke();
    ellipse(x, 354, 22, 22); //left eye
    ellipse(y, 354, 22, 22); //right eye

    //mouth
    fill(0);
    noStroke();
    ellipse(240, 396, mouthWidth, mouthHeight);

    //clothes
    fill(255);
    quad(width/2-50, height/2+200, width/2-15, height/2+120, width/2+15, height/2+120, width/2+50, height/2+200); //under dress
    fill(ribbonRed, ribbonGreen, ribbonBlue);
    quad(width/2-15, height/2+120, width/2-50, height/2+200, width/2+15, height/2+120, width/2+50, height/2+200); //cape
    ellipse(width/2-22.5, height/2-40, 45, 45); //ribbon_left
    ellipse(width/2+22.5, height/2-40, 45, 45); //ribbon_right
    ellipse(width/2-11, height/2+208, 8, 8); //left shoe
    ellipse(width/2+12, height/2+208, 8, 8); //right shoe

    //lashes
    fill(0);
    stroke(0);
    strokeWeight(1);
    line(204, 332, 200, lashHeight+5); //left_first
    line(210, 332, 210, lashHeight); //left_second
    line(216, 332, 220, lashHeight+5); //left_third
    line(264, 332, 260, lashHeight+5); //right_first
    line(270, 332, 270, lashHeight); //right_second
    line(276, 332, 280, lashHeight+5); //right_third
}

function mousePressed() {
    pupilRed = random(200, 250);
    pupilGreen = random(160, 230);
    pupilBlue = random(60, 180);
    lashHeight = random(295, 320);
    ribbonRed = random (100, 255);
    ribbonGreen = random (0, 180);
    ribbonBlue = random (150, 240);
    mouthWidth = random (0, 41);
    mouthHeight = random (0, 41);
    earLoc = random (360, 370);
    }

To begin with, I sketched a faces that I wanted to code just to visualize some possible variations and used Adobe Illustrator to get the approximate dimensions. In this project, I varied the sizes and colors of facial elements and apparels. I also incorporated constrains to make the pupils more interactive.

Variable Face

/*  Emmanuel Nwandu
    enwandu@andrew.cmu.edu
    Section D
    Project-02-Variable-Face
*/
var faceWidth = 420;
var faceHeight = 420;
var eyeSize = 82;
var eyePatchH = 176;
var eyePatchW = 111;
var mouthStroke = 7;
var earWidth = 173;
var earHeight = 195;
var blushWidth = 45;
var blushHeight = 27;
var blushRed = 253;
var blushGreen = 216;
var blushBlue = 201;

function setup() {
    createCanvas(480, 640);
    background(256);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
    background(256);

    //ears
    fill(0);
    ellipse(97, 170, earWidth, earHeight);
    ellipse(388, 170, earWidth, earHeight);

    //inner ears
    fill(blushRed, blushGreen, blushBlue);
    ellipse(97, 170, earWidth - 78, earHeight - 91);
    ellipse(388, 170, earWidth - 78, earHeight - 91);

    //head
    noStroke();
    fill(256);
    ellipse(width/2, height/2, faceWidth, faceHeight);

    //eyepatches
    noStroke();
    fill(0);
    ellipse(130, 337, eyePatchW, eyePatchH);
    ellipse(353, 337, eyePatchW, eyePatchH);


    //eyes including pupil and highlights
    noStroke();
    fill(256)
    ellipse(136, 355, eyePatchW - 29, eyePatchW - 29);
    ellipse(359, 355, eyePatchW - 29, eyePatchW - 29);
    fill(0);
    ellipse(136, 355, 62, 62);
    ellipse(359, 355, 62, 62)

    fill(256)
    //Defines edge conditions
    //Allows the highlights to follow the mouse within the boundary
    var leftEdgeR = 120;
    var rightEdgeR = 147;
    var leftEdgeL = 343;
    var rightEdgeL = 370;

    var xcR = constrain(mouseX, leftEdgeR, rightEdgeR);
    var xcL = constrain(mouseX, leftEdgeL, rightEdgeL);

    ellipse(xcR, 337, 33, 33);
    ellipse(130, 356, 12, 12);
    ellipse(xcL, 337, 33, 33);
    ellipse(353, 356, 12, 12);

    //nose
    fill(0);
    ellipse(243, 413, 50, 20);
    ellipse(243, 419, 27, 20);

    //blush
    fill(blushRed, blushGreen, blushGreen);
    ellipse(132, 452, blushWidth, blushHeight);
    ellipse(356, 452, blushWidth, blushHeight);

    //mouth
    noFill();
    stroke(0);
    strokeWeight(mouthStroke);
    arc(243, 425, 75, 60, HALF_PI, PI);

}
//When the mouse is pressed variables are randomized
function mousePressed() {
    mouthStroke = random(1, 10);
    faceWidth = random(360, 420);
    faceHeight = random(360, 420);
    earWidth = random(100, 180);
    earHeight = random(120, 200);
    eyePatchW = random(65, 150);
    eyePatchH = random(150, 200);
    blushWidth = random(40, 85);
    blushHeight = random(20, 35);
    blushRed = random(150, 260);
    blushGreen = random(200, 220);
    blushBlue = random(175, 210);

}

Inspired by my love of pandas, I coded the image with the intent of playing with figure ground relationships, negative and positive space, and how it can inform the clarity of the image.

I started by coding the base image that is seen first, and through trial and error began coding the randomized variations.

odh-variables

//Owen D Haft
//Section D
//odh@andrew.cmu.edu
//Project 02
    
var headX = 200;
var headY = 300;
var earX = 60;
var earY = 100;
var eyeX = 50;
var eyeY = 50;
var eyeU = 25;
var eyeV = 25;
var musX = 100;
var musY = 80;

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

function draw() {

    background(64, 64, 154);
    noStroke(0);

//body
    fill(200, 0, 0)
    arc(320, 480, 150, 100, PI, PI);
    
//neck
    fill(247, 231, 197);
    rect(300 ,340 ,40 , 100);

//ears
    ellipse(200, 230, earX, earY);
    ellipse(440, 230, earX, earY);

//head
    ellipse(320, 260, headX, headY);

//eyes
    fill(255);
    ellipse(275, 220, eyeX, eyeX);
    ellipse(365, 220, eyeY, eyeY); 

//pupils
    fill(0, 0, 0);
    ellipse(275, 220, eyeU, eyeU);
    ellipse(365, 220, eyeV, eyeV);   

//mustache
    fill(120, 100, 60)
    arc(320, 310, musX, musY, PI, PI)

}

function mousePressed(){

    earX = random(50, 100);
    earY = random(80, 120);
    headX = random(200, 250);
    headY = random(300, 350);
    eyeX = random(40, 75);
    eyeY = random(40, 75);
    eyeU = random(6, 36);
    eyeV = random(6, 36);
    musX = random(80, 120);
    musY = random(75, 85);

}

I worked primarily with simpler geometries while experimenting with the variables. I played with using the same variables for both the “x” and “y” of certain shapes, like the eyes and pupils, allowing them to change independent of each other.