A bat hunts moths in a black cave that exists only as the echoes of its calls.
Nothing in the cave is drawn directly. Each call fires a fan of up to 1,080 rays, sphere-traced through a chamfer distance field and refined by bisection against the exact rock shape, so obstacles cut acoustic shadows into the expanding wavefront. As the front sweeps past, the rock behind each ray's first hit lights up on a phosphor persistence screen, shaded by beam direction, spherical spreading, angle of incidence and rock texture, then fades into a dim afterglow map, refreshed now and then by a loud long-range survey call. The bat flies a steering model with obstacle feelers and a breadth-first navigation field, locks onto the moth it heard last, and raises its call rate from search through approach to the feeding buzz, which you can watch on the bat detector strip. Moths flutter, so their echoes flicker with acoustic glints, and they power-dive when a call gets loud.
Try it. Move the pointer to fly the bat (or use the arrow keys), click or press Space to call, right-click or Shift-click to release a moth, M to add one near the bat, and R for a new cave. Let go and the bat goes back to hunting on its own.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a bat echolocation toy with JavaScript and the HTML canvas element, where the cave is invisible except where sound reveals it. 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 that stays sharp on high-DPI screens and resizes with the window. Paint it near black.
- Describe the cave as a function solid(x, y): a ceiling and floor made from a few sine waves, plus a dozen stalactites and stalagmites as narrow triangles. Never draw it directly.
- Put a bat (a simple triangle for now) under the mouse. Every 0.3 seconds it calls: cast 360 rays outward and step along each one in small increments until solid() is true, storing the hit point.
- Animate the call as an expanding circle. Only draw the arc segments whose rays have not hit anything yet, so rock casts shadows in the wavefront.
- When the wavefront radius passes a ray's hit distance, draw a bright dot at the hit point onto a second offscreen canvas. Every frame, fade that canvas by drawing a black rectangle at about 3% opacity over it, then draw it to the screen. The cave appears as a fading point cloud.
Once that works, make it beautiful:
- Make the call directional: scale each ray's brightness by a forward beam pattern like cos squared of the angle from the flight direction, and dim distant hits.
- Tint the persistence canvas like an old sonar screen (cyan on deep blue) and add a soft glow by drawing it twice, once blurred.
- Add a few moths that flutter randomly; their echoes show up in amber. Let the bat chase the nearest moth it has heard and call faster as it gets close, ending in a rapid buzz.
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 a distance field for faster ray marching, shading echoes by the surface angle, or a little spectrogram that shows each call as a frequency sweep.
