A browser engine that draws topological surfaces as hand-inked pen-and-ink art

This is an interactive web project that renders mathematical surfaces — Boy’s surface, Morin’s surface, torus knots, and other immersions of the real projective plane — in the hand-hatched pen-and-ink style of George Francis’s 1987 book ‘A Topological Picture Book.’ The models can be rotated, rolled, and zoomed in real time, but rather than shading pixels, the engine draws actual strokes: tapered ink ribbons with a simulated broad-nib pen, weight that thickens on the shadow side, and deliberate hand wobble, overshoot, and ink pooling to mimic a draftsman’s line.

The rendering pipeline stitches together roughly two decades of non-photorealistic-rendering research. Silhouettes are extracted as the zero set of n·v on the mesh using interpolated normals, then chained into smooth contours; boundaries and the self-intersection (double) curves of each immersion are added the same way. Visibility is resolved on the GPU, with occluded segments drawn as dashed lines and a paper-colored halo cutting lines that pass behind a nearer contour. Hatching is precomputed as evenly spaced streamlines of the principal-curvature field in three nested densities, drawn in object space so the strokes never swim as the model turns, with cross-hatching reserved for dark regions and highlights left as bare paper. The implicit surfaces themselves are polygonized with a marching-tetrahedra variant, and users can type their own parametric formulas.

The piece is essentially a faithful, working synthesis of the NPR literature — Hertzmann and Zorin’s curvature-directed hatching, Appel’s haloed-line hidden-line trick, Jobard–Lefer streamline spacing, Praun’s real-time hatching, and more — bent toward a specific mid-century mathematical-illustration aesthetic rather than a generic sketch filter. Along the way the author numerically validated the Bryant–Kusner parametrization of Boy’s surface (confirming antipodal boundary gluing and threefold symmetry to machine precision), making it as much a small piece of computational geometry verification as a graphics demo.