# Abstract Clock

``````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);
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++) {