/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A
Project-06
This program draws an abstract clock that changes over time.
*/
function setup() {
createCanvas(480, 100);
noStroke();
}
function draw() {
var c=255-(hour()*10.5);
background(c);
var s=second();
var m=minute();
var h=hour();
var mx=10;
var sx=11;
var hx=10;
//draws the hours
for (H=0; H<h; H++) {
var y=10;
var width=15;
var height=50;
var dx=18;
fill(230, 180, 170);
rect(hx, y, width, height);
hx+=dx;
}
//draws the minutes
for (M=0; M<m; M++) {
var y=65;
var width=2;
var height=25;
var dx=8;
fill(250,120,120);
rect(mx, y, width, height);
mx+=dx;
}
//draws the seconds
for (S=0; S<s; S++) {
var y=95;
var width=2;
var dx=8;
if (c>150) {
fill(0);
}
else {
fill(255);
}
circle(sx, y, width);
sx+=dx;
}
}
For this project, I wanted to create a clock that visually showed the number of hours, minutes, and seconds. I chose to have this be a 24 hour clock as opposed to 12 hours because 12 hour clocks make no sense. To do this, I created for loops that presented n number of objects based on the number of hours/minutes/seconds. I decided that hours were most important and then minutes and then seconds so I created visual size differences to reflect that logic. Also, I wanted there to be some reflection of the natural world, so I have the background getting gradually darker with each passing hour. I found the hour(), minute(), and second() built-ins to be quite confusing, but it is quite exciting to see them actually working.