afukuda_Project02_VariableFaces_SectionC

afukuda_project02_javaScript

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 02-VariableFaces
 */ 

var r01, g01, b01;      // vase color 

var eyeSize = 20;       // variables related to eyes 
var coordEyeX = 400;
var coordEyeY = 250;

var cheekSize = 20;     // variables related to cheeks 
var coordCheekX = 420;
var coordCheekY = 300;

var widthMouth = 20;    // variables related to mouth 
var heightMouth = 20; 
 
// coordinates for bezier curve 
var coordX1 = 490;      // x-coordinate of vertex 
var coordY1 = 100;      // y-coordinate of vertex 
var coordX2 = 500;      // x-coordinate of first control point of bezier curve 
var coordY2 = 240;      // y-coordinate of first control point of bezier curve 
var coordX3 = 450;      // x-coordinate of second control point of bezier curve 
var coordY3 = 300;      // y-coordinate of second control point 
var coordX4 = 400;      // x-coordinate of second anchor point 
var coordY4 = 380;      // y-coordinate of second anchor point 

function setup() {
    createCanvas(640, 480); // set canvas size 
    r01 = random(255);
    g01 = random(255);
    b01 = random(255);
} 

function draw () {
    background (209, 226, 244);

    noStroke();
    fill(r01, g01, b01, 150);
    beginShape();                                                                                       // create vase geometry 
        vertex (coordX1, coordY1);                                                                      // starting vertex of right curve of vase
        bezierVertex (coordX2, coordY2, coordX3, coordY3, coordX4, coordY4);                            // right curve of vase         
        vertex ((640-(coordX4)), coordY4);                                                              // starting vertex of left curve of vase                                    
        bezierVertex ((640-(coordX3)), coordY3, (640-(coordX2)), coordY2, (640-(coordX1)), coordY1);    // left curve of vase
        vertex (coordX1, coordY1);                                                                      // finishing vertex of vase
    endShape();

    fill(100);
    ellipse (coordEyeX, coordEyeY, eyeSize, eyeSize);                                                   // right eye 
    ellipse ((640-coordEyeX), coordEyeY, eyeSize, eyeSize);                                             // left eye 

    fill(249, 200, 203);
    ellipse (coordCheekX, coordCheekY, cheekSize, cheekSize);                                           // right cheek 
    ellipse ((640-coordCheekX), coordCheekY, cheekSize, cheekSize);                                     // left cheek 

    stroke(100);
    noFill();
    arc (320, 320, widthMouth, heightMouth, 0, PI);                                                    // mouth

    stroke(135, 109, 82);                                                                              // plant branch 
    strokeWeight (4);
    arc (400, coordY1, 150, 150, PI, 0.2*HALF_PI);

    noStroke();                                                                                       // plant leaves
    fill(197, 217, 166);
    arc (500, coordY1, 30, 15, 0, PI); 
    arc (500, coordY1, 30, 15, PI, 0); 

    arc (440, (coordY1-20), 30, 15, 0, PI); 
    arc (440, (coordY1-20), 30, 15, PI, 0); 

    arc (485, (coordY1-45), 30, 15, 0, PI); 
    arc (485, (coordY1-45), 30, 15, PI, 0); 

}

function mousePressed() {
    // when the user clicks, these variables are reassigned random values

    coordX1 = random(400, 490);           // all: varies curvature of vase 
    coordY1 = random(110, 150);           // except for: varies height of vase 
    coordX2 = random(490, 540);
    coordY2 = random(100, 240);
    coordX3 = random(400, 540);
    coordY3 = random(200, 370);
    coordX4 = random(380, 420);   

    r01 = random(255);                    // selects random color for vase 
    g01 = random(255);
    b01 = random(255);

    eyeSize = random(10, 25);             // varies size of eyes 
    coordEyeX = random(350, 420);         // varies location of eyes (x-axis)
    coordEyeY = random(200, 260);         // varies location of eyes (y-axis)

    cheekSize = random(10, 20);           // varies size of cheeks
    coordCheekX = random(380, 420);       // varies location of cheeks (x-axis)
    coordCheekY = random(280, 300);       // varies location of cheeks (y-axis)
  
    widthMouth = random (10, 30);               // varies width of mouth 
    heightMouth = random (10, 30);              // varies height of mouth 

}


    
 

For this project I decided to base the variable faces on potted plants. There are several variables – the height of the vase, the curvature of the vase, the color of the vase, the size & distance of the eyes, the size & distance of the cheeks, and lastly the size of the mouth. The biggest thing I noticed while I was coding this graphic was that I could achieve the same visuals by using only half of the variables. Since the pot is symmetrical, I could simply use the negative x-coordinates of the right side of the pot for the left side of the vase, making my code much simpler and cleaner