Project-06-Abstract-Clock

clockcyl

function setup() {
    createCanvas(480, 480, WEBGL);
    angleMode(DEGREES);
} 

function draw() {
    background(204,207,235);
    directionalLight(250, 250, 250, 0, 0, -45);
    rotateX(135);
    noStroke();
    //midplane circles
        push();
            rotateX(90);
            ellipse(0,30,100);
            ellipse(160,-40,100);
            ellipse(80,0,100);
            ellipse(-160,-40,100);
            ellipse(-80,0,100);
            stroke(255);
            strokeWeight(1);
            noFill();
            for(let i=0; i<2000;i+=20){
                ellipse(0,30,120+i);
                ellipse(160,-40,120+i);
                ellipse(80,0,120+i);
                ellipse(-160,-40,120+i);
                ellipse(-80,0,120+i);
            }
            noStroke();
        pop();
    //millisecond cylinder
        push();
            translate(160,0,-40);
            fill(255,20);
            cylinder(40, 240);
            fill(40, 106, 167);
            cylinder(40, (millis()%1000)*0.24);
            cylinder(36, ((millis()+75)%1000)*0.24);
            cylinder(32, ((millis()+150)%1000)*0.24);
            cylinder(28, ((millis()+225)%1000)*0.24);
            cylinder(24, ((millis()+300)%1000)*0.24);
        pop();
    //second cylinder
        push();
            translate(80,0);
            fill(255,20);
            cylinder(40, 240);
            fill(40, 159, 167);
            cylinder(40, (second()%60)*4);
            cylinder(36, ((second()+4.5)%60)*4);
            cylinder(32, ((second()+9)%60)*4);
            cylinder(28, ((second()+13.5)%60)*4);
        pop();
    //minute cylinder
        push();
            translate(0,0,30);
            fill(255,20);
            cylinder(40, 240);
            fill(121,94,199);
            cylinder(40, (minute()%60)*4);
            cylinder(36, ((minute()+4.5)%60)*4);
            cylinder(32, ((minute()+9)%60)*4);
        pop();    
    //hour cylinder
        push();
            translate(-80,0);
            fill(255,20);
            cylinder(40, 240);
            fill(94,199,173);
            cylinder(40, (hour()%24)*10);
            cylinder(36, ((hour()+1.8)%24)*10);
        pop();
    //day cylinder
        push();
            translate(-160,0,-40);
            fill(255,20);
            cylinder(40, 240);
            fill(190,94,199);
            cylinder(40, (day()/31)*240);
        pop();
}

I used abstract filling 3D cylinders to represent the passing of time at different scales. From left to right the scales are- Days/Month, Hours/Day, Minutes/Hour, Seconds/Minute, Milliseconds/Second.

I drew out the overall structure and my initial spacing plan for the 3D geometry.