sketch
For this project, I wanted to explore how to use a variety of shapes to express time so I used a combination of lines, circles and squares in a rotating motion simulate the effect of a clock.
//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
//Project 06
function setup() {
createCanvas(400, 400);
angleMode (DEGREES); //converts radians to degrees
}
function draw() {
var H = hour();
var M = minute();
var S = second();
background(H * 5,M,S); // background color changes according to time
//small circle for hours
for (var h = 0; h < H; h++){
var r=150;
var g=200;
var b=50;
push();
translate (width/2, height/3 - 30);
rotate((15*h)-0.25*360) //24 squares to count hours
noStroke();
fill(r-H, g-M, b-S); //color alternates as time changes
rect(35,0,20,20);
pop();
}
//bigger circle for minutes
for(var m = 0; m < M; m++){
var r=250;
var g=130;
var b=10;
push();
translate (width/2, height/2 + 50);
rotate((6*m)+ 0.25 *360); //60 circles to count min
noStroke();
fill(r+H, g+M, b+S); //color alternates as time changes
ellipse(72, 0, 15, 15);
pop();
}
//line seconds
for(var s = 0; s < S; s++) {
var r=160;
var g=105;
var b=60; //sets b value
push();
translate (width/2, height/2 + 50);
rotate((6*s)- 0.50 * 360); //60 rotating lines
stroke(H, M, S*2); //color alternates as time changes
strokeWeight(2);
line(100,100,10,10);
pop();
}
}
![[OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2020/08/stop-banner.png)
