Justin Yook – Project 06 – Abstract Clock

abstractClock

//Justin Yook
//jyook@andrew.cmu.edu
//Section C
//Project 06

var prevSec;
var millisRolloverTime;

var sizeS = []; // stores sizes for each seconds raindrop drawn
var xS = []; // stores x coordinates for seconds raindrop
var yS = []; // stores y coordinates for seconds raindrop

var sizeM = 0; // starting size of minute raindrop
var sizeH = 0; // starting sizse of hour raindrop

function setup() {
    createCanvas(300, 300);
    background(164, 194, 205);
}

function draw() {
    var S = second(); // keeps track of each second 
    var M = 0; // keeps track of each minute
    var H = 0; // keeps track of each hour

    // make sure that the second matches up properly with milliseconds passed
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    // i represents current seconds raindrop
    for (var i = 0; i < S; i++) {
        var rxS = random(0, 300); // random x location of seconds raindrop
        var ryS = random(0, 300); // random y location of seconds raindrop
        xS.push(rxS); // append random x location of seconds raindrop to xS array
        yS.push(ryS); // append random y location of seconds raindrop to yS array

        var osizeS = 0; // all raindrops have size of 0 before expanding
        sizeS.push(osizeS); // append size of seconds raindrop to sizeS array


        fill(75, 105, 125, 200);
        noStroke();
        ellipse(xS[i], yS[i], sizeS[i], sizeS[i]);
        sizeS[i] += 1;
        
        // limit size of second raindrop size
        if (sizeS[i] > 40) {
            sizeS[i] = 40;
            fill(164, 194, 205);
            rect(0, 0, width, height);
        }

        // if second() reaches 59 seconds
        if (S % 59 == 0) {
            sizeS = [];
            xS = [];
            yS = [];
            M += 1; 

            // draw minute raindrop
            fill(75, 105, 125, 200);
            ellipse(width/2, height/2, sizeM, sizeM);
            sizeM += 1;

            // limit size of minute raindrop
            if (sizeM > 80) {
                sizeM = 80;
            }

            // if M reaches 59 minutes
            if (M % 59 == 0) {

                // draw hour raindrop
                fill(75, 105, 125, 200);
                ellipse(width/2, height/2, sizeH, sizeH);
                sizeH += 1;

                // limit size of hour raindrop
                if (sizeH > 120) {
                    sizeH = 120;
                }
            }
        }
    }
}

For this project, I tried to imitate raindrops falling into a pond. Every second, a small raindrop falls. And once it is one minute, a bigger raindrop appears. The hour raindrop follows the same idea. This project was the most difficult by far in my opinion, because I had to fully understand arrays to utilize it properly.