Chladni Figures

// Chladni figures: sand on a vibrating plate.
// Field f(x,y) = sin(m*pi*X)*sin(n*pi*Y) + sin(n*pi*X)*sin(m*pi*Y) with X,Y in [0,1].
// Particles do gradient descent on |f|^2 -> they collect on node lines (f = 0).
// Mouse X scrubs m, mouse Y scrubs n.

const N = 2000;
const M_MIN = 1;
const M_MAX = 7;
const N_MIN = 1;
const N_MAX = 7;

let W;
let H;
let px;       // Float32Array — particle x in canvas pixels
let py;       // Float32Array — particle y in canvas pixels
let mVal;
let nVal;
let mDisp;    // smoothed for display
let nDisp;
let pad;      // plate inset

function rand(a, b) { return a + Math.random() * (b - a); }

function scatter() {
  for (let i = 0; i < N; i++) {
    px[i] = rand(pad, W - pad);
    py[i] = rand(pad, H - pad);
  }
}

function recomputeLayout(width, height) {
  W = width;
  H = height;
  pad = Math.max(10, Math.min(W, H) * 0.04);
}

function init({ ctx, width, height }) {
  recomputeLayout(width, height);
  px = new Float32Array(N);
  py = new Float32Array(N);
  scatter();
  mVal = 3;
  nVal = 2;
  mDisp = mVal;
  nDisp = nVal;
  ctx.fillStyle = '#08070b';
  ctx.fillRect(0, 0, W, H);
}

// Step particles toward node lines by descending |f|^2.
// f  = sin(a*X)*sin(b*Y) + sin(b*X)*sin(a*Y)    with a = m*pi, b = n*pi
// fx = a*cos(a*X)*sin(b*Y) + b*cos(b*X)*sin(a*Y)
// fy = b*sin(a*X)*cos(b*Y) + a*sin(b*X)*cos(a*Y)
// grad(|f|^2) = 2*f*(fx,fy) — step opposite that, with jitter so they don't lock.
function step(dt, m, n) {
  const plateW = W - 2 * pad;
  const plateH = H - 2 * pad;
  const a = m * Math.PI;
  const b = n * Math.PI;
  // Vibration amplitude — bigger when far from any node makes the sand "dance".
  const amp = Math.min(plateW, plateH) * 0.012;
  const k = Math.min(plateW, plateH) * 0.45;  // descent gain (pixels per unit grad)
  const dtClamped = Math.min(dt, 0.05);
  for (let i = 0; i < N; i++) {
    const X = (px[i] - pad) / plateW;
    const Y = (py[i] - pad) / plateH;
    if (X < 0 || X > 1 || Y < 0 || Y > 1) {
      px[i] = rand(pad, W - pad);
      py[i] = rand(pad, H - pad);
      continue;
    }
    const sAX = Math.sin(a * X);
    const cAX = Math.cos(a * X);
    const sBX = Math.sin(b * X);
    const cBX = Math.cos(b * X);
    const sAY = Math.sin(a * Y);
    const cAY = Math.cos(a * Y);
    const sBY = Math.sin(b * Y);
    const cBY = Math.cos(b * Y);
    const f  = sAX * sBY + sBX * sAY;
    const fx = a * cAX * sBY + b * cBX * sAY;
    const fy = b * sAX * cBY + a * sBX * cAY;
    // Vibration jitter scales with |f| — antinodes shake hard, nodes barely move.
    const shake = amp * Math.abs(f);
    let nx = px[i] - dtClamped * k * f * fx / plateW
                   + (Math.random() - 0.5) * shake;
    let ny = py[i] - dtClamped * k * f * fy / plateH
                   + (Math.random() - 0.5) * shake;
    // Keep on plate.
    if (nx < pad) nx = pad + 1;
    else if (nx > W - pad) nx = W - pad - 1;
    if (ny < pad) ny = pad + 1;
    else if (ny > H - pad) ny = H - pad - 1;
    px[i] = nx;
    py[i] = ny;
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) {
    recomputeLayout(width, height);
    scatter();
  }

  // Mouse -> (m, n) targets. Floats so scrubbing is smooth.
  const mx = input.mouseX;
  const my = input.mouseY;
  if (mx >= 0 && mx <= W && my >= 0 && my <= H) {
    mVal = M_MIN + (M_MAX - M_MIN) * Math.max(0, Math.min(1, mx / W));
    nVal = N_MIN + (N_MAX - N_MIN) * Math.max(0, Math.min(1, my / H));
  }
  // Smoothed for animation + HUD readout.
  const lerp = Math.min(1, dt * 6);
  mDisp += (mVal - mDisp) * lerp;
  nDisp += (nVal - nDisp) * lerp;

  // Re-scatter on a hard mode jump so the new figure forms freshly.
  if (Math.abs(mVal - mDisp) > 1.2 || Math.abs(nVal - nDisp) > 1.2) {
    scatter();
  }

  step(dt || 1 / 60, mDisp, nDisp);

  // Fade then draw.
  ctx.fillStyle = 'rgba(8, 7, 11, 0.35)';
  ctx.fillRect(0, 0, W, H);

  // Plate border.
  ctx.strokeStyle = 'rgba(140, 120, 90, 0.45)';
  ctx.lineWidth = 1;
  ctx.strokeRect(pad - 0.5, pad - 0.5, W - 2 * pad + 1, H - 2 * pad + 1);

  // Particles as warm sand grains.
  ctx.fillStyle = 'rgba(245, 220, 170, 0.85)';
  for (let i = 0; i < N; i++) {
    ctx.fillRect(px[i] - 0.5, py[i] - 0.5, 1.4, 1.4);
  }

  // HUD.
  ctx.fillStyle = 'rgba(20, 18, 26, 0.6)';
  ctx.fillRect(8, 8, 150, 44);
  ctx.fillStyle = 'rgba(245, 220, 170, 0.95)';
  ctx.font = '12px ui-monospace, Menlo, monospace';
  ctx.textBaseline = 'top';
  ctx.fillText(`m = ${mDisp.toFixed(2)}`, 16, 14);
  ctx.fillText(`n = ${nDisp.toFixed(2)}`, 16, 30);
  ctx.fillStyle = 'rgba(180, 170, 200, 0.7)';
  ctx.fillText('move cursor to scrub', W - 168, H - 22);
}