Implement Oats Jenkins' idea

2022-07-03 15:23:45 +02:00 · 2022-07-03 15:23:45 +02:00 · 94a4171d41
commit 94a4171d41
2 changed files with 131 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>
+      The 20 Hour Oats Clock
+    </title>
+    <style>
+      canvas {
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="clock" style="width: 80vmin; height: 80vmin">
+
+    </canvas>
+    <script src="oats-clock.js">
+    </script>
+    <p>
+      See <a href="https://www.youtube.com/watch?v=iHK-aN3XZqw">Oats Jenkins: I Made a BETTER Clock (Youtube)</a>
+    </p>
+  </body>
+</html>
--- a/oats-clock.js
+++ 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()
+}