Reverberation and Sabine's formula: a clap in a church, then curtains

// game.js: clap in four places seen from above, watch the sound spread and bounce in slow motion,
// and hear the clap as it sounds there. Units: meters, seconds. The notebook writes all data into #data.
"use strict";

const DATA = JSON.parse(document.getElementById("data").textContent);
const {c: C, courant: COURANT, env_dt: ENV_DT, alpha: ALPHA, gain: GAIN} = DATA;
const ROOMS = ["living", "classroom", "church", "alley"];
const RANGE_DB = 40;                                   // the picture shades the pressure over 40 dB
const T_MAX = 1.5;                                     // the picture stops after 1.5 s of sound

// ---- the state: everything that changes, in one object
const state = {scene: "church", curtains: false, carpet: false, audience: false,
  t: 0, running: true, p: null, pOld: null, grid: null};

const scene = () => DATA.scenes[state.scene];
const switches = () => `${+state.curtains}${+(state.carpet && state.scene !== "alley")}${+(state.audience && state.scene !== "alley")}`;
const current = () => scene().states[switches()];

// ---- the grid of the picture, as in the notebook's grid(): the walls' α cell by cell
const wallBeta = (alpha) => { const R = Math.sqrt(1 - alpha); return (1 - R) / (1 + R); };

function makeGrid() {
  const s = scene(), [L, W] = s.size;
  const dx = Math.max(L / 159, W / 99);
  const nx = Math.round(L / dx) + 1, ny = Math.round(W / dx) + 1;
  const a = {x0: new Array(ny).fill(ALPHA[s.wall]), x1: new Array(ny).fill(ALPHA[s.wall]),
    y0: new Array(nx).fill(ALPHA[s.wall]), y1: new Array(nx).fill(ALPHA[s.wall])};
  if (state.scene === "alley") {
    a.x0.fill(ALPHA.open); a.x1.fill(ALPHA.open);
    if (state.curtains) a.y1.fill(ALPHA.curtain);
  }
  for (const [face, s0, s1] of s.windows) {
    a[face].forEach((_, i) => { const along = i * dx; if (along >= s0 && along <= s1) a[face][i] = ALPHA[state.curtains ? "curtain" : "glass"]; });
  }
  const loss = new Float64Array(nx * ny);              // λβ, summed over the walls a cell lies on
  for (let j = 0; j < ny; j++) { loss[j] += COURANT * wallBeta(a.x0[j]); loss[(nx - 1) * ny + j] += COURANT * wallBeta(a.x1[j]); }
  for (let i = 0; i < nx; i++) { loss[i * ny] += COURANT * wallBeta(a.y0[i]); loss[i * ny + ny - 1] += COURANT * wallBeta(a.y1[i]); }
  const dt = COURANT * dx / C;
  return {dx, dt, nx, ny, loss, damp: current().gamma * dt / 2};
}

// the clap: a ring-shaped bump of width 3 Δx around the hands, at rest
function clapField() {
  const g = state.grid, [sx, sy] = scene().clap, sigma = 3 * g.dx;
  const p = new Float64Array(g.nx * g.ny);
  for (let i = 0; i < g.nx; i++) for (let j = 0; j < g.ny; j++) {
    const r2 = ((i * g.dx - sx) ** 2 + (j * g.dx - sy) ** 2) / (2 * sigma * sigma);
    p[i * g.ny + j] = (1 - r2) * Math.exp(-r2);
  }
  state.p = p; state.pOld = p.slice(); state.t = 0;
}

// one leapfrog step of p_tt + γ p_t = c² ∇²p; beyond a wall the missing neighbor mirrors the inner one
function step() {
  const g = state.grid, {nx, ny} = g, p = state.p, pOld = state.pOld, pNew = new Float64Array(nx * ny);
  for (let x = 0; x < nx; x++) {
    for (let y = 0; y < ny; y++) {
      const i = x * ny + y;
      const left = p[i + (x > 0 ? -ny : ny)], right = p[i + (x < nx - 1 ? ny : -ny)];
      const down = p[i + (y > 0 ? -1 : 1)], up = p[i + (y < ny - 1 ? 1 : -1)];
      const k = g.loss[i] + g.damp;
      pNew[i] = (2 * p[i] - (1 - k) * pOld[i] + COURANT ** 2 * (left + right + down + up - 4 * p[i])) / (1 + k);
    }
  }
  state.pOld = p; state.p = pNew; state.t += g.dt;
}

