I chose to make a clock that signifies time visually with the symbols of the 12 constellations. I entertained the idea of a similar 12 hour system, but rather than using numbers, it aligned with what people see in the sky over the course of a year. I also switched what moved (the counters rotate over time vs a traditional clock where the hands do) just for fun.
astral clock
// isis berymon section D
function setup() {
createCanvas(480, 480);
background(55, 56, 87); //dark blue
}
function draw() {
var h = hour();
var m = minute();
var s = second();
push();
translate(240, 240);
if(h > 11){ //12 hour clock
h = h-12;
}
rotate(radians((m+1)/-2+(-30*h))); //moves ccw every minute
background(55, 56, 87); //dark blue
clock();
pop();
if(s%2==0) { //pointer blinks every second
noStroke();
fill(240, 222, 91); // pale gold
triangle(240, 30, 250, 0, 230, 0);
}
}
function clock(){
var angle = 0;
stroke(240, 222, 91) //pale gold
noFill();
circle(0, 0, 480);
for(var i = 0; i < 12; i++) { //12 spokes
push();
angle +=30;
rotate(radians(angle));
line(0, 0, 240, 0);
pop();
}
//aries symbol
push();
rotate(radians(-315)); //center in between spokes
beginShape();
vertex(-10, -200);
vertex(-20, -210);
vertex(-10, -210);
vertex(0, -200);
vertex(0, -180);
vertex(0, -200);
vertex(10, -210);
vertex(20, -210);
vertex(10, -200);
endShape();
pop();
//taurus
push();
rotate(radians(-285));
circle(0, -190, 20);
beginShape();
vertex(-15, -210);
vertex(-10, -210);
vertex(0, -200);
vertex(10, -210);
vertex(15, -210);
endShape();
pop();
//gemini
push();
rotate(radians(-255));
beginShape(LINES);
vertex(-10, -210);
vertex(10, -210);
vertex(-10, -190);
vertex(10, -190);
vertex(-4, -210);
vertex(-4, -190);
vertex(4, -210);
vertex(4, -190);
endShape();
pop();
//cancer
push();
rotate(radians(-225));
circle(-10, -195, 10);
circle( 10, -185, 10);
line(-10, -200, 10, -200);
line(10, -180, -10, -180);
pop();
//leo
push();
rotate(radians(-195));
circle(-10, -190, 10);
beginShape();
vertex(-5, -190);
vertex(-8, -210);
vertex(5, -210);
vertex(0, -185);
vertex(10, -195);
endShape();
pop();
//virgo
push();
rotate(radians(-165));
beginShape();
vertex(-20, -210);
vertex(-15, -205);
vertex(-15, -190);
vertex(-15, -205);
vertex(-10, -210);
vertex(-5, -205);
vertex(-5, -190);
vertex(-5, -205);
vertex(0, -210);
vertex(5, -205);
vertex(5, -190);
endShape();
beginShape();
vertex(5, -200);
vertex(10,-195);
vertex(0, -185);
endShape();
pop();
//libra
push();
rotate(radians(-135));
line(-10, -190, 10, -190);
beginShape();
vertex(-10, -195);
vertex(-2, -195);
vertex(-8, -205);
vertex(0, -210);
vertex(8, -205);
vertex(2, -195);
vertex(10, -195);
endShape();
pop();
//scorpio
push();
rotate(radians(-105));
beginShape();
vertex(-20, -210);
vertex(-15, -205);
vertex(-15, -190);
vertex(-15, -205);
vertex(-10, -210);
vertex(-5, -205);
vertex(-5, -190);
vertex(-5, -205);
vertex(0, -210);
vertex(5, -205);
vertex(5, -190);
vertex(10, -190);
endShape();
pop();
//sagittarius <3
push();
rotate(radians(-75));
line(-10, -190, 10, -210);
line(-5, -205, 5, -195);
line(0, -208, 10, -210);
line(10, -210, 10, -200);
pop();
//capricorn
push();
rotate(radians(-45));
beginShape();
vertex(-15, -210);
vertex(-10, -205);
vertex(-10, -190);
vertex(-10, -205);
vertex(0, -210);
vertex(5, -205);
vertex(5, -190);
vertex(10, -190);
vertex(7, -195);
vertex(0, -190);
endShape();
pop();
//aquarius
push();
rotate(radians(-15));
beginShape();
vertex(-10, -200);
vertex(-5, -210);
vertex(0, -200);
vertex(5, -210);
vertex(10, -200);
endShape();
beginShape();
vertex(-10, -190);
vertex(-5, -200);
vertex(0, -190);
vertex(5, -200);
vertex(10, -190);
endShape();
pop();
//pisces
push();
rotate(radians(15));
line(-10, -210, 0, -200);
line(0, -200, -10, -190);
line(5, -200, 15, -190);
line(5, -200, 15, -210);
line(-5, -200, 10, -200);
pop();
}