A playground on the home page
fragmentcolor.org has opened on the playground since October 23. From September until then, the home page cycled through six of our shader artworks behind the title. Now the canvas fills the first screen, with its code in an editor alongside.
The 0.12.6 notes announced it in passing. Since that release, the playground has gained a demo dropdown, a dive into the Mandelbrot set, and gestures to steer it.
Each edit rebuilds the program, and the sliders follow main.js. Numbers and colors in the code get inline sliders and swatches, the Library bar adds functions from the shader library, and generated tabs show the same program in Rust, Python, Swift, and Kotlin, beside an index.js tab that runs the files as a Vite project.
+ Add on that bar opens a searchable picker over the whole shader library.
Those language tabs are full programs. Only the fragment demos share a template. The compute ones bring their own in every language, and Mandelbrot’s Rust tab even asks for the num-bigint and num-traits crates. On the home page, the install line follows the tab you pick. The canvas also has a fullscreen button in its lower right corner, and the divider beside it keeps its place across reloads.
Fifteen demos
Section titled “Fifteen demos”- Cells: Worley noise under a fractal warp.
- Particles: a million particles that a compute pass moves and an instanced draw renders.
- Life: four species of particles that chase or avoid one another.
- Mandelbrot: the deep zoom below.
- Shapes: a circle, a star, and a hexagon blended by Inigo Quilez’s smooth union and colored by distance in the logo’s palette.
- Kaleidoscope: a Truchet tiling bent through mirror segments and a twirl.
- Halftone: a lit sphere printed in dots of varying size on a rotated grid.
- Raymarch: a twisted box that melts into a torus, sphere traced under Blinn-Phong and rim light.
- Post Effects: six screen effects over a test card, from curvature to grain, with the raw card left of the pointer.
- Nebula, Swirl, Rose Window, Plankton, Monolith, and Signal, shown below.
Particles, Life, and Mandelbrot run compute shaders. Without WebGPU, they play a recording.
A demo can also name the FragmentColor release it needs, and the picker leaves it out while the site loads an older one. The page never has to explain a version gap. Life asks for 0.12.6. It counts particles with atomicAdd and gives each of its four passes separate uniforms, two things 0.12.5 couldn’t do.
Down to 1e-1000
Section titled “Down to 1e-1000”Mandelbrot is the newest demo. It dives into a spiral in Seahorse Valley until the view is 1e-1000 tall, then zooms back out, with the depth printed in the bottom left corner. The Infinite Mandelbrot zoom tutorial builds it step by step.
The first scroll, drag, or pinch ends the dive.
From then on, the center of the view is a BigInt whose precision rises with the zoom. Wherever you head, a fresh reference orbit grows a little on each frame and takes over once it covers the screen. When nothing moves, only the render pass runs.
Gestures came to the playground with Mandelbrot. They reach only the demos that ask for them, and everywhere else the wheel scrolls the page as usual.
The artworks
Section titled “The artworks”The dropdown ends with the artworks from the old home page and the /demos gallery. Holding, clicking, dragging, and scrolling drove them there. Those inputs are now their press, pulse, drag, and zoom sliders. Monolith opens at 60% of every slider, and Rose Window in full bloom.
Pick a demo on fragmentcolor.org and change a number.
Rafael