Project-06-Abstract Clock

My piece was started as a simple grid of circles representing the 60 minutes in an hour. I decided to add some complexity by making the background color and circle color inverted of one another. The number of rows represents the amount of each minute in a 10-minute interval in an hour. The number of columns represents the 10-minute intervals in the hour. I included a digital clock as a reference.

sketch-24.js

//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//Assignment-06-Abstract Clock

function setup() { 
    createCanvas(500, 500);
}

function draw() {
    var d = new Date();
    var mils = nf(d.getMilliseconds(),2,0);
    var h = d.getHours()%12;
    var m = nf(d.getMinutes(),2,0);
    var s = d.getSeconds();
    drawBackground(h);// creates the background
    drawCircles(mils,s,m,h);
    whatTimeIsIt(h,m,s,mils);
}

function drawCircles(mils,s,m,h){
    var cols = m%10;
    var rows = m/10;
    noStroke();

     if (hour() > 12) { //after noon
        skyr =map(h,5,12,0,179);
        skyg =map(h,0,12,38,198);
        skyb =map(h,0,4,153,255);
    } else { //after midnight
        skyr =map(h,5,12,179,160);
        skyg =map(h,0,12,198,120);
        skyb =map(h,0,4,255,153);
    }
    fill(skyr,skyg,skyb);
    
    if (cols ==0) {
        text("Time to take a Break!", width/2,height/2);
    }
    for (var col = 1; col <= cols; col++){
        for (var row = 1; row <= rows; row++){
            ellipse((width/6)*row,(height/10)*col,s,mils/100)
        }
    }
}

function drawBackground(h){
    var skyr;
    var skyg;
    var skyb;
    if (hour() < 12) { //after noon
        skyr =map(h,5,12,0,179);
        skyg =map(h,0,12,38,198);
        skyb =map(h,0,4,153,255);
    } else { //after midnight
        skyr =map(h,5,12,179,160);
        skyg =map(h,0,12,198,120);
        skyb =map(h,0,4,255,153);
    }
    background(skyr,skyg,skyb);
}

function whatTimeIsIt(h,m,s,mils){
    var APM = ""; //determine if it is AM or PM
    if (hour()>=12){
        APM = "PM";
    } else{
        APM = "AM";
    }
    if (h == 0) {
        h=12;
    }
    var time = (str(h)+ ":" +str(m)+ ":" +str(s)+ ":" +str(mils)+ " " +APM); 
    textSize(25);
    textAlign(CENTER);
    fill(0);
    text(time, width/2,height/15);
}