Wave Equation Sandbox

let GW, GH, scale;
let prev, cur, next;
let img, imgData, pixels;
let cw, ch;
let damping = 0.9965;
let lastPaint = -1;

function alloc(w, h) {
  cw = w; ch = h;
  scale = 3;
  GW = Math.max(40, Math.floor(w / scale));
  GH = Math.max(40, Math.floor(h / scale));
  prev = new Float32Array(GW * GH);
  cur = new Float32Array(GW * GH);
  next = new Float32Array(GW * GH);
}

function buildImage(ctx) {
  imgData = ctx.createImageData(GW, GH);
  pixels = imgData.data;
  for (let i = 3; i < pixels.length; i += 4) pixels[i] = 255;
  img = imgData;
}

function deposit(px, py, amp) {
  const gx = Math.floor(px / scale);
  const gy = Math.floor(py / scale);
  if (gx < 2 || gy < 2 || gx >= GW - 2 || gy >= GH - 2) return;
  const r = 3;
  for (let dy = -r; dy <= r; dy++) {
    for (let dx = -r; dx <= r; dx++) {
      const d2 = dx * dx + dy * dy;
      if (d2 > r * r) continue;
      const k = Math.exp(-d2 * 0.35);
      const idx = (gy + dy) * GW + (gx + dx);
      cur[idx] += amp * k;
      prev[idx] -= amp * k * 0.4;
    }
  }
}

function init({ canvas, ctx, width, height }) {
  alloc(width, height);
  buildImage(ctx);
  deposit(width * 0.35, height * 0.45, 1.8);
  deposit(width * 0.65, height * 0.55, -1.6);
  deposit(width * 0.5, height * 0.25, 1.4);
}

function energy() {
  let e = 0;
  const step = 17;
  for (let i = 0; i < cur.length; i += step) e += cur[i] * cur[i];
  return e / (cur.length / step);
}

function tick({ ctx, dt, frame, width, height, input }) {
  if (width !== cw || height !== ch) {
    alloc(width, height);
    buildImage(ctx);
  }
  const C = 0.245;
  for (let s = 0; s < 2; s++) {
    for (let y = 1; y < GH - 1; y++) {
      const row = y * GW;
      for (let x = 1; x < GW - 1; x++) {
        const i = row + x;
        const lap = cur[i + 1] + cur[i - 1] + cur[i + GW] + cur[i - GW] - 4 * cur[i];
        let v = 2 * cur[i] - prev[i] + C * lap;
        v *= damping;
        next[i] = v;
      }
    }
    const tmp = prev;
    prev = cur;
    cur = next;
    next = tmp;
  }

  if (input.mouseDown) {
    if (lastPaint !== frame - 1) deposit(input.mouseX, input.mouseY, 2.2);
    else deposit(input.mouseX, input.mouseY, 1.2);
    lastPaint = frame;
  }
  const clicks = input.consumeClicks();
  for (const c of clicks) deposit(c.x, c.y, 2.6);

  if (frame % 240 === 0) {
    const e = energy();
    if (e < 0.002) {
      deposit(Math.random() * width, Math.random() * height, 1.6 * (Math.random() < 0.5 ? 1 : -1));
    }
  }

  for (let i = 0, p = 0; i < cur.length; i++, p += 4) {
    let v = cur[i];
    const a = Math.max(-1.5, Math.min(1.5, v));
    const t = a;
    let r, g, b;
    if (t >= 0) {
      const k = Math.min(1, t / 1.2);
      r = 30 + 225 * k;
      g = 20 + 180 * k * k;
      b = 80 + 60 * (1 - k);
    } else {
      const k = Math.min(1, -t / 1.2);
      r = 10 + 30 * (1 - k);
      g = 40 + 180 * k * 0.6;
      b = 90 + 165 * k;
    }
    const mag = Math.abs(t);
    const bg = 8 + mag * 4;
    pixels[p] = r * mag + bg * (1 - mag);
    pixels[p + 1] = g * mag + bg * (1 - mag);
    pixels[p + 2] = b * mag + bg * (1 - mag);
  }

  ctx.imageSmoothingEnabled = true;
  ctx.putImageData(imgData, 0, 0);
  ctx.drawImage(ctx.canvas, 0, 0, GW, GH, 0, 0, width, height);

  ctx.fillStyle = "rgba(220, 230, 255, 0.7)";
  ctx.font = "12px system-ui, sans-serif";
  ctx.fillText("click & drag to paint waves — reflect off walls, interfere freely", 12, height - 14);
}