Month: September 2019

tcliu-OpenEnded-02

// Timothy Liu
// 15104 Section C
// Open Ended-02

// facial features (variables)
var eyeWidth = 25;
var eyeHeight = 15;
var pupilWidth = eyeWidth / 2;
var pupilHeight = 11 * eyeHeight / 16;
var noseWidth = 15;
var noseHeight = 40;
var earSize = 30;
var headWidth = 125;
var headHeight = 150;
var mouthWidth = 60;
var mouthHeight = 40;
var mouthStart;
var mouthEnd;
var skin1 = "#FFD3A1";
var eyeL;
var eyeR;

// body shape and size (variables)
var bodyWidth = 200;
var bodyHeight = 370;
var colorR = 105;
var colorG = 64;
var colorB = 122;

// hat dimensions and color (variables)
var hatR = 14;
var hatG = 28;
var hatB = 117;
var hatBottom;

// function time!
function setup() {
    
    createCanvas(600, 480);
    mouthStart = TWO_PI;
    mouthEnd = PI;
    eyeL = width / 2 - headWidth / 5;
    eyeR = width / 2 + headWidth / 5;
    hatBottom = height / 4 - headHeight / 6;
    // initializing P5.js functions in setup()

}
 
function draw() {

    // background color
    background(240, 196, 101);
    noStroke();

    // ears
    fill(skin1);
    ellipse(width / 2 - headWidth / 2, height / 4, headWidth / 8, headHeight / 6);
    ellipse(width / 2 + headWidth / 2, height / 4, headWidth / 8, headHeight / 6);

    // neck
    fill(skin1);
    rect(width / 2 - headWidth / 4, height / 4 + headHeight / 4, headWidth / 2, headHeight);

    // head and face
    fill(skin1);
    ellipse(width / 2, height / 4, headWidth, headHeight);

    // bucket hat
    fill(hatR, hatG, hatB);
    quad(width / 2 - headWidth / 2, hatBottom, width / 2 - headWidth / 3, height / 4 - headHeight / 2, 
    	width / 2 + headWidth / 3, height / 4 - headHeight / 2, width / 2 + headWidth / 2, hatBottom);
    rect(width / 2 - 2 * headWidth / 3, hatBottom, headWidth * 1.35, headWidth / 32);

    // eyeballs
    fill("white");
    ellipse(eyeL, height / 4 - height / 48, eyeWidth, eyeHeight);
    fill("white");
    ellipse(eyeR, height / 4 - height / 48, eyeWidth, eyeHeight);

    // pupils
    fill(59, 35, 18);
    ellipse(eyeL, height / 4 - height / 48, pupilWidth, pupilHeight);
    fill(59, 35, 18);
    ellipse(eyeR, height / 4 - height / 48, pupilWidth, pupilHeight);

    // nose
    fill("#D39972");
    arc(width / 2, height / 4 + headHeight / 8, noseWidth, noseHeight, PI, TWO_PI);

    // mouth
    fill(255, 150, 150);
    arc(width / 2, height / 3, mouthWidth, mouthHeight, mouthStart, mouthEnd, CHORD);

    // body and shirt
    fill(colorR, colorG, colorB);
    arc(width / 2, 5 * height / 6, bodyWidth, bodyHeight, PI, TWO_PI);

    // pants
    fill("#003366");
    rect(width / 2 - bodyWidth / 2, 5 * height / 6, bodyWidth, height / 6);

    // thigh gap
    fill(240, 196, 101);
    rect(width / 2 - bodyWidth / 8, 15 * height / 16, bodyWidth / 4, bodyWidth / 4)
}