// ---- sound: the impulse response at the context's rate, convolved with a dry clap
let audio = null;
const buffers = {};

function generator(seed) {                             // a small seeded generator, Gaussian numbers by Box-Muller
  let s = seed >>> 0;
  const uniform = () => { s = (s + 0x6D2B79F5) >>> 0; let z = s;
    z = Math.imul(z ^ (z >>> 15), z | 1); z ^= z + Math.imul(z ^ (z >>> 7), z | 61);
    return (((z ^ (z >>> 14)) >>> 0) + 0.5) / 4294967296; };
  return {uniform, gauss: () => Math.sqrt(-2 * Math.log(uniform())) * Math.cos(2 * Math.PI * uniform())};
}

function impulseResponse(st, fs) {
  const last = st.refl[st.refl.length - 1][0] / 1000;
  const n = Math.floor(Math.max(st.env.length * ENV_DT, last + 0.01) * fs) + 1;
  const h = new Float32Array(n);
  for (const [ms, a] of st.refl) h[Math.round(ms / 1000 * fs)] += a;
  const {gauss} = generator(st.seed);
  for (let i = 0; i < n; i++) {
    const x = i / fs / ENV_DT, j = Math.floor(x);
    if (j + 1 >= st.env.length) break;
    const level = st.env[j] + (x - j) * (st.env[j + 1] - st.env[j]);     // dB, between grid points
    h[i] += gauss() * Math.sqrt(10 ** (level / 10) / fs);
  }
  return h;
}

function dryClap(fs) {                                 // 10 ms of noise that dies in 2 ms
  const {uniform} = generator(1898), n = Math.round(0.010 * fs);
  const b = audio.createBuffer(1, n, fs), d = b.getChannelData(0);
  for (let i = 0; i < n; i++) d[i] = (2 * uniform() - 1) * Math.exp(-i / fs / 0.002);
  return b;
}

function wakeAudio() {
  if (!audio) audio = new (window.AudioContext || window.webkitAudioContext)();
  if (audio.state === "suspended") audio.resume();     // iOS wants this inside the tap
}

function playClap() {
  const fs = audio.sampleRate, key = state.scene + switches();
  if (!buffers[key]) {
    const h = impulseResponse(current(), fs);
    buffers[key] = audio.createBuffer(1, h.length, fs);
    buffers[key].copyToChannel(h, 0);
  }
  const convolver = audio.createConvolver();
  convolver.normalize = false;                         // else every room would sound equally loud
  convolver.buffer = buffers[key];
  const source = audio.createBufferSource(), gain = audio.createGain();
  source.buffer = dryClap(fs);
  gain.gain.value = GAIN;
  source.connect(convolver).connect(gain).connect(audio.destination);
  source.start();
}

// ---- drawing
const $ = (id) => document.getElementById(id);
const canvas = $("scene"), image = document.createElement("canvas");
let dpr = 1;

function colors() {
  const css = getComputedStyle(document.documentElement);
  return Object.fromEntries(["bg", "fg", "ink", "accent", "second", "muted", "pale"].map((k) => [k, css.getPropertyValue(`--${k}`).trim()]));
}
const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));

function layout() {
  dpr = window.devicePixelRatio || 1;
  const box = canvas.getBoundingClientRect();
  canvas.width = Math.round(box.width * dpr);
  canvas.height = Math.round(box.height * dpr);
  render();
}

// meters to pixels; a long room stands upright in an upright frame
function view(W, H) {
  const [L, Wd] = scene().size, pad = 22;
  const k0 = Math.min((W - 2 * pad) / L, (H - 2 * pad) / Wd), k1 = Math.min((W - 2 * pad) / Wd, (H - 2 * pad) / L);
  const turned = k1 > 1.1 * k0, k = turned ? k1 : k0;
  const ox = (W - k * (turned ? Wd : L)) / 2, oy = (H - k * (turned ? L : Wd)) / 2;
  const at = turned ? (x, y) => [ox + y * k, oy + x * k] : (x, y) => [ox + x * k, oy + (Wd - y) * k];
  return {k, turned, at};
}

