WebGL is cool (when it isn’t used for fingerprinting, ahem). You can play around with all the shaders that you have been seeing in the background here! Have fun :3
The shader playground needs JavaScript and WebGL2. The notes below explain how the patterns work without the live canvas.
What the knobs do
A fragment shader is a little program that chooses a colour for each pixel. These patterns are calculated from coordinates and time.
Most patterns have a useful stopping point: endlessly enlarging a smooth curve eventually gives you a smooth curve filling the screen. Each preset has its own zoom limit. The Mandelbrot preset has smaller structures nested around its boundary, so it allows much deeper exploration. Its iteration count and the GPU’s number precision still put a practical limit on detail.
A few things to try
- Seahorse at the discotheque: zoom toward the middle, then pan along the boundary between the dark interior and the coloured exterior. Smaller spirals are hiding there :P
- Stairs all the way down: zoom slowly, it will be a mesmerizing trip.
- Dancefloor drainage system: add six mirror sectors, a little warp, and a slow reverse speed.
- Xerox of another dimension: zoom in, then move slightly. More folds are calculated at closer zoom levels.
The coordinate warps and layered motion take inspiration from Ryan Geiss’s MilkDrop preset authoring guide, but these are original GLSL patterns, not imported MilkDrop presets. The playground uses the same renderer as the site background. The background shaders are disabled on purpose on this page.