A Michelson interferometer: nudge a mirror by nanometers or send a gravitational wave.
A beam splitter sends light down two arms and recombines it on a screen, where a mirror offset d adds a path difference of 2 d cos(theta), giving rings, and a tilted mirror adds a wedge that turns them into straight fringes. Moving the mirror by half a wavelength pulls in one fringe, and the counter turns that into a measurement. Broadband sources are summed over wavelength with CIE 1931 weights through a per-frame lookup table of color against path difference: the sodium doublet's two lines beat so the fringes fade and revive every 0.29 mm, and white light only shows its colored fringes within a micron of zero path difference. A gravitational wave chirp stretches one arm while squeezing the other, drawn 10^20 times larger than real, and the detector trace shows the rising chirp.
Try it. Drag the moving mirror sideways (4 nm per pixel, Shift for 2 microns) or use the wheel and arrow keys; drag the fixed mirror or the screen to tilt it. Pick the light source with the chips or keys 1 to 4, press Zero path (Z) to find the white-light fringes, and Grav. wave (G or Space) to send a chirp across the table.
Interference from optical path difference
Spectral color lookup tables with CIE 1931 weights
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a Michelson interferometer 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:
- Split the canvas in two. On the left draw a top-down optical table: a laser, a beam splitter at 45 degrees, a fixed mirror up one arm, a movable mirror along the other, and a detector below, with glowing beams between them.
- On the right draw a round screen at about 200 x 200 pixels with ImageData. For each pixel at normalized radius rho, the angle is theta = rho * 0.085 and the optical path difference is OPD = 2 d cos(theta), where d is the mirror offset in nanometers. The intensity is (1 - cos(2 pi OPD / lambda)) / 2 for a 633 nm laser. Start with d = 0.28 mm so you see rings.
- Let me drag the movable mirror to change d by a few nanometers per pixel, and watch the rings flow in and out.
Once that works, make it beautiful:
- Let me drag the other mirror to tilt it, adding a linear term to the path difference so the rings turn into straight fringes.
- Add white light: sum the intensity over about 40 wavelengths from 400 to 700 nm, each weighted by an approximation of the CIE 1931 color matching functions converted to RGB. Colored fringes appear only within a micron of zero path difference. Because the color depends only on OPD, fill a 1D lookup table over the range of OPD on screen each frame, and have every pixel index it.
- Add a sodium lamp (589.0 and 589.6 nm) and watch the fringes fade and return as the mirror travels.
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 gravitational wave chirp that stretches one arm and squeezes the other, a scrolling detector trace, or a fringe counter that measures the wavelength.
