Worley Cellular Noise

// Worley / cellular noise. Scatter feature points, color each pixel by F1
// (distance to nearest point) or F2 - F1 (cellular fracture). Cycle the
// distance metric: Euclidean, Chebyshev, Manhattan.

const N = 80;
const SCALE = 3;            // render buffer at 1/SCALE then upscale
const CYCLE = 6.0;          // seconds between metric switches
const METRICS = ['Euclidean', 'Chebyshev', 'Manhattan'];

let pts;                    // {x, y, vx, vy, phx, phy}
let buf, bctx;
let bw, bh;
let palette;                // Uint8Array, 256*3 — current palette

function makePalette(metricIdx) {
  // Three palettes, one per metric — keeps the cycle visually distinct.
  const p = new Uint8Array(256 * 3);
  for (let i = 0; i < 256; i++) {
    const t = i / 255;
    let r, g, b;
    if (metricIdx === 0) {
      // Euclidean: deep blue -> teal -> warm white
      r = Math.pow(t, 1.6) * 255;
      g = Math.pow(t, 0.9) * 220 + 20;
      b = (1 - Math.pow(1 - t, 2)) * 200 + 40;
    } else if (metricIdx === 1) {
      // Chebyshev (square cells): magenta -> orange -> cream
      r = Math.pow(t, 0.7) * 255;
      g = Math.pow(t, 1.8) * 220;
      b = Math.pow(1 - t, 1.5) * 140 + t * 80;
    } else {
      // Manhattan (diamond cells): forest -> lime -> pale yellow
      r = Math.pow(t, 1.4) * 230;
      g = Math.pow(t, 0.7) * 230 + 20;
      b = Math.pow(t, 2.5) * 150;
    }
    p[i * 3] = Math.max(0, Math.min(255, r | 0));
    p[i * 3 + 1] = Math.max(0, Math.min(255, g | 0));
    p[i * 3 + 2] = Math.max(0, Math.min(255, b | 0));
  }
  return p;
}

function init({ canvas, ctx, width, height, input }) {
  bw = Math.max(1, Math.ceil(width / SCALE));
  bh = Math.max(1, Math.ceil(height / SCALE));
  buf = new OffscreenCanvas(bw, bh);
  bctx = buf.getContext('2d');

  pts = [];
  for (let i = 0; i < N; i++) {
    pts.push({
      x: Math.random() * width,
      y: Math.random() * height,
      vx: (Math.random() - 0.5) * 18,
      vy: (Math.random() - 0.5) * 18,
      // sinusoidal drift parameters
      ax: 6 + Math.random() * 14,
      ay: 6 + Math.random() * 14,
      fx: 0.15 + Math.random() * 0.35,
      fy: 0.15 + Math.random() * 0.35,
      phx: Math.random() * Math.PI * 2,
      phy: Math.random() * Math.PI * 2,
    });
  }
  palette = makePalette(0);
}

