Abstract Clock

You can tell the time and date with this abstract clock. From inside out each hexagon tells seconds, minutes, hours, days, months, respectively. The red line indicates the start of a category. An interesting thing about using hexagons is that it is easy to use to approximate what time it is since it has 6 sides, and units of time are easily divided by 6.

project-06-clock
//Luke Mattson
//section A
var today = new Date();
var now = [today.getSeconds(), today.getMinutes()+(today.getSeconds()/60), today.getHours()+(today.getMinutes()/60),today.getDate()+(today.getHours()/24),today.getMonth()+(today.getDate()/30)] 
var highest = [60, 60, 24, 30, 12] 
var angle = []
var rate = [360/60, 360/60/60, 360/60/60/24, 360/60/60/24/30,360/60/60/24/30/12]
var size = [47,94,141,188,235]

function setup(){
    frameRate(1)
	createCanvas(480, 480);
    angleMode(DEGREES)

    for (i=0; i<=6; i++) {          
        angle[i] = (now[i]/highest[i])*360
    }
    
}


function draw(){
    background(255,179,71)
    fill(255,0,0)
    rect(240,239,240,2)
    translate(240,240)
    for (i=0; i<=4; i++) {
        push()
        rotate(angle[i])
        angle[i] += rate[i]
        hexagon(size[i])
        pop()
    }
    print(rate)
}

function hexagon(s){
    noFill()
    beginShape()
    vertex(s,0)
    vertex(s/2,s*sqrt(3)/2)
    vertex(-s/2,s*sqrt(3)/2)
    vertex(-s,0)
    vertex(-s/2,-s*sqrt(3)/2)
    vertex(s/2,-s*sqrt(3)/2)
    endShape(CLOSE)
    fill(130,200,200)
    ellipse(s,0,s/5)
}

Leave a Reply