function mousePressed() {

    // brackets to denote an array. The coinFlip variable helps determine whether it's a smile or frown.
    var coinFlip = random([0, 1]);

    // randomly generating head proportions including eyes, face size, pupil, nose, and mouth.
    headWidth = random(100, 200);
    headHeight = random(121, 180);
    eyeWidth = random(15, 40);
    eyeHeight = random(10, 20);
    eyeL = width / 2 - headWidth / 5;
    eyeR = width / 2 + headWidth / 5;
    pupilSize = 9 * eyeWidth / 16;
    noseWidth = random(10, 30);
    noseHeight = random(20, 50);
    mouthWidth = random(20, 60);
    mouthHeight = random(20, 60);

    // randomly generating body size and color.
    bodyWidth = random(170, 350);
    colorR = random(0, 255);
    colorG = random(0, 255);
    colorB = random(0, 255);

    // randomly generating hat color.
    hatR = random(0, 255);
    hatB = random(0, 255);
    hatG = random(0, 255);

    // this is an array of different hex values for skin tones.
    // the program randomly selects a skin tone every time the mouse is pressed.
    skin1 = random(["#FFD3A1", "#F5CB9A", "#C39582", "#FFCEB4", "#A57E6E", "#EABD9D", "#FFCEB4", "#DEAB7F", "#FFDCB1"]);
    
    // this if statement helps determine whether the character is smiling or frowning using the coinFlip variable defined above. 
    if (coinFlip == 0) {
        mouthStart = 6.28;
        mouthEnd = 3.14;
        // Smiley mouth
    } else {
    	mouthStart = 3.14;
    	mouthEnd = 6.28;
    	// Frowny mouth
    }

    // condition to ensure that the Smiley mouth never sticks out past the chin
    // note: this was originally an if-and statement, but the ampersand was causing issues with WordPress embedding.
    if (mouthStart == 6.28) {
        if ((height / 3 + mouthHeight) > (height / 4 + headHeight / 2)) {
            mouthHeight = mouthHeight / 2;
        }
    }

    // condition to ensure Frowny mouth never touches the nose
    if (mouthStart == 3.14) {
        if ((height / 3 - mouthHeight) < (height / 4 + headHeight / 8 + noseHeight)) {
            mouthHeight = mouthHeight / 2;
        }
    }

}

This project was a fun challenge for me because it required a heavy amount of step-by-step variable referencing, but it also encouraged me to think very logically. Every time I set up coordinates, I actively made sure to question if I could use a variable to simplify my code, and this made it significantly easier to randomize the face (as well as other features) later because all of my variables were already consolidated.

I enjoyed getting to play with an abstract art style, and I made my characters reflect that; they each have simplified features, but my program incorporates a wide array of body types and shapes. I’ve come away from this project with a much stronger understanding of how to utilize local and global variables, as well as how to use if-else statements to set up different conditions to ensure my faces didn’t distort in odd ways.

sketch

// Fanjie Mike Jin
//Section
//fjin@andrew.cmu.edu
//Project-02 (Variable Faces)

var eyeSize = 25;
var skin = 76;
var faceWidth = 230;
var faceHeight = 200;
var colorPink = 230;
var eyeW = 20;
var eyeH = 50;
var eyeballX = 360;
var eyeballX2 = 183;
var mouseW = 70;
var mouseH = 80;

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

function draw(){
    background(57,skin, 117);

//footleft
    noStroke();
    fill(163, 65, 67);
    ellipse(350 - 0.5 * faceWidth, 430 - 0.5 * faceHeight, 60, 60 );

//footright
    noStroke();
    fill(163, 65, 67)
    ellipse(290 + 0.5 * faceWidth, 430 - 0.5 * faceHeight, 60, 60 );

//body
    noStroke();
    fill(255, colorPink, 219);
    ellipse(320, 240,faceWidth, faceHeight);

//handleft
    noStroke();
    fill(255, colorPink, 219);
    ellipse(315 - 0.5 * faceWidth, 310 - 0.5 * faceHeight, 70, 50);

//handright
    noStroke();
    fill(255, colorPink, 219);
    ellipse(315 + 0.5 * faceWidth, 295 - 0.5 * faceHeight, 70, 50);

//cheekLeft
    noStroke();
    fill (255, 191, 205);
    ellipse(256, 245, 46, 20);

//cheekRight
    noStroke();
    fill (255, 191, 205);
    ellipse(386, 245, 46, 20);

//eyesleft
    noStroke();
    fill (0);
    ellipse(288, 194, eyeW, eyeH);

//eyesright
    noStroke();
    fill (0);
    ellipse(360, 194, eyeW, eyeH);

//eyeballleft
    noStroke();
    fill (255);
    ellipse(eyeballX, 183, 9, 20);

//eyeballright
    noStroke();
    fill (255);
    ellipse(eyeballX - 72, 183, 9, 20);

//mouse
    noStroke();
    fill (255, 120, 192);
    ellipse(320, 279, mouseW, mouseH);
}

function mousePressed(){
    colorPink = random(204, 150);
    faceWidth = random(230, 260);
    faceHeight = random(200, 230);
    eyeW = random(20, 30);
    eyeballX = random(355, 365);
    mouseW = random(70, 80);
    mouseH = random(80, 90);
    skin = random(50, 80);
    }

I decided to make a variable face of Kirby which is my favorite hero in super smash bros. The variable components for this project are the size of Kirby’s face, eyeball positions, eye sizes and the color of Kirby as well as the background.