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.

Leave a Reply