function drawField(ctx, v, c) {
  const g = state.grid, ref = scene().ref, [r, gr, b] = rgb(c.accent);
  const w = v.turned ? g.ny : g.nx, h = v.turned ? g.nx : g.ny;
  image.width = w; image.height = h;
  const ictx = image.getContext("2d"), img = ictx.createImageData(w, h);
  for (let x = 0; x < g.nx; x++) for (let y = 0; y < g.ny; y++) {
    const level = 20 * Math.log10(Math.abs(state.p[x * g.ny + y]) / ref + 1e-12);
    const px = v.turned ? x * w + y : (g.ny - 1 - y) * w + x;
    img.data.set([r, gr, b, 255 * Math.min(1, Math.max(0, 1 + level / RANGE_DB))], 4 * px);
  }
  ictx.putImageData(img, 0, 0);
  const [x0, y0] = v.turned ? v.at(-g.dx / 2, -g.dx / 2) : v.at(-g.dx / 2, (g.ny - 0.5) * g.dx);
  const [L, W] = scene().size, [ax, ay] = v.at(0, 0), [bx, by] = v.at(L, W);
  ctx.save();                                          // the cells' outer halves would show past the walls
  ctx.beginPath(); ctx.rect(Math.min(ax, bx), Math.min(ay, by), Math.abs(bx - ax), Math.abs(by - ay)); ctx.clip();
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(image, x0, y0, w * g.dx * v.k, h * g.dx * v.k);
  ctx.restore();
}

function line(ctx, v, x0, y0, x1, y1) {
  ctx.beginPath(); ctx.moveTo(...v.at(x0, y0)); ctx.lineTo(...v.at(x1, y1)); ctx.stroke();
}

function drawRoom(ctx, v, c) {
  const s = scene(), [L, W] = s.size;
  ctx.lineCap = "butt";
  if (state.scene === "alley") {                      // two house walls; the ends and the sky are open
    ctx.strokeStyle = c.ink; ctx.lineWidth = 2.5;
    line(ctx, v, 0, 0, L, 0);
    ctx.strokeStyle = state.curtains ? c.muted : c.ink; ctx.lineWidth = state.curtains ? 8 : 2.5;
    line(ctx, v, 0, W, L, W);
  } else {
    ctx.strokeStyle = c.ink; ctx.lineWidth = 2.5;
    ctx.beginPath(); [[0, 0], [L, 0], [L, W], [0, W]].forEach(([x, y], i) => ctx[i ? "lineTo" : "moveTo"](...v.at(x, y))); ctx.closePath(); ctx.stroke();
    for (const [face, a, b] of s.windows) {           // glass: a gap in the wall; curtains: a thick band
      const fixed = {x0: 0, x1: L, y0: 0, y1: W}[face];
      ctx.strokeStyle = state.curtains ? c.muted : c.bg; ctx.lineWidth = state.curtains ? 8 : 1.2;
      if (face[0] === "x") line(ctx, v, fixed, a, fixed, b); else line(ctx, v, a, fixed, b, fixed);
    }
    const [x0, x1, y0, y1] = s.seats, [ax, ay] = v.at(x0, y0), [bx, by] = v.at(x1, y1);
    ctx.strokeStyle = c.muted; ctx.lineWidth = 1;
    ctx.strokeRect(Math.min(ax, bx), Math.min(ay, by), Math.abs(bx - ax), Math.abs(by - ay));
    ctx.fillStyle = c.muted; ctx.font = "14px system-ui, sans-serif"; ctx.textAlign = "left"; ctx.textBaseline = "top";
    ctx.fillText("seats", Math.min(ax, bx) + 4, Math.min(ay, by) + 3);
    if (state.audience) {                             // the audience: the seats filled
      ctx.fillStyle = c.muted; ctx.globalAlpha = 0.35;
      ctx.fillRect(Math.min(ax, bx), Math.min(ay, by), Math.abs(bx - ax), Math.abs(by - ay));
      ctx.globalAlpha = 1;
    }
    if (state.carpet) {                               // the carpet: a hatch over the floor
      ctx.save(); ctx.strokeStyle = c.muted; ctx.globalAlpha = 0.35; ctx.lineWidth = 1;
      const [px, py] = v.at(0, W), [qx, qy] = v.at(L, 0), x = Math.min(px, qx), y = Math.min(py, qy);
      const w = Math.abs(qx - px), h = Math.abs(qy - py);
      ctx.beginPath(); ctx.rect(x, y, w, h); ctx.clip();
      ctx.beginPath();
      for (let d = -h; d < w; d += 12) { ctx.moveTo(x + d, y + h); ctx.lineTo(x + d + h, y); }
      ctx.stroke(); ctx.restore();
    }
  }
  const [hx, hy] = v.at(s.clap[0], s.clap[1]);        // your hands
  ctx.fillStyle = c.ink;
  ctx.beginPath(); ctx.arc(hx, hy, 5, 0, 2 * Math.PI); ctx.fill();
  ctx.font = "14px system-ui, sans-serif"; ctx.textAlign = "left"; ctx.textBaseline = "bottom";
  ctx.fillText("you", hx + 7, hy - 4);
}

