# Project 6: Abstract Clock

wpf-abstract-clock.js
``````//Patrick Fisher, Section B, wpf@andrew.cmu.edu Assignment-06-project
var cloudVar = []; //array for cloud x coordinate
var rainVar = []; //array for cloud y coordinate
var hourTime; //variable to store hour
var minuteTime; //vairable to store minute
function setup() {
createCanvas(600, 600);

}
function draw(){
background(155);
hourTime = hour();
minuteTime = minute();
for(var i = 0; i <= 23; i++){ //sets cloud x position by mapping the current second of the day to an x value on the canvas
cloudVar[i] =  map((second()+(60*minute())+(60*60*(hour()-i))),0,(24-i)*60*60,-105,width);
}

for(i = 0; i <= 59; i++){ //sets the rain y position my mapping the current second of the hour to a y value on the canvas
rainVar[i] = map((second()+60*(minute()-i)),0,(60-i)*60,-12,height+10)
}

for(var counter = 0; counter <= 23; counter ++) { //for loop that checks how many hours into the day it is and draws that many clouds with the stored x values and each hour that has passed
if(hourTime >= counter){
drawCloud(cloudVar[counter],counter);
}
}

for(var counter = 0; counter <= 59; counter ++) { //for loop that checks how many minutes into the hour it is and draws that many rain drops with the stored y values and each minute that has passed
if(minuteTime >= counter){
drawRain(rainVar[counter],counter);
}
}
}

function drawCloud(x,counter) { //function to draw clouds
var y; //long amount of if statements to set the y coordinate
if(counter == 0) {
y = 50
}
else if(counter == 1) {
y = 150
}
else if(counter == 2) {
y = 250
}
else if(counter == 3) {
y = 350
}
else if(counter == 4) {
y = 450
}
else if(counter == 5) {
y = 550
}
else if(counter == 6) {
y = 50
}
else if(counter == 7) {
y = 150
}
else if(counter == 8) {
y = 250
}
else if(counter == 9) {
y = 350
}
else if(counter == 10) {
y = 450
}
else if(counter == 11) {
y = 550
}
else if(counter == 12) {
y = 50
}
else if(counter == 13) {
y = 150
}
else if(counter == 14) {
y = 250
}
else if(counter == 15) {
y = 350
}
else if(counter == 16) {
y = 450
}
else if(counter == 17) {
y = 550
}
else if(counter == 18) {
y = 50
}
else if(counter == 19) {
y = 150
}
else if(counter == 20) {
y = 250
}
else if(counter == 21) {
y = 350
}
else if(counter == 22) {
y = 450
}
else if(counter == 23) {
y = 550
}

fill(255);  //series of ellipses that draws the cloud
ellipse(x,y,60,50);
ellipse(x+30,y-10,60,50);
ellipse(x+80,y,60,50);
ellipse(x+20,y+20,60,50);
ellipse(x+60,y+15,60,50);
push();
noStroke();
ellipse(x+40,y+10,100,55)
pop();
}
function drawRain(y,counter) { //function to draw rain
var x; //insanely long amount of if statements, like seriously there has to be an easier way to do this, to have the raindrops fall in a "random" pattern
if(counter == 0) {
x = 5;
}
if(counter == 39) {
x = 15;
}
if(counter == 20) {
x = 25;
}if(counter == 2) {
x = 35;
}
if(counter == 48) {
x = 45;
}if(counter == 38) {
x = 55;
}
if(counter == 59){
x = 65;
}
if(counter == 23) {
x = 75;
}
if(counter == 19) {
x = 85;
}
if(counter == 21) {
x = 95;
}
if(counter == 47) {
x = 105;
}
if(counter == 24) {
x = 115;
}
if(counter == 1) {
x = 125;
}
if(counter == 27) {
x = 135;
}
if(counter == 25) {
x = 145;
}
if(counter == 37) {
x = 155;
}
if(counter == 49) {
x = 165;
}
if(counter == 3) {
x = 175;
}
if(counter == 28) {
x = 185;
}
if(counter == 46) {
x = 195;
}
if(counter == 58) {
x = 205;
}
if(counter == 57) {
x = 215;
}
if(counter == 50) {
x = 225;
}
if(counter == 36) {
x = 235;
}
if(counter == 45) {
x = 245;
}
if(counter == 9) {
x = 255;
}
if(counter == 35) {
x = 265;
}
if(counter == 5) {
x = 275;
}
if(counter == 51) {
x = 285;
}
if(counter == 40) {
x = 295;
}
if(counter == 17) {
x = 305;
}
if(counter == 13) {
x = 315;
}
if(counter == 22) {
x = 325;
}
if(counter == 16) {
x = 335;
}
if(counter == 34) {
x = 345;
}
if(counter == 4) {
x = 355;
}
if(counter == 29) {
x = 365;
}
if(counter == 12) {
x = 375;
}
if(counter == 56) {
x = 385;
}
if(counter == 55) {
x = 395;
}
if(counter == 11) {
x = 405;
}
if(counter == 26) {
x = 415;
}
if(counter == 15) {
x = 425;
}
if(counter == 33) {
x = 435;
}
if(counter == 41) {
x = 445;
}
if(counter == 44) {
x = 455;
}
if(counter == 30) {
x = 465;
}
if(counter == 10) {
x = 475;
}
if(counter == 6) {
x = 485;
}
if(counter == 18) {
x = 495;
}
if(counter == 42) {
x = 505;
}
if(counter == 14) {
x = 515;
}
if(counter == 52) {
x = 525;
}
if(counter == 7) {
x = 535;
}
if(counter == 53) {
x = 545;
}
if(counter == 31) {
x = 555;
}
if(counter == 8) {
x = 565;
}
if(counter == 54) {
x = 575;
}
if(counter == 43) {
x = 585;
}
if(counter == 32) {
x = 595;
}

fill(0,0,255); //draws a small ellipse as a rain drop
ellipse(x,y,7,30)
}``````

This project was a lot of fun but very challenging. I came up with my idea fairly early on (I was brainstorming and listening to storm sounds). The amount of clouds is the amount of hours in the day, including a cloud for 0:00, and the amount of rain drops is how many minutes it has been in the day, including a drop for minute 0. The drops fall from the top and the clouds move left to right, with their positions being updated every second. I had to do a lot of algebra to have working formulas for the dynamic positions and ran into a lot of bugs when it came to keeping track of so many variables. My sketches became very incoherent very quickly. I also ended up writing an insane amount of for statements which was not good. If I could do this project again I would try to figure out a way to do what the if statements accomplished with some sort of loop.