9x is a static site. There is no framework, no bundler, no package to install and no dependency of any kind — the whole thing is hand-written HTML, one stylesheet and a folder of ES modules, assembled by a build script that is itself about two hundred lines of plain Node.
This is not asceticism for its own sake. A page whose entire job is to run a numerical loop at sixty frames a second and put pixels on a canvas gains nothing from a virtual DOM, and a site that must still work in ten years gains a great deal from having nothing to update.
- Pages
- Generated at build time from content modules. Thirteen HTML files, no runtime templating.
- Figures
- Canvas 2D. One shared host handles sizing, the animation loop, the control panel and the URL; each machine only has to build its state and draw a frame.
- Dependencies
- None. Not in the site, not in the build, not in the tests.
- Payload
- A plate page and everything it needs is about 57 KB of source, or 18 KB compressed. No images at all beyond a favicon and a share card, and no network requests once it has loaded.
- Randomness
- mulberry32, seeded. Every figure is reproducible: the same address draws the same picture.
- Type
- System fonts only, so nothing is fetched and nothing reflows. A transitional serif for prose, the platform monospace for anything numeric.
- Colour
- Warm paper and ink, after the printed mathematical plate — Oliver Byrne's 1847 edition of Euclid is the obvious ancestor. Both themes are first-class; the figures read their palette from the stylesheet, so they re-ink themselves when you switch.
- Grid
- Three by three, which is where the name comes from: nine plates, and x for the times sign that Plate I is about.
- Testing
- 436 checks, in three parts. The mathematics is verified against values known independently — Collatz record-holders, Pascal mod 2 out of Rule 90, the 88 distinct elementary rules, the just-touching ratios, the golden angle's Fibonacci convergents. The browser code is then executed headless against the real generated pages inside a hand-written mini DOM, which mounts every plate and clicks every button. Finally the built site is served and crawled: every page, every link, every asset.
- Share card
- The image that appears when a link to this site is pasted somewhere is a three-by-three contact sheet of the nine plates. It is not a screenshot: the build runs the nine real machines through a software canvas written for the purpose, so the card cannot drift from the site.
- Licence
- Code MIT, prose CC BY 4.0.
On the palette
Byrne's Euclid replaced the letters of classical geometry with coloured figures, on the theory that a diagram you can see is worth more than a diagram you have to decode. It used vermillion, ultramarine and yellow on cream, and it is still one of the most beautiful mathematics books ever printed. The three accents here are a nod to it. The nine categorical colours used by the machines that need to distinguish things are tuned twice, once for paper and once for ink, so that nothing goes muddy in one theme to look good in the other.
On the number nine
Nine is three squared, which is why the index is a three-by-three grid rather than a list. It shows up twice more inside the cabinet, both times by accident and both times kept: Plate I set to the nine times table draws an eight-cusped epicycloid, and Plate IX played with nine corners draws a fractal of dimension about 1.62.
Running it yourself
The source is a directory. node build.mjs writes dist/; node tools/serve.mjs serves it; node test.mjs checks the mathematics; node test-dom.mjs runs the browser code headless; node check.mjs walks every page and every link. There is no install step, because there is nothing to install.