project 6: abstract clock

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();
}

Leave a Reply