Liu Xiangqi-Project 06-Abstract Clock

I intended to imitate an hourglass. Use ellipses to represent sands(second), larger ellipse in the bottom to represent the minutes, and the angles of the tilting to represent hours. But I found it extremely difficult to correlate the number of sands with the seconds since there is no suitable arithmetic progression whose sum is 60. So I gave up. Then I realized some abstract shapes can have some fantastic effect as we did in string art. So I designed this clock. The strong contrast in color also makes some interesting effect when they overlap with each other.
sketch

var strokeR = 204;
var strokeG = 230;
var strokeB = 255;
function setup() {
    createCanvas(600, 600);
    frameRate(1);  
}

function draw() {
    background(0);
    strokeWeight(1);
    noFill();
    
    //rotate ellipse to represent seconds
    push();
    translate(width/2, height/2);
    for (var i = 0; i < second(); i ++) {
        strokeR = map(i, 0, 60, 255, 51);
        strokeG = map(i, 0, 60, 51, 204);
        strokeB = map(i, 0, 60, 0, 204);
        stroke(strokeR, strokeG, strokeB);
        rotate(radians(3));
        ellipse(0, 0, 30, 540);
    } 
    pop();
    
    //increase ellipse to represent minutes
    for (var j = 0; j < minute(); j ++){
        strokeR = map(j, 0, 60, 204, 255);
        strokeG = map(j, 0, 60, 153, 255);
        strokeB = map(j, 0, 60, 255, 255);
        stroke(strokeR, strokeG, strokeB);
        ellipse(300, 300, 9*j, 9*j);
    }
    
    //increase squares to represent hours
    for (var k = 0; k < hour(); k ++){
        strokeR = map(k, 0, 60, 255, 255);
        strokeG = map(k, 0, 60, 255, 255);
        strokeB = map(k, 0, 60, 102, 255);
        stroke(strokeR, strokeG, strokeB);
        quad(300, 30 +22.5*k, 30 + 22.5*k, 300, 300, 570-22.5*k, 570 - 22.5*k, 300);
        
    }

    
}