```
/*
* 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