function render() {
  const c = colors(), ctx = canvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  const W = canvas.width / dpr, H = canvas.height / dpr;
  ctx.fillStyle = c.bg; ctx.fillRect(0, 0, W, H);
  if (W > 0 && H > 0) {
    const v = view(W, H);
    if (state.p) drawField(ctx, v, c);
    drawRoom(ctx, v, c);
    ctx.fillStyle = c.muted; ctx.font = "14px system-ui, sans-serif"; ctx.textAlign = "left"; ctx.textBaseline = "top";
    ctx.fillText(`t = ${Math.round(1000 * state.t)} ms, slowed ${scene().slow}×`, 4, 2);
  }
  const st = current();
  if (state.scene === "alley") {
    $("t60").textContent = `return every ${DATA.round_trip} ms`;
    $("t60m").textContent = `${Math.round(1000 / DATA.round_trip)} returns a second`;
    $("volume").textContent = "no closed volume";
    $("area").textContent = "";
  } else {
    $("t60").textContent = `T60 ${st.sabine.toFixed(2)} s by Sabine`;
    $("t60m").textContent = `${st.measured.toFixed(2)} s measured`;
    $("volume").textContent = `V ${st.V.toLocaleString("en-US")} m³`;
    $("area").textContent = `A ${st.A.toFixed(1)} m²`;
  }
  for (const r of ROOMS) $(r).setAttribute("aria-pressed", state.scene === r);
  for (const f of ["curtains", "carpet", "audience"]) $(f).setAttribute("aria-pressed", state[f] && !$(f).disabled);
  $("carpet").disabled = $("audience").disabled = state.scene === "alley";
}

// ---- controls, keys, and the loop
function set(partial) {                                // game.set({scene: "church", t: 0.1}) draws the still at 100 ms
  const sceneChanged = partial.scene !== undefined && partial.scene !== state.scene;
  Object.assign(state, partial);
  state.grid = makeGrid();
  if (sceneChanged && partial.t === undefined) { state.p = null; state.t = 0; }
  if (partial.t !== undefined) {
    const t = partial.t;
    clapField();
    while (state.t + state.grid.dt / 2 < t) step();
    state.running = partial.running ?? false;
  }
  render();
}

function clap() {
  wakeAudio();
  playClap();
  clapField();
  state.running = true;
}

const toggle = (f) => { if (!$(f).disabled) set({[f]: !state[f]}); };
$("clap").addEventListener("click", clap);
for (const r of ROOMS) $(r).addEventListener("click", () => set({scene: r}));
for (const f of ["curtains", "carpet", "audience"]) $(f).addEventListener("click", () => toggle(f));
canvas.addEventListener("pointerdown", clap);          // a tap on the room claps too
document.addEventListener("keydown", (e) => {
  const key = e.key.toLowerCase();
  const actions = {" ": clap, c: () => toggle("curtains"), k: () => toggle("carpet"), a: () => toggle("audience"),
    1: () => set({scene: "living"}), 2: () => set({scene: "classroom"}), 3: () => set({scene: "church"}), 4: () => set({scene: "alley"})};
  if (actions[key] && !(e.target instanceof HTMLButtonElement && key === " ")) { e.preventDefault(); actions[key](); }
});

let last = null, owed = 0;
function frame(now) {                                  // called by the browser once per screen refresh
  const elapsed = last === null ? 0 : Math.min((now - last) / 1000, 0.05);   // capped: a background tab does not jump
  last = now;
  if (state.running && state.p) {
    for (owed += elapsed / scene().slow; owed >= state.grid.dt; owed -= state.grid.dt) step();
    if (state.t > T_MAX) state.running = false;
    render();
  }
  requestAnimationFrame(frame);
}

// start in the church with a silent clap already spreading, so the frame is never empty
state.grid = makeGrid();
clapField();
while (state.t < 0.015) step();
window.addEventListener("resize", layout);
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", render);
layout();
requestAnimationFrame(frame);
window.game = {state, set, render};