commit 94a4171d417c40731d59549a9d35215a2c6dfc85 Author: Peter J. Holzer Date: Sun Jul 3 15:23:45 2022 +0200 Implement Oats Jenkins' idea diff --git a/index.html b/index.html new file mode 100644 index 0000000..1170d6e --- /dev/null +++ b/index.html @@ -0,0 +1,23 @@ + + + + + + The 20 Hour Oats Clock + + + + + + + + +

+ See Oats Jenkins: I Made a BETTER Clock (Youtube) +

+ + diff --git a/oats-clock.js b/oats-clock.js new file mode 100644 index 0000000..280addc --- /dev/null +++ b/oats-clock.js @@ -0,0 +1,108 @@ +const canvas = document.querySelector("#clock") +// Match pixel size with screen +canvas.width = canvas.clientWidth +canvas.height = canvas.clientHeight + +const ctx = canvas.getContext("2d") + +setInterval(draw_face, 200) + +function draw_face() { + const x0 = canvas.width / 2 + const y0 = canvas.height / 2 + const r0 = Math.min(canvas.width, canvas.height) * 0.3 + const p0 = r0 * Math.PI / 8 // the length of the straight part of the pill + const rd = r0 * 0.9 + const f = r0 * 0.1 + const rm = r0 * 0.8 + const rh = r0 * 0.7 + const rs = r0 * 0.05 + + ctx.strokeStyle = "black" + ctx.fillStyle = "white" + ctx.beginPath() + ctx.moveTo(x0, y0 + r0) + //ctx.lineTo(x0 + p0, y0 + r0) + ctx.arcTo(x0 + p0 + r0, y0 + r0, x0 + p0 + r0, y0, r0) + ctx.arcTo(x0 + p0 + r0, y0 - r0, x0, y0 - r0, r0) + ctx.lineTo(x0 - p0, y0 - r0) + ctx.arcTo(x0 - p0 - r0, y0 - r0, x0 - p0 - r0, y0, r0) + ctx.arcTo(x0 - p0 - r0, y0 + r0, x0 - p0 , y0 + r0, r0) + ctx.closePath() + ctx.stroke() + ctx.fill() + + ctx.font = `bold ${f}px sans` + ctx.textAlign = "center" + ctx.textBaseline = "middle" + for (let m = 0; m < 20; m++) { + const [x, y] = xy(m, rd, x0, y0, p0) + ctx.strokeText(`${m+1}`, x, y) + } + + const now = new Date() + const t = now.getHours() * 3600 + now.getMinutes() * 60 + now.getSeconds() + const oahour = t / (20 * 216) + const th = t - Math.floor(oahour) * (20 * 216); + console.log(t, oahour, th) + const oamin = th / 216 + + console.log(oahour, oamin); + [x, y] = xy(oahour, rh, x0, y0, p0) + sun(x, y, rs); + [x, y] = xy(oamin, rm, x0, y0, p0) + oat(x, y, rs); + + + const odsec = t % 216 + const tm = Math.floor(t / 216) + const odmin = tm % 20 + const odhour = Math.floor(tm / 20) + console.log(odhour, odmin, odsec) + const digital = + String(odhour+1).padStart(2, "0") + ":" + + String(odmin+1).padStart(2, "0") + ":" + + String(odsec+1).padStart(3, "0"); + ctx.fillStyle = "#008" + ctx.fillText(digital, x0, y0) +} + +function xy(m, r, x0, y0, p0) { + let x + let y + if (m <= 1) { + x = x0 + p0 * m + y = y0 + r + } else if (m <= 9) { + x = x0 + + p0 + Math.sin((m - 1) * Math.PI / 8) * r + y = y0 + Math.cos((m - 1) * Math.PI / 8) * r + } else if (m <= 11) { + x = x0 - p0 * (m - 10) + y = y0 - r + } else if (m <= 20) { + x = x0 - p0 - Math.sin((m - 11) * Math.PI / 8) * r + y = y0 - Math.cos((m - 11) * Math.PI / 8) * r + } + return [x, y] +} + +function sun(x, y, rs) { + ctx.beginPath() + ctx.ellipse(x, y, rs, rs, 0, 2*Math.PI, 0) + for (let i = 0; i < 7; i++) { + ctx.moveTo(x + Math.cos(i * Math.PI * 2 / 7) * rs, + y + Math.sin(i * Math.PI * 2 / 7) * rs) + ctx.lineTo(x + Math.cos(i * Math.PI * 2 / 7) * rs * 2, + y + Math.sin(i * Math.PI * 2 / 7) * rs * 2) + } + ctx.stroke() +} + +function oat(x, y, rs) { + ctx.beginPath() + ctx.ellipse(x, y, rs, rs/2, 0.2*Math.PI, 0, 2*Math.PI) + ctx.stroke() + ctx.beginPath() + ctx.ellipse(x, y - rs/2, rs, rs/2, 0.2*Math.PI, 0.3*Math.PI, 0.7*Math.PI) + ctx.stroke() +}