Grafik

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.canvas, palette.light]

  const options = {
    grid: random.integer(4, 8),
    strokeWidth: random.integer(20, 60),
    iterations: random.integer(6, 10),
    coverage: random.number(0.02),
  }

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

  let points = null

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

      const ow = canvas.width - options.offset * 2
      const oh = canvas.height - options.offset * 2

      helpers
        .makeGrid(ow, oh, options.grid)
        .filter(() => random.maybe(options.coverage))
        .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 t = 1 - (options.iterations - index) / (options.iterations * 10)

      const strokeWidth = options.strokeWidth * t
      const remaining = [...points].filter((p) => random.maybe(0.6))

      ctx.beginPath()

      const fn = function (p0) {
        if (remaining.length < 4) return
        const [p1, p2] = helpers.nearest(remaining, p0).slice(1)

        ctx.moveTo(p1.x, p1.y)

        const mx =
          p1.x + (p2.x - p1.x) / 2 + (random.wobble(0.5) * canvas.width) / 20
        const my =
          p1.y + (p2.y - p1.y) / 2 + (random.wobble(0.5) * canvas.width) / 20
        ctx.quadraticCurveTo(mx, my, p2.x, p2.y)
      }

      random.shuffle(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()

      if (random.maybe(0.9)) {
        ctx.save()
        ctx.translate(0, 80)
        ctx.strokeStyle = palette.dark
        ctx.lineWidth = strokeWidth * 0.1
        ctx.stroke()
        ctx.restore()
      }
    },

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

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

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