Binary Sequence

import palette from "/scratchpad/_lib/palette.asset.mjs"

const dpi = window.devicePixelRatio || 1

export default async (canvas) => {
  canvas.width = canvas.offsetWidth * dpi
  canvas.height = canvas.offsetHeight * dpi

  const ctx = canvas.getContext("2d")

  const radix = 2
  const power = 6
  const count = Math.pow(radix, power)

  const x = canvas.width * 0.1
  const y = canvas.height * 0.1
  const b = (canvas.height - y * 2) / (count * 2)
  const w = (canvas.width - x * 2 - b * (power - 1)) / power
  const h = b * 2

  let str

  ctx.lineWidth = b

  ctx.fillStyle = palette.dark
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = palette.canvas
  ctx.strokeStyle = palette.canvas

  ctx.translate(x, y)
  ctx.beginPath()

  for (let r = 0; r < count; r++) {
    str = r.toString(radix)

    while (str.length < power) str = "0" + str

    for (let c = 0; c < power; c++) {
      if (+str[power - c - 1]) {
        ctx.moveTo(c * (w + b), 0)
        ctx.lineTo(c * (w + b) + w, 0)
      } else {
        ctx.moveTo(c * (w + b) + (w - b) / 2, 0)
        ctx.lineTo(c * (w + b) + (w + b) / 2, 0)
      }
    }

    ctx.translate(0, h)
  }

  ctx.stroke()

  ctx.textAlign = "center"
  ctx.font = `700 ${h}px 'sans', sans-serif`

  for (let c = 0; c < power; c++) {
    ctx.fillText(`2 ${"⁰¹²³⁴⁵⁶⁷⁸⁹"[c]}`, c * (w + b) + w / 2, h)
  }
}