Clap in a room on a blueprint and hear its exact echoes, from bathroom to cathedral.
Every echo of a clap is a straight line from a mirror image of the source: reflect the source in a wall for one bounce, reflect that image again for two. Walls are arbitrary segments, so the program builds the image tree breadth first with beam tracing (each image keeps only the part of its wall its parent can see) and validates every path to the listener by walking it backwards and checking each leg for occlusion. Each plan path is combined with analytic floor and ceiling images, giving the stems of the impulse response; where the truncated tree runs out, it crossfades into a statistical tail with diffuse-field energy decaying at the Eyring reverberation time, and the Schroeder curve measures the T60. That response becomes a real impulse response for a ConvolverNode, and a synthesized hand clap plays through it. When you clap, the true wavefronts expand from every image, clipped to its beam.
Try it. Drag the clap or the listener. Drag across empty floor to draw a wall with the current brush, click a wall to change its material, and Backspace removes your last wall. Pick a room (1 to 5), and click Clap, the clap marker or Space to hear it; sound starts on the first click.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a room acoustics toy with JavaScript and the HTML canvas element that finds the echoes of a clap with the image-source method and draws them on a blueprint-style floor plan. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a full-window canvas, sharp on high-DPI screens. Paint a blueprint: dark blue, a faint one-meter grid, and an 8 by 5 m room with thick white walls.
- Put a source (the clap) and a listener in the room, both draggable.
- Image sources: mirror the source across each of the four walls to get first-order images, then mirror those across the other walls for second order, and so on up to order 4. For each image, the straight line from the image to the listener is the reflected path. Walk it backwards to find where it hits each wall in turn, and throw it away if a hit falls off the wall segment.
- Draw the valid paths as thin lines from source to listener, colored by how many bounces they took.
Once that works, make it beautiful and audible:
- Under the plan, draw the impulse response as a stem plot: one stem per path at time distance / 343, height 0.95 ^ bounces / distance, in decibels.
- On a click, animate the clap: circles of radius 343 * t (slowed down) around the source and around each image, clipped to the room, so you see the wavefronts bounce.
- Build an AudioBuffer from the stems at the audio sample rate, load it into a ConvolverNode, and play a short burst of noise (a clap) through it when the user clicks. Create the AudioContext only on that click.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as drawing extra walls and validating paths for occlusion, a reverberant noise tail using the Sabine formula, or different wall materials with their own absorption.
