# Philip Gates – Project 06 – Abstract Clock

``````function setup() {
createCanvas(400, 400);
}

function draw() {

//fetches increments of time
var H = hour();
var M = minute();
var S = second();
var totalSec = ((H * 3600) + (M * 60) + S); //calculates total # seconds in day so far

//maps increments of time to circle size
var mappedH = map(H, 0, 23, 0, 200);
var mappedM = map(M, 0, 59, 0, 150);
var mappedS = map(S, 0, 59, 0, 100);

//maps increments of time to color values
var colorH = map(H, 0, 23, 255, 0);
var colorM = map(M, 0, 59, 255, 0);
var colorS = map(S, 0, 59, 255, 0);

//creates grayscale roughly in accordance with time of day
var sky1 = map(totalSec, 0, 43200, 0, 255); //midnight-noon goes from black to white
var sky2 = map(totalSec, 43201, 86400, 255, 0); //noon-midnight goes from white to black

background(255);

//draw background circle, fill according to time of day
if (totalSec <= 43200) {
fill(sky1);
}   else {
fill(sky2);
}   ellipse(width/2,height/2,width,height);

//draw circles that expand as increments of time grow
//fill with colors that get more saturated as increments of time increase
noStroke();
fill(colorH,255,255);
ellipse(150, 130, mappedH, mappedH); //hour
fill(255,colorM,255);
ellipse(260, 270, mappedM, mappedM); //minute
fill(255,255,colorS);
ellipse(135, 280, mappedS, mappedS); //second
}
``````

I wanted to keep circles as an integral part of the design, because my own experience of time feels most attuned to cycles— the calendar, circadian rhythms, etc. The movement and color of the inner circles are tied to “human” time (hours, minutes, seconds), while the color of the background circle is tied (very approximately, using noon as the brightest point and midnight as the darkest) to the position of the sun in the sky. The map function came in very handy for this project.