24 techniques
The pencil box
A handful of techniques do nearly all the work. Every scene lists the ones it uses, and each one here lists the scenes it is in.
- The frame loop
- requestAnimationFrame calls one draw function about sixty times a second. Each frame is a picture of the world at time t. in Chiro, Tinto
- Wobbly ink
- Lines are cut into tiny steps and nudged sideways by smooth noise, and their width breathes like pen pressure. in Paus, Rampon, Vad, Tinto, Vahi, Mithagar, Veranda
- Hatching
- Tone comes from short parallel strokes, packed tighter where it is darker, instead of smooth gradients. in Rampon, Mankurad, Vad, Ferry, Dar, Posta, Mithagar, Taverna, Veranda
- Boiling lines
- The wobble is re-rolled about ten times a second, so even a still drawing shimmers like hand-drawn animation. in Rampon, Mankurad, Vad, Cutting chai, Tinto, Ferry, Nod
- Smooth noise
- Perlin noise is randomness that flows: nearby inputs give nearby outputs. It moves wind, water, flame and paper grain. in Paus, Rampon, Khazan, Mankurad, Neel, Cutting chai, Tollem, Saanj, Toran, Shet, Ghat, Chiro, Abri, Maun, Nod
- Seeds
- A seeded random generator draws the same picture for the same seed. Change the seed and a new one appears. in Kolam, Rampon, Vad, Neel, Shet, Chiro, Abri, Kairi, Mosaico, Vel, Maun, Ferry, Vahi, Dar, Pahat, Posta, Mithagar, Taverna
- Easing and timelines
- Story beats are windows of time. Easing curves make things start and settle the way real objects do. in Kolam, Mankurad, Neel, Cutting chai, Tollem, Kairi, Mosaico, Vel, Prahar, Ferry, Vahi, Dar, Pahat, Kantar, Posta, Taverna
- Particles
- Thousands of tiny marks, each following a few simple rules: flour, rain, sparks, fireflies. in Paus, Kolam, Khazan, Mankurad, Cutting chai, Saanj, Toran, Shet, Ghat, Nod, Posta, Taverna
- Emergence
- Simple local rules grow a whole form: mirror curves, branching trees, fireflies falling into step. in Kolam, Khazan, Vad, Saanj, Ghat, Chiro
- Paper and grain
- Anything that does not move is painted once into an offscreen canvas and reused every frame. in Paus, Kolam, Khazan, Mankurad, Neel, Tollem, Toran, Abri, Kairi, Mosaico, Themb, Prahar, Maun, Ferry, Nod, Vahi, Dar, Pahat, Kantar, Posta, Mithagar, Taverna, Veranda
- Interaction
- The pointer is just more input to the draw function. Wipe, scatter, stamp, snuff. in Paus, Khazan, Neel, Cutting chai, Tollem, Saanj, Toran, Shet, Ghat, Chiro, Abri, Kairi, Mosaico, Vel, Themb, Tinto, Prahar, Ferry, Nod, Vahi, Dar, Pahat, Kantar, Posta, Mithagar, Taverna, Veranda
- Ropes and springs
- Points that remember where they were, tied together by sticks that keep their length. Garlands hang, swing and settle on their own. in Toran, Themb, Dar, Kantar, Posta, Taverna, Veranda
- Fields
- A value or a direction at every point: which seed is nearest, which way the wind blows, how high the hill is. Cracks, grass and contour lines are read off them. in Saanj, Shet, Ghat, Chiro, Abri, Kairi, Themb, Veranda
- Tilings and grammars
- One tile and a rule for turning it, or one sentence that rewrites itself. Floors, borders and vines grow from very little. in Kairi, Mosaico, Vel
- Perceptual colour
- Colours mixed in a space built around the eye (OKLCH), so a sky can go from apricot to indigo without a grey middle. in Tollem, Saanj, Chiro, Abri, Prahar, Maun, Pahat, Mithagar, Veranda
- Scroll as a timeline
- Where the page is scrolled becomes the playhead. The reader decides how fast the drawing unfolds.
- Declarative vectors
- Shapes are elements the browser animates for you: one dash as long as the path slides into place, and the line draws itself. in Vel
- The GPU
- A tiny program runs once for every pixel, all at the same time on the graphics card. Light, water and glass at full resolution. in Tollem, Themb
- A pure model
- What to draw is a plain function of time, seed and settings. It runs anywhere, even in Node, so it can be tested; drawing it is a separate step. in Mosaico, Nod, Vahi, Dar, Pahat, Posta, Mithagar, Taverna, Veranda
- Real state
- A scene can show something real, such as upload progress. Then only the real number moves it, time stands still, and the same number is also read out as text. in Kolam, Khazan, Mankurad, Vad, Neel, Cutting chai, Shet, Ghat, Kairi, Prahar, Ferry, Vahi, Posta, Mithagar
- Calm zones
- Text placed over a scene reports its boxes, and motion quietens in and around them so the words stay easy to read. in Kolam, Khazan, Mankurad, Vad, Neel, Cutting chai, Saanj, Toran, Shet, Ghat, Chiro, Abri, Mosaico, Vel, Themb, Tinto, Prahar, Maun, Ferry, Nod, Vahi, Kantar
- Fallbacks
- When the graphics card is missing or its context is lost, the scene draws a simpler version on a 2D canvas instead of going blank. in Themb, Veranda
- The quality governor
- The scene times its own frames. When they run slow it draws less detail; when there is room it draws more. in Saanj
- Synthesised sound
- A soundscape tied to what a scene already draws: no audio files, only Web Audio oscillators, only with the global sound switch on and a user gesture, and only for what is actually on screen. in Rampon