Draw any aperture and see its diffraction pattern in true spectral color.
Far behind an opening, light forms the 2D Fourier transform of the opening's shape. A hand-written radix-2 FFT transforms the 128 by 128 mask, zero padded to 512 by 512 with two real rows packed into each complex transform. A longer wavelength simply stretches the same pattern, so every pixel samples that one intensity map at 48 stretched radii weighted by the CIE 1931 color matching functions, which is why the core is white and the fringes split into rainbows. A log tone curve with auto exposure brings ten decades of intensity on screen: a segmented hexagonal mirror makes the six-spiked stars of space telescope photos, a grid of pinholes a lattice of tiny spectra, and the star field view stamps your aperture's point spread function onto every star.
Try it. Draw on the aperture to open it; right-drag or Shift-drag erases, and the pattern follows as you draw. Pick a shape from the chips or keys 1 to 0, C clears, T toggles the star field. Wheel zooms, Shift-wheel or the up and down arrows set exposure, and [ and ] resize the brush.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive diffraction pattern explorer 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 two canvases side by side: a small 128 x 128 "aperture" canvas (black background) and a larger canvas for the pattern. Draw a white hexagon on the aperture to start.
- Write a radix-2 complex FFT yourself (in place, on Float64Arrays, with a bit-reversal pass and butterflies). Use it to do a 2D FFT: transform every row, then every column.
- Copy the aperture into the middle of a 512 x 512 grid of zeros (zero padding makes the pattern finer), run the 2D FFT, and compute the intensity re^2 + im^2. Shift it so zero frequency is in the center.
- Raw intensity spans many orders of magnitude and will look like one bright dot, so display log(1 + I * 10^4) / log(1 + 10^4) as a gray value instead.
- Let me draw on the aperture with the mouse (white paints, right button erases) and recompute the pattern whenever it changes.
Once that works, make it beautiful:
- Render in true color. For a wavelength lambda the pattern is the same intensity map stretched in proportion to lambda, so for each screen pixel sample the intensity at radii scaled by 550 / lambda for about 16 wavelengths from 400 to 700 nm, weight each by an approximation of the CIE 1931 color matching functions, and convert XYZ to sRGB. The center turns white and the outer fringes split into rainbows.
- Add preset apertures: a hexagon, a ring, a double slit, a grid of pinholes and a segmented mirror of small hexagons.
- Keep editing smooth: a quick low-resolution pass while drawing, then a full-quality pass when the mouse stops.
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 star field where every star uses the pattern as its point spread function, a zoom control, or an animated aperture that rotates.
