slop.boutique

A lab for computation and intelligence as material and medium. Run by Manuel and Ramon.

039 · 23 October 2026 · math · education · shaders

Uncommon Math

An interactive book on the mathematics behind 195 unusual web demos, with 25 chapters, 113 runnable sketches and a map of every demo.

Previewin your browser
Six sketch outputs from the book: domain-warped noise, a flow field, a mesh gradient, Worley cells, a text-mode doom fire and a falling-sand automaton

In early access for subscribers until 22 November 2026. Subscribe to run it now.

Subscribe →

An interactive book, not a tool. It explains the mathematics, algorithms and techniques behind 195 stylistically unusual web demos, the ones collected on webdev.teknium.io, from dithered globes and liquid glass to braille charts, split-flap reels and Winamp. Each chapter derives the formulas the libraries actually run, and a bench beside the text runs small sketches of them.

  • 25 chapters in eight parts: foundations (spaces, randomness, easing), fields and shapes (noise, SDFs and raymarching, curves, globes, Voronoi), image and colour (palettes, dithering and halftone, text-mode graphics, filters, CRT simulation), light, dynamics (springs, particles, fluids), marks and type, sound, and machines and the page.
  • 113 runnable sketches: each chapter has four or five. You can pause, restart and drag their parameters, or edit the source and run it again.
  • Math and figures: formulas typeset with KaTeX and about seven SVG figures per chapter, plus key points and further reading at the end of each chapter.
  • 195 demos, mapped: every demo has a card with its library, framework, install line, licence and a link to the live demo. The Demo atlas appendix sorts them into the site's 20 sections, each with the chapter that explains it.
  • Toward domain APIs: the second appendix merges the small vocabularies each chapter proposes into one layered library design.
  • Search the whole book from the contents pane. The browser remembers the chapter you were reading and your edits to the sketches.

The demos and their libraries belong to their authors (most are MIT or Apache-2.0, and each card names its licence). The live demos are on webdev.teknium.io. Formulas are rendered with KaTeX.

The full reader: contents on the left, chapter 1 on spaces and projection in the middle, and the bench on the right with the fit-and-image-uv sketch, its sliders and its source
The full reader: contents on the left, chapter 1 on spaces and projection in the middle, and the bench on the right with the fit-and-image-uv sketch, its sliders and its source
Domain-warped fBm noise from chapter 4, rendered as swirling marbled pinks and browns
Domain-warped fBm noise from chapter 4, rendered as swirling marbled pinks and browns
Chapter 12 on text-mode graphics, with the doom-fire sketch running on a character grid beside its source and sliders
Chapter 12 on text-mode graphics, with the doom-fire sketch running on a character grid beside its source and sliders
Worley cellular noise from chapter 4: grey cells with their red seed points
Worley cellular noise from chapter 4: grey cells with their red seed points
A figure in chapter 11: white-noise, Bayer and blue-noise threshold maps with their radial power spectra
A figure in chapter 11: white-noise, Bayer and blue-noise threshold maps with their radial power spectra
A flow field of 1100 particles traced through noise, drawn as dark converging streamlines
A flow field of 1100 particles traced through noise, drawn as dark converging streamlines
A figure in chapter 11 building Bayer threshold matrices by recursion, from 2×2 to 8×8, with the dither patterns they produce
A figure in chapter 11 building Bayer threshold matrices by recursion, from 2×2 to 8×8, with the dither patterns they produce
A mesh gradient sketch in magenta, violet and orange bands
A mesh gradient sketch in magenta, violet and orange bands
A demo card on the bench: Animated ASCII gallery, with its library, tags, npm install line, licence, links and the chapters that use it
A demo card on the bench: Animated ASCII gallery, with its library, tags, npm install line, licence, links and the chapters that use it
The segment encoder sketch: amber 16-segment and red 7-segment displays with their bit patterns
The segment encoder sketch: amber 16-segment and red 7-segment displays with their bit patterns
Appendix A, the demo atlas: every demo by site section with the chapters that explain it
Appendix A, the demo atlas: every demo by site section with the chapters that explain it
The falling-sand automaton from chapter 24: sand piles and water pooling under two ledges
The falling-sand automaton from chapter 24: sand piles and water pooling under two ledges