Two spiral galaxies collide and fling out long tidal tails.
Each galaxy is a heavy core orbited by thousands of stars that feel the gravity of both cores but not of each other, the method Toomre and Toomre used in 1972 to explain tidal tails. As the galaxies swing past each other, tides pull stars into long arcing tails and bridges like the Antennae. Drag from the dark halos makes the cores spiral in and merge, then two new galaxies are launched on a fresh orbit. Stars are colored by population and drawn additively with glow and dust.
Try it. Drag to rotate the view. Click to launch a new collision.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a galaxy collision simulation with JavaScript and the HTML canvas element. 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 canvas that fills the window, stays sharp on high-DPI screens, and resizes with the window. Paint it near-black.
- Use the restricted three-body approach from Toomre and Toomre (1972): two heavy galaxy cores that attract each other, and thousands of massless stars that feel both cores but not each other.
- Use a softened gravity law, acceleration = M * d / (|d|² + eps²)^1.5, so stars passing close to a core do not explode.
- Build each galaxy as a flat disk of about 5,000 stars on circular orbits around its core, with speed sqrt(r * |a(r)|). Tilt the two disks differently.
- Start the cores far apart on a near-parabolic orbit so they swing past each other.
- Integrate with a leapfrog (drift, kick, drift) at a fixed time step, several steps per frame, and store positions and velocities in Float32Arrays.
- Project in 3D with a slowly orbiting perspective camera and draw each star as a single pixel.
Once that works, make it beautiful:
- Accumulate stars additively into a float buffer, tone map it with 1 - exp(-x), and add a soft glow by drawing a shrunken copy of the frame back on top with "lighter".
- Color stars by population: a warm yellow bulge, white disk stars, and blue young stars.
- Add a small drag on the cores when they overlap, standing in for dynamical friction, so they merge after a pass or two. Then launch a new encounter.
- Let the visitor drag to rotate the view and click to restart.
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 density-wave spiral arms before the encounter, dust lanes that absorb light, or unequal masses and retrograde disks.
