var angle = 0
function setup() {
createCanvas(400, 400);
background(220);
}
function draw() {
background(130, 125, 187)
var min = minute()
var sec = second()
var hours = hour()
//gradient cirles
push()
translate(200, 200)
fill(84, 62, 116)
stroke(30, 24, 45)
strokeWeight(0.2)
scale(10)
circle(0, 0, 10)
pop()
push()
translate(200, 200)
fill(120, 85, 167)
strokeWeight(0)
scale(10)
circle(0, 0, 9)
pop()
push()
translate(200, 200)
fill(140, 105, 187)
strokeWeight(0)
scale(10)
circle(0, 0, 8)
pop()
push()
translate(200, 200)
fill(160, 125, 207)
strokeWeight(0)
scale(10)
circle(0, 0, 7)
pop()
//circle counting seconds
noFill()
push()
translate(200, 200)
stroke(53, 44, 43)
strokeWeight(0.4)
scale(sec/10)
circle(0, 0, 10)
pop()
//circle counting minutes
push()
translate(200, 200)
stroke(53, 44, 43)
strokeWeight(0.2)
scale((12 + min/20))
circle(0, 0, 10)
pop()
//circle counting hours
push()
translate(200, 200)
stroke(53, 44, 43)
strokeWeight(0.2)
scale((32 + hours/10))
circle(0, 0, 10)
pop()
//large outside circle
push()
translate(200, 200)
stroke(53, 44, 43)
strokeWeight(0.3)
scale(20)
circle(0, 0, 10)
pop()
//line around outside circle
push()
translate(200, 200)
stroke(49, 41, 42)
strokeWeight(2)
scale(25)
circle(0, 0, 10)
pop()
//rotating arc
push()
translate(200, 200)
stroke(100, 80, 130)
strokeWeight(3)
rotate(radians(angle))
arc(0, 0, 200, 200, 0, PI, OPEN)
pop()
angle+=1
}
For this project, I wanted to use circles to represent time. The black circle outline in the very middle represents seconds. The circle outline outside of the purple circle represents minutes. And the final circle outline represents the hour.