Real ray tracing through a model human eye that focuses, blurs and wears glasses.
A cross-section of the Navarro schematic eye: an aspheric cornea, aqueous humor, a crystalline lens whose curvatures, thickness and index change with accommodation, and the vitreous in front of a curved retina. Rays are traced in 3D through each conic or toric surface with Newton's method and the vector form of Snell's law, and the lens accommodates by bisection to put the focus on the retina, within a range that shrinks with age. A long eye is myopic, a short one hyperopic, a toric cornea makes two focal lines, and sphere and cylinder spectacle lenses prescribed by the same tracer fix them. The inset is what the retina receives: hundreds of rays per color form a spot diagram, binned into a point-spread function per channel and convolved with an eye chart, so the blur, astigmatic streaks and color fringes all come from the optics.
Try it. Drag the chart, or the distance slider, to bring the target closer and watch the lens round up. Pick Myopia, Hyperopia or Astigmatism, drag the age slider past 45 for presbyopia, and click Glasses (or the eye) to prescribe a correction. Keys: 1 to 4, G, the arrows, and [ and ] to change the pupil.
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 ray-traced cross-section of the human eye 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. Work in millimeters, scaled to the screen, with the optical axis horizontal and light coming from the left.
- Model a simple schematic eye with four spherical surfaces: cornea front (radius 7.7 mm, index 1.376 behind it), cornea back (radius 6.5 at 0.55 mm, index 1.336), lens front (radius 10 at 3.6 mm, index 1.42) and lens back (radius -6 at 7.6 mm, index 1.336), with the retina 24 mm behind the cornea.
- Trace about 15 rays from a distant target (parallel to the axis) through a 4 mm pupil: intersect each sphere, compute the normal, and bend the ray with the vector form of Snell's law. Draw the rays and the surfaces.
- Draw the eye itself: a white sclera, a pink retina, a blue iris and a translucent lens.
Once that works, make it beautiful:
- Add a target-distance slider. Accommodate by making the lens front more curved, and use bisection to find the curvature that puts the focus on the retina. Limit it by an age slider so older eyes cannot focus up close.
- Add myopia and hyperopia buttons that lengthen or shorten the eye, and a glasses toggle: a thin lens 12 mm in front of the cornea whose power is found by the same bisection.
- Show what the retina receives: trace a few hundred rays through the whole pupil, record where they land on the retina, and blur a small eye chart by summing shifted copies of it, one per ray.
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 an astigmatic cornea with different curvatures in two directions, chromatic aberration by tracing red, green and blue separately, or a pupil that shrinks in bright light and sharpens the image.
