Philip Gates – Project 06 – Abstract Clock

sketch

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.