Project-06: Abstract Clock

My Project

//cbtruong;
//Section B;

var secondVal;
var minuteVal;
var hourVal;
var monthVal;

var sixtyCircleX = [];
var sixtyCircleY = [];
var sixtyCircleX2 = [];
var sixtyCircleY2 = [];
var hourAngle = [];


function setup() {
    createCanvas(480, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    secondVal = second();
    minuteVal = minute();
    hourVal = hour();
    monthVal = month();
    for (var i = 0; i < 8; i++){
        hourAngle.push(i*45);
    }
    for (var y = 10; y < 120; y += 20){
        for (var x = 10; x < 200; x += 20){
            sixtyCircleX.push(x);
            sixtyCircleY.push(y);
        }
    }
    for (var y2 = 370; y2 < 480; y2 += 20){
        for (var x2 = 290; x2 < 480; x2 += 20){
            sixtyCircleX2.push(x2);
            sixtyCircleY2.push(y2);
        }
    }
}

function draw() {
    background(205, 202, 240);
    timeOfDay(hourVal);
    for (var i = 0; i < 8; i++){
        noStroke();
        fill(230, 100, 120);
        if (i > hourVal % 8){
            fill(27, 30, 35);
        }
        hourSquare(hourAngle[i]);
        hourAngle[i] += 0.1;
    }
    for (var j = 0; j < 60; j++){
        fill(100, 230, 120);
        if (j > secondVal){
            fill(240);
        }
        sixtyCircleTime(sixtyCircleX[j], sixtyCircleY[j]);
    }
    for (var l = 0; l < 60; l++){
        fill(120, 120, 230);
        if (l > minuteVal){
            fill(240);
        }
        sixtyCircleTime(sixtyCircleX2[l], sixtyCircleY2[l]);
    }
    for (var m = 180; m <= 480; m += 25){
        fill(240);
        if (m >= monthVal*22.5){
            fill(45, 67, 89);
        }
        push();
        translate(-60, 20);
        rotate(radians(330));
        monthTri(20, m);
        monthTri(260, m);
        pop();
    }
}

function hourSquare(hourAngle){
    push();
    translate(230, 230);
    square(80*cos(radians(hourAngle)), 80*sin(radians(hourAngle)), 20);
    pop();
}

function timeOfDay(hourValue){
    if (hourVal > 15){
       fill(227, 111, 30);
    }
    else if (hourVal < 15 & hourVal > 7){
       fill(252, 209, 77);
    }
    else {
       fill(27, 30, 35);
    }
    circle(240, 240, 100);
}

function sixtyCircleTime(x, y){
    circle(x, y, 20);
}

function monthTri (x, y){
    triangle(x, y, x + 20, y, x + 10, y + 20);
}

I had grander ideas for an Abstract Clock, but I decided to do one that was practical. This one tells the months (the triangles that fill up according to the month), seconds and minutes (the circles arrays – the upper are seconds and the lower are minutes). And finally, the time of day (which I split into 3, Morning (7-15), Afternoon (15-23), and Night (23-7)) and the hours passed of each time. It is very basic.