Project 06-Abstract-Clock

sketch
``````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.