Kaleidoscope

// Kaleidoscope. We render a single 60-degree wedge of "source" imagery —
// drifting colorful blobs in polar coordinates — into an offscreen buffer,
// then stamp that wedge six times around the center, alternating reflection,
// to produce 6-fold rotational + reflective symmetry (dihedral D6, like a
// classic mirror-tube kaleidoscope). The blobs morph slowly in radius/angle
// so the pattern is never static.

const NUM_BLOBS = 14;
const WEDGE_DEG = 60;                       // 360 / 6
const WEDGE_RAD = (WEDGE_DEG * Math.PI) / 180;
const FADE_ALPHA = 0.08;                    // wedge trail fade per frame
const TAU = Math.PI * 2;

let W, H;
let wedge;                                  // OffscreenCanvas for the source wedge
let wctx;                                   // 2D ctx for wedge
let wedgeR;                                 // wedge radial extent (pixels)
let blobs;                                  // array of blob descriptors

function makeBlobs() {
  const arr = [];
  for (let i = 0; i < NUM_BLOBS; i++) {
    arr.push({
      // polar position INSIDE the wedge: r in (0..1) * wedgeR, theta in (0..WEDGE_RAD)
      r0: 0.15 + Math.random() * 0.75,
      th0: Math.random() * WEDGE_RAD,
      // slow oscillation amplitudes and rates
      rAmp: 0.05 + Math.random() * 0.18,
      rRate: 0.15 + Math.random() * 0.45,
      thAmp: 0.05 + Math.random() * 0.18,
      thRate: 0.12 + Math.random() * 0.4,
      phase: Math.random() * TAU,
      // visual
      hue: Math.random() * 360,
      hueRate: 8 + Math.random() * 20,      // deg/sec drift
      radius: 0.10 + Math.random() * 0.22,  // as fraction of wedgeR
      pulseAmp: 0.25 + Math.random() * 0.35,
      pulseRate: 0.6 + Math.random() * 1.4,
    });
  }
  return arr;
}

function ensureWedge() {
  // wedgeR = distance from center to furthest screen corner so when we
  // rotate the wedge it always covers the full canvas.
  const cx = W / 2, cy = H / 2;
  wedgeR = Math.ceil(Math.hypot(Math.max(cx, W - cx), Math.max(cy, H - cy))) + 2;
  // bounding box of a 60-degree wedge with apex at origin, opening to +x:
  // width  = wedgeR (along x), height = 2 * wedgeR * sin(30deg) = wedgeR
  // but we draw the wedge from theta=0 to WEDGE_RAD (counter-clockwise),
  // so it occupies the first quadrant slice. Allocate a square sized wedgeR
  // and put the apex at (0, 0). The wedge fits inside this box.
  const sz = wedgeR;
  wedge = new OffscreenCanvas(sz, sz);
  wctx = wedge.getContext('2d');
  // start opaque black so the first frame isn't transparent garbage
  wctx.fillStyle = '#000';
  wctx.fillRect(0, 0, sz, sz);
}

function init({ width, height, ctx }) {
  W = width; H = height;
  ensureWedge();
  blobs = makeBlobs();
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, W, H);
}

function tick({ ctx, dt, time, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    ensureWedge();
  }
  if (dt > 0.05) dt = 0.05;

  // 1) Paint into the wedge buffer (low-alpha fade then add blobs in 'lighter').
  const sz = wedgeR;
  wctx.globalCompositeOperation = 'source-over';
  wctx.fillStyle = `rgba(0,0,0,${FADE_ALPHA})`;
  wctx.fillRect(0, 0, sz, sz);

  wctx.globalCompositeOperation = 'lighter';
  for (let i = 0; i < blobs.length; i++) {
    const b = blobs[i];
    // animate polar position; clamp into wedge
    const rFrac = Math.min(0.95, Math.max(0.05,
      b.r0 + b.rAmp * Math.sin(time * b.rRate + b.phase)));
    const th = Math.min(WEDGE_RAD - 0.001, Math.max(0.001,
      b.th0 + b.thAmp * Math.sin(time * b.thRate + b.phase * 1.7)));
    const r = rFrac * sz;
    const x = Math.cos(th) * r;
    const y = Math.sin(th) * r;

    // pulsing radius and hue drift
    const pulse = 1 + b.pulseAmp * Math.sin(time * b.pulseRate + b.phase);
    const rad = b.radius * sz * pulse;
    const hue = (b.hue + b.hueRate * time) % 360;

    // radial gradient blob
    const g = wctx.createRadialGradient(x, y, 0, x, y, rad);
    g.addColorStop(0,    `hsla(${hue.toFixed(0)}, 95%, 65%, 0.95)`);
    g.addColorStop(0.4,  `hsla(${hue.toFixed(0)}, 95%, 55%, 0.55)`);
    g.addColorStop(1,    `hsla(${hue.toFixed(0)}, 95%, 45%, 0)`);
    wctx.fillStyle = g;
    wctx.beginPath();
    wctx.arc(x, y, rad, 0, TAU);
    wctx.fill();
  }
  wctx.globalCompositeOperation = 'source-over';

  // 2) Compose the output: rotate the wedge 6 times around the center,
  // alternating mirrored copies so seams match (reflective symmetry).
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, W, H);

  const cx = W / 2, cy = H / 2;
  // global slow rotation so the whole mandala spins
  const spin = time * 0.18;

  // Clip a wedge from the buffer for each slice. We use a clipping path
  // matching the wedge angle and draw the buffer at origin (apex = center).
  for (let k = 0; k < 6; k++) {
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(spin + k * WEDGE_RAD);
    if (k & 1) ctx.scale(1, -1);   // mirror every other slice → reflective seam match
    // clip to the 60° wedge with apex at origin
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.arc(0, 0, sz, 0, WEDGE_RAD);
    ctx.closePath();
    ctx.clip();
    // draw the wedge buffer (apex at 0,0 by construction)
    ctx.drawImage(wedge, 0, 0);
    ctx.restore();
  }

  // soft vignette so edges don't read as a hard square
  const vg = ctx.createRadialGradient(cx, cy, Math.min(W, H) * 0.35, cx, cy, Math.max(W, H) * 0.7);
  vg.addColorStop(0, 'rgba(0,0,0,0)');
  vg.addColorStop(1, 'rgba(0,0,0,0.55)');
  ctx.fillStyle = vg;
  ctx.fillRect(0, 0, W, H);
}