Project 3: Dynamic Drawing

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);
}

Leave a Reply