Lattice

import helpers from "/scratchpad/_lib/line.asset.mjs"
import sequence from "/scratchpad/_lib/sequence.asset.mjs"
import posterize from "/scratchpad/posterize/posterize.asset.mjs"
import badge from "/scratchpad/_lib/badge.asset.mjs"
import palette from "/scratchpad/_lib/palette.asset.mjs"
import * as random from "/scratchpad/_lib/random.asset.mjs"

const dpi = window.devicePixelRatio || 1

export default (canvas) => {
  const scale = dpi

  canvas.width = canvas.offsetWidth * scale
  canvas.height = canvas.offsetHeight * scale

  const ctx = canvas.getContext("2d")
  const colors = [palette.dark, palette.light, palette.canvas]

  const options = {
    grid: random.integer(4, 8),
    strokeWidth: random.integer(20, 50),
    iterations: random.integer(4, 8),
  }

  options.offset = options.strokeWidth * 1.1
  options.blurRadius = options.strokeWidth / 6

  let points = null
  let strokeWidth = options.strokeWidth

  const iteration = (index) => [
    () => {
      points = []

      const gw = canvas.width - options.offset * 2
      const gh = canvas.height - options.offset * 2

      random
        .shuffle(helpers.makeGrid(gw, gh, options.grid))
        .slice(0, 1000)
        .forEach((point) => {
          const t = random.number(Math.PI)
          const x = Math.cos(t) * (options.grid / 3)
          const y = Math.sin(t) * (options.grid / 3)

          points.push({
            x: options.offset + point.x - x,
            y: options.offset + point.y - y,
          })
          points.push({
            x: options.offset + point.x + x,
            y: options.offset + point.y + y,
          })
        })
    },

    () => {
      const n = random.number(0.2 * points.length)
      const t = 1 - (options.iterations - index) / (options.iterations * 10)
      const remaining = [...points].filter((p, i) => i < n)

      strokeWidth = options.strokeWidth * t

      ctx.beginPath()

      const fn = function (p0) {
        if (remaining.length < 4 || random.maybe(0.1)) return
        const [p1, p2] = helpers.nearest(remaining, p0)
        remaining.splice(remaining.indexOf(p1), 1)

        ctx.moveTo(p1.x, p1.y)
        ctx.lineTo(p2.x, p2.y)
      }

      points.forEach(fn)
    },

    () => {
      ctx.globalCompositeOperation = "source-atop"
      ctx.lineCap = "round"
      ctx.lineWidth = strokeWidth * 1.5
      ctx.strokeStyle = "rgba(0, 0, 0, 0.2)"
      ctx.stroke()

      ctx.globalCompositeOperation = "source-over"
      ctx.lineWidth = strokeWidth
      ctx.strokeStyle = palette.dark
      ctx.stroke()

      ctx.strokeStyle = palette.canvas
      ctx.lineWidth = strokeWidth * 0.4
      ctx.stroke()
    },

    () => {
      posterize({
        ctx,
        colors,
        radius: options.blurRadius,
        ramp: options.blurRadius * 2,
      })
    },
  ]

  const steps = Array.from({ length: options.iterations }, (e, i) =>
    iteration(i)
  )

  return sequence([...steps.flat(), () => badge(ctx, { colors })])
}