Project-06 Abstract Clock

The squares measure, from inside out: seconds, minutes, hours, days, years, decades, and centuries.

sketch
//Robert Rice
//rdrice
//Section C

var today = new Date();
var years = today.getFullYear()
var months = today.getMonth();
var days = today.getDate() + months*30.42;  //calculates days based on the average number of days in each month
var hours = today.getHours()    //aproximately correct for any given day in the year
var minutes = today.getMinutes() 
var seconds = today.getSeconds();
var v = [years%1000/100, years%100/10, years%10, days, hours, minutes, seconds] //the current values for centuries, decades, years, days, hours, minutes, & seconds
var t = [10, 10, 10, 365, 24, 60, 60]   //the total number of each unit in one cycle


var r = []  //radii for centuries, decades, years, days, hours, minutes, seconds squares (calculated below)
var s = [1.902*Math.pow(10, -10), 1.902*Math.pow(10, -9), 1.902*Math.pow(10, -8), 1.902*Math.pow(10, -7), 0.0000694, 0.00167, 0.1]   //speeds, degrees per frame
var a = [0, 0, 0, 0, 0, 0, 0]  //angles, 0 by default for testing
var w = []  //stroke weight

var iw = 5  //the stroke weight of the indicator squares


function setup() {
    createCanvas(600, 600);
    background(0);
    angleMode(DEGREES);
    rectMode(CENTER);
    frameRate(60);

    r[0] = (width/2)*sqrt(2);
    w[0] = 15

    print(v);

    for (i=1; i<=6; i++) {          //calculates the inset radii based on the first radius
        r[i] = (r[i-1]/2)*sqrt(2);
    }

    for (i=1; i<=6; i++) {          //calculates the stroke weights
        w[i] = (w[i-1])/2;
    }

    for (i=0; i<=6; i++) {          //sets all the starting angles based on current date & time
        a[i] = (v[i]/t[i])*360
    }
}

function draw() {
    background(50);
    noFill();
    
    translate(width/2, height/2);
    stroke(255);

    for (i=0; i<=6; i++) {
        push();
        rotate(a[i]);   //moves the rectangle
        a[i] = a[i] + s[i];
        strokeWeight(w[i]);
        rect(0, 0, r[i], r[i]); //creates the actual rectangle

        strokeWeight(iw);   //creates an indicator rectangle to help the viewer understand where in the rotation everything is
        rect(r[i]/2 - 5 - (w[i]/2), r[i]/2 - 5 - (w[i]/2), 5, 5);   //"start" is all indicators at bottom right corner
        pop();
    }



}

Leave a Reply