/* Alexandra Kaplan
aekaplan@andrew.cmu.edu
Section C
Project - 06
*/
var dropY = 100;
var dropX = 150
var xarray = [110];
var yarray = [105];
function setup() {
createCanvas(400, 300);
frameRate(30); //each second is 30 frames
}
function draw() {
background(230, 250, 255);
var H = hour(); // current hour
var M = minute(); // current minute
var S = second(); // current second
var milli = second(); //current millisecond
var HWaterHeight = map(M, 0, 59, 0, height); // chages the height of the water according to the minute
var waterColorb = map(H, 0, 23, 255, 120); // water changes from blue to grey over 24 hours
var dropW = map(S, 0, 59, 25, 5); // water drops gets smaller as gets closer to a minute
// draw water level
strokeWeight(0);
fill(150, 170, waterColorb); // water changes from blue to grey over 24 hours
rect(0, height - HWaterHeight, width, HWaterHeight);
//draw water drops
fill(170, 200, 225);
for(var i = 0; i < yarray.length; i++){ // draws water drop falling
ellipse(xarray[i], yarray[i], dropW, 20);
yarray[i] += 5;
}
if(frameCount % 30 === 0){ // every second a new drop is drawn
yarray.push(105);
xarray.push(random(110, 140)) // randomizes x position of water droplets
}
faucet(); // draws faucet
}
function faucet(x, y){
stroke(100);
fill(120);
rect(100, 80, 50, 35, 0, 0, 5, 5);
rect(0, 40, 150, 50, 0, 10, 0, 0);
stroke(160);
strokeWeight(1);
line(101, 113, 149, 109);
line(100, 108, 149, 104);
line(100, 103, 149, 99);
line(100, 98, 149, 94);
}
For this project, I took inspiration from a leaky faucet. It keeps track of time by dripping once per second, the water goes from the bottom to the top every hour, and the color of the water changes from blue to green-brown throughout a 24 hour time period. It was definitely a more difficult project than I originally anticipated, as I had to draw on and combine a lot of concepts we have learned throughout the class. The part that I had the most trouble with was getting a new drop to drip at every second.