function tick({ ctx, dt, time, width, height, input }) {
  // Resize buffer if canvas changed.
  const nbw = Math.max(1, Math.ceil(width / SCALE));
  const nbh = Math.max(1, Math.ceil(height / SCALE));
  if (nbw !== bw || nbh !== bh) {
    bw = nbw; bh = nbh;
    buf = new OffscreenCanvas(bw, bh);
    bctx = buf.getContext('2d');
  }

  // Cycle: metric every CYCLE seconds; F1 vs F2-F1 swaps every CYCLE/2.
  const seg = Math.floor(time / CYCLE);
  const metricIdx = seg % METRICS.length;
  const showF2 = Math.floor(time / (CYCLE * 0.5)) % 2 === 1;

  // Rebuild palette when metric flips. Cheap: 256 iterations.
  // Keying on metricIdx via a tiny cache.
  if (palette._idx !== metricIdx) {
    palette = makePalette(metricIdx);
    palette._idx = metricIdx;
  }

  // Update feature points: sinusoidal drift + bounce.
  const sx = new Float32Array(N);
  const sy = new Float32Array(N);
  for (let i = 0; i < N; i++) {
    const p = pts[i];
    p.x += (p.vx + Math.cos(time * p.fx + p.phx) * p.ax * 0.6) * dt;
    p.y += (p.vy + Math.sin(time * p.fy + p.phy) * p.ay * 0.6) * dt;
    if (p.x < 0) { p.x = 0; p.vx = -p.vx; }
    else if (p.x > width) { p.x = width; p.vx = -p.vx; }
    if (p.y < 0) { p.y = 0; p.vy = -p.vy; }
    else if (p.y > height) { p.y = height; p.vy = -p.vy; }
    sx[i] = p.x / SCALE;
    sy[i] = p.y / SCALE;
  }

  // Per-pixel: find F1 and F2 under the current metric.
  const img = bctx.createImageData(bw, bh);
  const data = img.data;

  // Normalization: scale distance so the typical "cell radius" maps to ~mid palette.
  // Mean nearest-neighbor distance for N uniform points in W*H area ~ 0.5*sqrt(area/N).
  const area = bw * bh;
  const cellR = 0.5 * Math.sqrt(area / N);
  const invF1 = 1 / (cellR * 1.6);
  const invF2mF1 = 1 / (cellR * 0.9);

  let oi = 0;
  for (let y = 0; y < bh; y++) {
    for (let x = 0; x < bw; x++) {
      let f1 = Infinity, f2 = Infinity;
      if (metricIdx === 0) {
        // Euclidean squared (compare on squares, sqrt at the end)
        for (let i = 0; i < N; i++) {
          const dx = x - sx[i];
          const dy = y - sy[i];
          const d = dx * dx + dy * dy;
          if (d < f1) { f2 = f1; f1 = d; }
          else if (d < f2) { f2 = d; }
        }
        f1 = Math.sqrt(f1);
        f2 = Math.sqrt(f2);
      } else if (metricIdx === 1) {
        // Chebyshev: max(|dx|,|dy|)
        for (let i = 0; i < N; i++) {
          const dx = Math.abs(x - sx[i]);
          const dy = Math.abs(y - sy[i]);
          const d = dx > dy ? dx : dy;
          if (d < f1) { f2 = f1; f1 = d; }
          else if (d < f2) { f2 = d; }
        }
      } else {
        // Manhattan: |dx|+|dy|
        for (let i = 0; i < N; i++) {
          const dx = Math.abs(x - sx[i]);
          const dy = Math.abs(y - sy[i]);
          const d = dx + dy;
          if (d < f1) { f2 = f1; f1 = d; }
          else if (d < f2) { f2 = d; }
        }
      }

      let v;
      if (showF2) {
        // F2 - F1 produces bright veins along cell boundaries.
        v = 1 - Math.min(1, (f2 - f1) * invF2mF1);
      } else {
        v = Math.min(1, f1 * invF1);
      }
      const pi = (v * 255) | 0;
      const o = oi * 4;
      data[o]     = palette[pi * 3];
      data[o + 1] = palette[pi * 3 + 1];
      data[o + 2] = palette[pi * 3 + 2];
      data[o + 3] = 255;
      oi++;
    }
  }

  bctx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(buf, 0, 0, bw, bh, 0, 0, width, height);

  // Dot the feature points faintly so the structure is legible.
  ctx.fillStyle = 'rgba(255,255,255,0.55)';
  for (let i = 0; i < N; i++) {
    ctx.beginPath();
    ctx.arc(pts[i].x, pts[i].y, 1.6, 0, Math.PI * 2);
    ctx.fill();
  }

  // HUD: current metric + mode + cycle progress.
  const segT = (time % CYCLE) / CYCLE;
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(8, 8, 210, 50);
  ctx.fillStyle = '#fff';
  ctx.font = '13px monospace';
  ctx.textBaseline = 'top';
  ctx.fillText('metric: ' + METRICS[metricIdx], 16, 14);
  ctx.fillText('field:  ' + (showF2 ? 'F2 - F1 (veins)' : 'F1 (cells)'), 16, 32);
  // tiny progress bar for the metric cycle
  ctx.strokeStyle = 'rgba(255,255,255,0.35)';
  ctx.strokeRect(150, 16, 60, 6);
  ctx.fillStyle = 'rgba(255,255,255,0.85)';
  ctx.fillRect(150, 16, 60 * segT, 6);
}