xxxxxxxxxx
153
let backgroundCol = 21
let Circle = class {
constructor() {
this.ang = 0
}
drawLine(length, rot) {
push()
rotate(rot)
line(0, 0, length, 0)
pop()
}
draw(w, h, start, stop) {
arc(0, 0, w, h, start, stop)
this.drawLine(100 - (10 * (15 - (w / 20))), start == 0 && stop || start)
}
}
let Time = class {
constructor() {
this.oldValOne = 0
this.oldValTwo = 0
this.valOneAdd = 0
this.valTwoAdd = 0
}
draw(val, xOne, xTwo) {
let valOne = val.toString().split("")[0]
let valTwo = val.toString().split("")[1]
if (valOne == this.oldValOne) {
this.valOneAdd = lerp(this.valOneAdd, 50, .25)
} else {
this.valOneAdd = lerp(this.valOneAdd, 0, .25)
}
text(valOne, xOne, height - 35 - this.valOneAdd)
if (valTwo == this.oldValTwo) {
this.valTwoAdd = lerp(this.valTwoAdd, 50, .25)
} else {
this.valTwoAdd = lerp(this.valTwoAdd, 0, .25)
}
text(valTwo, xOne + 25, height - 35 - this.valTwoAdd)
this.oldValOne = valOne
this.oldValTwo = valTwo
}
}
let milCol, minCol, hCol, secCol
function setupColors() {
milCol = color(200, 150, 50)
minCol = color(225, 65, 65)
hCol = color(85, 0, 200)
secCol = color(85, 225, 85)
}
let milCircleOne, milCircleTwo, secCircle, minCircle, hCircle
function setupCircles() {
milCircleOne = new Circle()
milCircleTwo = new Circle()
secCircle = new Circle()
minCircle = new Circle()
hCircle = new Circle()
}
let hourTime, minTime, secTime
function setupTime() {
hourTime = new Time()
minTime = new Time()
secTime = new Time()
}
function setup() {
createCanvas(400, 500);
angleMode(DEGREES);
setupCircles()
setupColors()
setupTime()
}
function millies() {
let tempDate = new Date()
return tempDate.getMilliseconds()
}
let timeSpacerAmount = 25
let timeXStart = 105
function draw() {
let h = hour()
let min = minute()
let sec = second()
let mil = millies()
background(backgroundCol)
translate(200, 200)
rotate(-90)
noFill()
strokeWeight(8)
stroke(milCol)
let milAng = map(mil, 0, 1000, 0, 360)
if (sec % 2 == 1) {
milCircleOne.draw(300, 300, 0, milAng)
} else {
milCircleTwo.draw(300, 300, milAng, 0)
}
stroke(secCol)
let secAng = map(sec, 0, 60, 0, 360)
secCircle.ang = lerp(secCircle.ang, secAng, .1)
secCircle.draw(280, 280, 0, secCircle.ang)
stroke(minCol)
let minAng = map(min, 0, 60, 0, 360)
minCircle.ang = lerp(minCircle.ang, minAng, .1)
minCircle.draw(260, 260, 0, minCircle.ang)
stroke(hCol)
let hAng = map(h % 12, 0, 12, 0, 360)
hCircle.ang = lerp(hCircle.ang, hAng, .1)
hCircle.draw(240, 240, 0, hCircle.ang)
stroke(225)
point(0, 0)
rotate(90)
translate(-200, -200)
fill(255)
noStroke()
textAlign(CENTER, CENTER)
textSize(35)
hourTime.draw(h < 10 && "0" + h || h, timeXStart, timeXStart + timeSpacerAmount)
text(":", timeXStart + timeSpacerAmount * 2, height - 90)
minTime.draw(min < 10 && "0" + min || min, timeXStart + timeSpacerAmount * 3, timeXStart + timeSpacerAmount * 4)
text(":", timeXStart + timeSpacerAmount * 5, height - 90)
secTime.draw(sec < 10 && "0" + sec || sec, timeXStart + timeSpacerAmount * 6, timeXStart + timeSpacerAmount * 7)
}