Glonce

Interactive tool renders topological surfaces as hand-inked drawings

toolsThe Glonce editorsHacker News🔥49Glonce rating49Impact35Novelty45Relevance40Surprise35Players20Credibility82

A web page titled A Topological Picture Book, Rendered lets a viewer rotate and zoom classic topological surfaces, such as Boy's surface and Morin's surface, while the page draws them live as hand-hatched pen-and-ink illustrations in the manner of G. K. Francis's 1987 book A Topological Picture Book. Interaction is direct: drag to turn the model, shift-drag to roll it, scroll to approach; on a touch screen one finger turns, two fingers pinch to approach and twist to roll.

The drawing itself is built from strokes rather than pixels. Silhouettes are computed as the zero set of n dot v across the mesh, using interpolated normals so the lines chain into smooth curves; boundaries and the double curve of an immersion are added as further chains. Every line is rendered as a tapered ribbon with a broad-nib pen model, its weight growing on the shadow side and toward the viewer, with a coherent hand wobble worked in. Visibility is resolved on the GPU: a hidden-line pass draws occluded segments dashed, and a one-sided paper halo under each near contour cuts the lines that pass behind it. Hatching comes from streamlines of the surface's principal-curvature line field, traced at build time in three nested densities, with the second density running along the other principal direction to produce cross-hatching; tone decides which family of strokes gets inked and where each one feathers out, and highlights are left as bare paper. To keep the two hatching families continuous across the loci where the two principal curvatures are equal and opposite, the page orders principal directions by signed curvature rather than magnitude. Contour chains are smoothed before inking, and strokes overshoot their endpoints in the style of sketchy line rendering; the ink pooling at stroke starts and the ragged bleed into the paper grain are effects hand-tuned for this page specifically, not lifted from any single paper. Labels are hand-lettered, pinned to surface points with a leader line, and dimmed when their point is hidden.

The mathematics behind the shapes is checked, not just borrowed. Boy's surface uses the Bryant-Kusner parametrization, traced to R. Kusner's 1987 paper on conformal geometry and minimal surfaces; the page states it verified numerically, to machine precision, that the antipodal boundary gluing and threefold symmetry hold. A general-p version of that formula is exposed as a kusner(u,v,p,d) helper, with its constant fixed by checking numerically that the pre-inversion surface is minimal (the page notes that a related p=2 construction using the square root of 3 in place of twice the square root of 3 fails that test). F. Apéry's 1987 book on models of the real projective plane supplies a separate Cartesian family, tabulated elsewhere on the mathcurve.com site, that yields the page's Morin-surface preset and, with a different parameter, a second construction of Boy's surface.

The page is also a tool: range and formula fields accept ordinary JavaScript math expressions (trigonometric, hyperbolic, exponential and other standard functions, plus a square helper), so a visitor can type in a custom implicit or parametric surface rather than only viewing presets. Built-in helper functions cover common cases: boy(u,v) gives the Bryant-Kusner immersion of the real projective plane, torusknot(u,v,p,q,R,r,a) gives a tube around a (p,q) torus knot, apery(u,v,n,k) gives Apéry's family (with specific parameter values producing the Morin and Boy's surface presets), and kusner(u,v,p,d) gives the Kusner-Bryant family with an adjustable center of inversion.

Every rendering technique on the page is credited to a published source. The contour-and-hatching pipeline traces back to a 2019 tutorial on line drawings from 3D models and to 1999-2000 SIGGRAPH-era work on silhouette extraction and curvature-based hatching; the paper haloes come from a 1979 SIGGRAPH paper on the haloed-line effect for hidden-line elimination; the sketch-like overshoot and wobble draw on a 1994 Eurographics paper on stylized line rendering; stroke placement and pen-and-ink texture cite 1994 and 2001 SIGGRAPH papers; the implicit surfaces are polygonized with the marching-cubes algorithm in its tetrahedral variant, and the double-curve computation uses a standard 1997 ray-triangle intersection test. The text does not name who built the page, give a publication or last-update date, name a specific graphics library such as WebGL or Three.js, or state any performance figures such as frame rate or supported browsers and devices.

Key facts

  • The page renders topological surfaces such as Boy's surface and Morin's surface as hand-hatched pen-and-ink illustrations, styled after G. K. Francis's 1987 book A Topological Picture Book.
  • Contours are extracted as the zero set of n dot v using interpolated normals for smooth chains; a GPU hidden-line pass dashes occluded segments and paper halos cut lines behind near contours.
  • Hatching traces streamlines of the principal-curvature field at three nested densities computed at build time, with principal directions ordered by signed curvature rather than magnitude so the hatching families stay continuous where the two curvatures are equal and opposite.
  • Boy's surface uses the Bryant-Kusner parametrization from R. Kusner's 1987 paper, which the page says it checked numerically to machine precision for antipodal gluing and threefold symmetry; F. Apéry's 1987 Cartesian family supplies the Morin-surface preset and an alternate Boy's-surface model.
  • Visitors can type custom surfaces as JavaScript expressions or use built-in helper functions (boy, torusknot, apery, kusner) for standard presets, controlling the view by drag, scroll, or touch gestures.

Why it matters

This is not an AI story, and it is not trying to be one: it is a from-scratch implementation of decades of non-photorealistic rendering research, built to reproduce the specific hand-drawn look of a 1987 mathematics textbook inside a browser. Its interest is craft rather than novelty: nearly every visual effect on the page, from the paper halos to the sketchy stroke overshoot, is traced to a named published technique rather than invented, and the harder mathematical claims (the Bryant-Kusner symmetry check) are stated as numerically verified rather than assumed.

Who it affects

The audience is narrow and specific: mathematicians and topology students who know Boy's surface and Morin's surface from illustrations like Francis's book, computer-graphics researchers and practitioners interested in non-photorealistic rendering, and anyone curious how classic hand-drawn mathematical illustration can be reproduced procedurally. It is not aimed at a general audience and does not touch commercial software, AI models, or consumer products.

How to use it

The page runs directly in the browser: drag to rotate a surface, shift-drag to roll it, scroll to zoom in, or use the equivalent one- and two-finger touch gestures on mobile. Beyond the built-in presets, formula and range fields accept ordinary JavaScript math expressions, so a visitor can define a custom surface, and dedicated helper functions (boy, torusknot, apery, kusner) generate specific known immersions and knots without writing the underlying formulas by hand. No price, account, or installation is mentioned in the source.

How solid is it

The page backs its technique choices with roughly fifteen cited sources spanning 1979 to 2019, covering silhouette extraction, curvature-based hatching, haloed hidden lines, sketchy stroke rendering, pen-and-ink texture placement, and surface polygonization, and it distinguishes borrowed techniques from effects it says are hand-tuned specifically for this page. On the mathematical side, it states that the Bryant-Kusner parametrization's antipodal boundary gluing and threefold symmetry were checked numerically to machine precision, and that the general-p Kusner formula's constant was fixed by a similar numerical minimality check.

Risks and caveats

The source text does not name who built the page, give any publication or last-updated date, name a specific rendering technology (it refers only to 'the GPU' and 'JavaScript expressions'), or state performance figures such as frame rate or device support. The Hacker News discussion is small, 92 points and 11 comments at last check, which is normal for a niche mathematical-art submission but means the technique claims here rest on the page's own description rather than independent scrutiny.

“Hand-hatched surfaces after the mid-century manner of Francis, Apéry, Hilbert-Cohn-Vossen.”

— the page's introduction