Experiments

Velocity and ink live in 16-bit textures inside the graphics card. Every frame, a few shaders carry the liquid along, solve the pressure in 22 passes and remove whatever would compress it: these are the Navier–Stokes equations, which is why you get real swirls.

• WebGL2
• GLSL
• 16-bit textures

There are no models or triangles: every pixel shoots a ray and steps along a formula that says how far away the nearest surface is. The shapes, the soft shadows and the outline all come from that; the outline shows up where a ray just grazes a figure.

• WebGL2
• Raymarching
• Distance functions

Each particle moves in a WebGPU compute shader: it follows a noise field with no sources or sinks, or the point of the figure it was assigned. The trail builds up in a 16-bit texture. If your browser has no WebGPU, a smaller version runs on the CPU, and it tells you so.

• WebGPU
• WGSL
• Compute shader

A cellular automaton: every grain looks at its neighbors and decides. Sand falls and sinks in water, plants grow when watered, fire burns them, lava and water make stone, and steam ends up raining. Tens of thousands of cells in a byte array, 60 times a second.

• Canvas 2D
• Cellular automaton
• Typed arrays

No recordings: the kick, snare, hi-hat and bass are synthesized with oscillators and filtered noise. Notes are scheduled on the audio clock an instant before they sound, so the tempo doesn’t depend on how busy the browser is. The whole beat fits in the link.

• Web Audio API
• Sound synthesis
• State in the URL

A grid of points joined by threads. Each point remembers where it was one frame ago (Verlet integration) and the threads correct their length several times per frame. Stretch a thread too far and it snaps.

• Canvas 2D
• Verlet integration
• Pointer Events

Each number is the seed of a random generator: the same number always gives the same poster, on any computer. It’s drawn as SVG, so you can download it as a vector or as an image.

• SVG
• Seeded randomness
• File download