A blueprint ray tracer: prisms, lenses, mirrors and a fiber with real glass dispersion.
Every part on this blueprint is built from exact straight faces and circular arcs, and every ray is traced separately in 16 wavelengths. At glass it refracts by Snell's law with an index from the Sellmeier equation for real BK7 crown and SF11 flint, is trapped by total internal reflection when Snell's law has no answer, and leaves a fainter reflection behind sized by Fresnel's equations. So the flint prism fans white light into a spectrum, a fast lens shows both spherical and chromatic aberration, a telescope squeezes a wide beam into a narrow one, and a curved fiber carries light around a corner. The segments are splatted as anti-aliased lines into a floating point buffer, colored so the whole spectrum adds up to white, then tone mapped with a soft bloom.
Try it. Drag parts to move them, and turn them with the mouse wheel, Q and E, or the round handle above the selected part. Add parts from the toolbar, remove them by dropping them on it, press G to swap a part between crown and flint glass, and press 1 to 5 for the prism, telescope, aberration, fiber and periscope setups.
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 2D optics sandbox 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 and stays sharp on high-DPI screens, with a dark blueprint background and a faint grid.
- Represent every optical part as a list of straight edges, each with an outward normal: a triangular prism, a rectangular glass block and a flat mirror to begin with.
- Emit a beam of about 15 parallel rays from a light source. For each ray, find the nearest edge it hits, then reflect it at mirrors, or refract it at glass with Snell's law (n = 1.5). Work out whether it is entering or leaving from the sign of the ray direction dotted with the normal, and use total internal reflection when Snell's law has no solution. Draw each segment as a line.
- Let the mouse drag parts around and the wheel rotate them, retracing every frame.
Once that works, make it beautiful:
- Trace each ray in about 12 wavelengths, with an index that depends on wavelength (a Cauchy formula is fine, or the Sellmeier equation for real glasses) and a color for each wavelength. Draw with globalCompositeOperation = "lighter" so the colors add back to white where they overlap, and the prism splits white light into a rainbow.
- Add lenses built from two circular arcs, and watch the rays near the edge focus too early.
- Add Fresnel reflectance so each glass surface leaves a faint reflected ray behind.
- Add a screen that shows the colors that land on it.
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 curved optical fiber, a float buffer with bloom for glowing beams, or a two-lens telescope.
