Abstract Clock

sketch

angle = 20;

var x= 0;
var y = 300;

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

function draw() {

    s = second();
    m = minute();
    h = hour();

    dx1 = 600/s; // used for line seconds
    dy1 = 600/s;
    dx2 = 200/s; 
    dy2 = -200/s;
    x1 = 100; // used for line seconds
    y1 = 40;
    x2 = 300; 
    y2 = 400; 

    angles = 30

    push();
    background(244, 241, 222);
    for (var i = 0; i < s; i += 1) { //second lines
        strokeWeight(2)
        stroke(129, 179, 154)
        line(i, y1, x2, y2);
        x1 += dx1;
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    pop();

    for (var i = 0; i< m; i+=1) { //minute circles
        noFill();
        stroke(223, 122, 94)
        strokeWeight(2);
        ellipse(300, 100, i*7, i*7) //increase circle size
    }

    for (var i = 0; i< h; i+=1) { //hour circles
        push();
        translate(240, 240)
        noFill();
        stroke( 60, 64, 91)
        strokeWeight(3);
        rotate(radians(50));
        ellipse(i*25-300, 40, 15, 15) //change circle position
        pop();
    }

    timer(x, y); //bottom right timer


    if (h < 7 || h>=19) {
        noStroke() // moon depending on hour
        fill(60, 64, 91)
        ellipse(430, 380, 80, 80);
        fill(244, 241, 222)
        ellipse(450, 370, 80, 80);
    } else {
        sun(); //sun depending on hour
     
     }
 }


function timer(x, y) { //for bottom right corner
    textSize(20);
    push();
    noStroke()
    fill(250)
    rect(380, 450, 100, 50);

    fill( 60, 64, 91)
    text(h, 390, 470)

    fill(0)
    text(":", 412, 470)

    fill(223, 122, 94)
    text(m, 420, 470)

    fill(0)
    text(":", 442, 470)

    fill(129, 179, 154)
    text(s, 450, 470)
    pop();

}

function sun() {
        translate(410, 380);
        noStroke();
        fill(222, 222, 74)
        ellipse(0,0, 50, 50);
        for (var i = 0; i< 50; i++) {
            rotate(radians(angle))
             rect(-5,-10, 5, 60);
        }
}