# Aliot-Clock

The goal in this project for me was to make a clock that didn’t completely abstract the data so that the time was readable, but that didn’t immediately appear to be a clock. I used the concentric orbiting motion of celestial bodies to inspire how I thought about days, hours, minutes and seconds, each of which is represented by a circle. The intersections of the circles belay information about the hour, minute, second, or millisecond respectively.

In my planning, I had initially run through several ideas. One was a poem-clock in which I would use a rhyming dictionary to find words that rhymed with the time. For example “five thirty six” could be abstracted to “jive dirty kicks.” The user would have to solve a sort of riddle to determine the time. I then contemplated using a more physical, particle-like representation for  units of time reacting in a Rube Goldberg setup. Seconds would be falling circles which would collect into a container, merge together, and then pour into another container containing larger circles representing minutes, etc. I thought that my current representation was a good compromise between legibility and physicality.

``````var prevSec;
var millisRolloverTime;
var canW = 700;
var canH = 700;
var w = 500;
var h = 500;
var O_col;
var D_col;
var M_col;
var H_col;
var S_col;

var H;
var M;
var S;
var hourWithFraction;
var mils;
var secondsWithFraction;
var minuteWithFraction;

//--------------------------
function setup() {
colorMode(HSB,100);
createCanvas(canW, canH);
millisRolloverTime = 0;
time();
genCircleColors();
}

function time(){
H = hour();
M = minute();
S = second();

if (prevSec != S) {
millisRolloverTime = millis();
}
prevSec = S;
mils = floor(millis() - millisRolloverTime);
secondsWithFraction   = S + (mils / 1000.0);
hourWithFraction = H + (M/60.0) + (S/3600.0);
minuteWithFraction = M + (S/60.0);
}

//--------------------------
function draw() {
time();
background(255);

//big outer circle, rad = width
fill(O_col.h, O_col.s, O_col.b);
noStroke();
ellipse(canW/2,canH/2,w,h);

//day circle

var D_diam = 250;
var D_pathRad = (w/2) - (D_diam/2);
var D_t = map(hourWithFraction,1,12,5,60);
var D_angle = ((D_t*PI)/30)+(3*PI/2);

var D_y = sin(D_angle) * D_pathRad;
var D_x = cos(D_angle) * D_pathRad;

fill(D_col.h, D_col.s, D_col.b);
noStroke();
ellipse((canW/2)+D_x, (canH/2)+D_y, D_diam, D_diam);

//hour circle

var H_diam = 125;
var H_pathRad = (D_diam/2) - (H_diam/2);
var H_t = map(minuteWithFraction,1,60,1,60);
var H_angle = ((H_t*PI)/30)+(3*PI/2);

var H_y = D_y + (sin(H_angle) * H_pathRad);
var H_x = D_x + (cos(H_angle) * H_pathRad);

fill(H_col.h, H_col.s, H_col.b);
noStroke();
ellipse(canW/2 + H_x, canH/2 + H_y, H_diam, H_diam);

//minute circle

var M_diam = 50;
var M_pathRad = (H_diam/2) + (M_diam/2);
var M_t = map(secondsWithFraction,1,60,0,59);
var M_angle = ((M_t*PI)/30)+(3*PI/2);

var M_y = H_y + (sin(M_angle) * M_pathRad);
var M_x = H_x + (cos(M_angle) * M_pathRad);

fill(M_col.h, M_col.s, M_col.b);
noStroke();
ellipse(canW/2 + M_x, canH/2 + M_y, M_diam, M_diam);

//second circle

var S_diam = 20;
var S_pathRad = (M_diam/2) - (S_diam/2);
var S_t = map(mils,0,1000,0,1000);
var S_angle = ((S_t*PI)/500)+(3*PI/2);

var S_y = M_y + (sin(S_angle) * S_pathRad);
var S_x = M_x + (cos(S_angle) * S_pathRad);

fill(S_col.h, S_col.s, S_col.b);
noStroke();
ellipse(canW/2 + S_x, canH/2 + S_y, S_diam, S_diam);

// fill(0);
// text("Hour: "   + H, 10, 22);
// text("Minute: " + M, 10, 42);
// text("Second: " + S, 10, 62);
// text("Millis: " + mils, 10, 82);

}

function genCircleColors(){

var hourWF = hourWithFraction;
var H = random(0,100);
if (hourWF > 12){
hourWF = (hourWF - 2*(hourWF - 12));
}
var S = map(hourWF, 0, 12, 50, 90); //6am-12pm pastel to saturated, 12pm-6pm saturated to less bright
var B = map(hourWF, 0, 12, 30, 90);

console.log(H,S,B);
O_col = {h: (H+30)%100, s: S, b: B};
D_col = {h: (H+10)%100, s: S, b: B};
H_col = {h: (H+70)%100, s: S, b: B};
M_col = {h: (H+50)%100, s: S, b: B};
S_col = {h: (H-10)%100, s: S, b: B};
}

function mousePressed(){
genCircleColors()
}``````