For this project, I wanted to portray the vibrancy and health of a flower depending on the amount of water that is in a vase. The more water there is in the vase (controlled by your mouse’s Y value, the bigger and more colorful the flower appears to be!
sketchDownload
// Susie Kim
// Section A
function setup() {
createCanvas(450, 600);
background(255, 218, 185);
}
function draw() {
// define variables
var setVal = mouseY/6;
var waterOpacity = mouseY/13;
var leafVal = mouseY/15;
var flowerVal = mouseY/20;
if (setVal >= 150) {
setVal = 150;
}
background(255, 218, 185);
//table
fill(255, 178, 102);
rect(0, 525, 500, 100);
// vase water
fill(102, 178, 255, 150 - waterOpacity);
noStroke();
rect(150, 350 + setVal, 150, 175 - setVal, 20, 20);
// flower stem that changes color
stroke(0, 204- setVal, 0);
strokeWeight(6);
line(225, 200, 225, 520);
// vase itself
strokeWeight(4);
stroke(51);
noFill();
rect(150, 275, 150, 250, 20, 20);
// flower!
// flower petals
noStroke()
fill(255 - setVal, 153 - setVal, 204 - setVal);
ellipse(185, 170, 55, 55);
ellipse(265, 170, 55, 55);
ellipse(225, 140, 55, 55);
ellipse(205, 215, 55, 55);
ellipse(245, 215, 55, 55);
// flower center that expands
fill(255 - setVal, 255 - setVal, 0);
if(flowerVal >= 25) {
flowerVal = 25;
}
ellipse(225, 180, 65 - flowerVal, 65 - flowerVal);
// leaves that grow
fill(0, 204- setVal,0);
if (leafVal >= 25) {
leafVal = 25;
}
ellipse(250, 325, 70 - leafVal, 40 - leafVal);
ellipse(200, 325, 70 - leafVal, 40 - leafVal);
}