Project 06-Abstract-Clock

sketchDownload
var x = 0;
var y = 0;
var sDiam;

function setup() {
    createCanvas(600, 600);
}

function draw() {
    var s = second();
    var m = minute();
    var h = hour();
    background(0, 0, h*10); //gets lighter by the hour
    translate(width/2, height/2);
    minuteRing(s, m);
    secondRing(s, m, sDiam);
}

function minuteRing(s, m) { //big circle that appears within a minute
    noStroke();
    fill(148, 96, 139, s*4.25); //opacity increases with second
    circle(x, y, 10*m); //diameter increases with minute
}
 
function secondRing(s, m, sDiam) {  //the ticking clock that moves every second
    fill(148, 96, 139);
    rotate(radians(s*6)); //rotate every second by 6 degrees
    var sDiam = (PI*10*m)/60; //diameter is circumference divided by 60 secs
    circle(x+(10*m/2), y, sDiam);
    triangle(x, y, x+(10*m/2), y-(sDiam/2), x+(10*m/2), y+(sDiam/2));
}

For this project I struggled a bit because I didn’t have enough time to create what I had visualized. I was inspired by the flower that blooms at night and wanted to create an image where the pedals grow bigger and bigger as time goes on.

I was only able to get the one pedal moving instead of having the whole flower in the background but basically the circle reveals itself to full opacity every minute as the pedal rotates, then the ring diameter increases with the minute. The background blue becomes lighter by the hour to signify sky.

Leave a Reply