Jenny Hu — Variable Expressions

Jenny’s Sketch

//Jenny Hu
//Section E
//jjh1@andrew.cmu.edu
//Project 02



var faceX;
var faceY;
var FOX; //face outline X and Y
var FOY;
var bunFillX;
var bunFillY = 30;
var bunOutlineX;
var bunOutlineY = 40;
var tiedBuns = 15;
var eyeX; //variable to tag the eye to the eye tops
var EBY1 = 0; //left eyebrow Y1 and Y2
var EBY2 = 0; 
var blushY= 5;
var blushRadi = 15;
var mouthNumber = 1;
var wordNumber = 0;

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

    faceX = width/2;
    faceY = height/2;
    FOX = width/2 - 15; //face outline X and Y
    FOY = height/2;
    bunFillX = width/2;
    bunFillY = 30;
    bunOutlineX = width/2;
    eyeX = FOX-270;
}

function draw() {
    background(255, 245, 240);
    angleMode(DEGREES);

    //head fill
    noStroke();
    fill(250,235,220);
    ellipse(faceX, faceY, 190, 190);


    //bun fill
    noStroke();
    fill(130);
    ellipse(bunFillX, bunFillY, 70, 70);
     //tiedBuns keep them close together
    var bunOutlineX = bunFillX + tiedBuns;
    var bunOutlineY = bunFillY + tiedBuns;


    //blush
    noStroke();
    fill(243,215,215);
    ellipse(FOX-80, (FOY+30)+blushY, blushRadi, blushRadi);
    ellipse(FOX+80, (FOY+30)+blushY, blushRadi, blushRadi);
   

    //bun outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(bunOutlineX, bunOutlineY, 70, 70);


    //mouth 
    var mouth = int(mouthNumber);
    if (mouth == 1) {
        //draw rectangle
        noStroke();
        fill(134,94,94);
        rect(FOX-20, FOY+40, 30, 10,100);

    } else if (mouth == 2){
        //draw circle
        strokeWeight(8);
        stroke(134,94,94);
        ellipse(FOX, FOY+40 ,20,20);

    } else {
        //draw smile
        strokeWeight(8);
        stroke(134,94,94);
        arc(FOX-20, FOY+30, 40, 40, 60,120);

    }


    //eyes
    noFill();
    strokeWeight(8);
    stroke(255, 153, 153);
    //LeftEye
    ellipse(FOX-eyeX, FOY-20, 23, 23);
    //RightEye
    ellipse((FOX-eyeX)+90, FOY-20, 23, 23);

    
    //top of eyes
    stroke(80);
    //Lefteye
    arc(FOX-45, FOY-5, 70, 70, 230, 320); //x, y, w, h, start, stop
    //Righteye
    arc(FOX+45, FOY-5, 70, 70, 230, 320);


    //eyebrows
    strokeWeight(15);
    stroke(183,151,151);
    //Left eyebrow
    line(FOX-50, (FOY-70) + EBY1, FOX-20, (FOY-70) + EBY2);
    //Right eyebrow
    line(FOX+50, (FOY-70) + EBY1, FOX+20, (FOY-70) + EBY2);


    //head outline
    strokeWeight(8);
    stroke(255, 153, 153);
    noFill();
    ellipse(FOX, FOY, 190, 190);



    //words 
    var word = int(wordNumber);
    if (word == 1) {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("hot buns.", 250, 390);


    } else if (word == 2){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("salad.", 250, 390);

    } else if (word == 3){
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("coffee.", 250, 390);

    } else {
        noStroke();
        textSize(32);
        fill(255, 153, 153);
        text("potatoes.", 250, 390);

    }


   
}

function mousePressed() {

    faceX = random(275, 350);
    faceY = random(250, 200);
    FOX = random(275, 350);
    FOY = random (225, 250);
    bunFillX = random (245, 375);
    bunFillY = random (100,100);
    bunOutlineX = random (245, 375);
    bunOutlineY = random (100,100);
    tiedBuns = random (-20,20);
    eyeX = random(25,60);
    EBY1 = random(-10,15);
    EBY2 = random(-10,15);
    blushY = random(-30,20);
    blushRadi = random(20,80);
    mouth = random(1,3);
    mouthNumber = random(1,4);
    word = random(0,4);
    wordNumber = random(0,4);
   


    
 
    
}

Huzzah! Uploaded correctly this time. (Thank you Connie!)

I had a fun time making this. I think compared to last week, it was nice to work with more complicated variables and connected pieces. While I wanted to maintain elements, the trick was to maintain the right distances of elements near one another (like hair color and outline, or eyes to eyebrows), while their elements shifted around with every click.

I think the most challenging part was adding the words. Originally, I wanted to create an array, like in the Dan Shiffman array tutorial, but I couldn’t figure out the bug. So instead, I did the same thing as the mouths— using an if-else logic.