For this project, the inner circle represents every second, the outer circle shows the seconds turning to minutes, the different colored rays of the “sun” show the different minutes, and the pink background shows the number of hours in the day!
sketch
function setup() {
createCanvas(350, 350);
background(173, 216, 230);
}
function draw() {
background(173, 216, 230);
hoursBackground();
minutesCircle();
secondsCircle();
}
function hoursBackground() { //creates pink rectangles every hour
push();
for(var i = 0; i < hour(); i++) {
strokeWeight(0.1);
fill(243, 196, 207);
rect(0,0, width/24, height);
translate(width/24,0);
}
pop();
}
function minutesCircle() { //every minute, a new ray appears coming out of the inner circle
push();
strokeWeight(11);
translate(width/2, height/2);
for (var i = 0; i < minute(); i ++) {
angleMode(DEGREES);
if(i % 2 == 0) { //if i mod 2 is 0, then a short yellow line is drawn
stroke(253, 253, 150, 200);
line(0,0, 0, -100);
rotate(6);
}else{ // else a long orange line is drawn
stroke(255, 179, 71, 200);
line(0,0, 0, -125);
rotate(6);
}
}
pop();
}
function secondsCircle() {
fill(173, 216, 230); //creates inner blue circle
strokeWeight(0.1);
circle(width/2, height/2, 40);
strokeWeight(10); //creates outer white circle that counts 60 seconds in a minute
stroke(255);
noFill();
arc(width/2, height/2, 250, 250, 270, 270 + second()*6);
strokeWeight(1); // creates inner circle that visually shows every second
fill(255);
arc(width/2, height/2, 30, 30, 270, 270 + millis()*0.36);
}