Spotlight #4 — Rendering & Generative Art

Simulations in category

GLSL shader sims

Core algorithms

Generative art is where mathematics becomes visible. Unlike physics simulations that model real systems, rendering sims are driven by pure pattern — recursion, noise, feedback loops, and wave equations. They're also the most GPU-intensive simulations on the site, so they showcase what the browser's WebGL pipeline can do.

The Simulations

GLSL Shaders & Ray Marching

☁️ Ray Marching Sphere tracing signed-distance functions — render impossible shapes with no geometry at all. Uses the classic SDF library: spheres, box, torus, smooth-min blending. GLSL Fragment Shader · SDF 🎵 Chladni Figures Sand organises itself into standing wave nodes on a vibrating plate. The pattern is the solution to a 2D wave PDE — rendered as a heat map updated in real time. 2D Wave PDE · Canvas 2D 🌈 Colours of Light Spectral decomposition of white light — how thin-film interference creates iridescent colour. CIE XYZ colour matching functions converted to sRGB on the GPU. GLSL · CIE Colour Science 〰️ Double Slit Interference Young's double-slit experiment with tuneable wavelength, slit width and separation. Huygens' principle rendered as a superimposed wave field. Wave Superposition · Canvas 2D

Reaction-Diffusion & Feedback Systems

🧫 Reaction-Diffusion Alan Turing's 1952 morphogenesis model — two chemicals (activator + inhibitor) generate spots, stripes and labyrinthine patterns. Ping-pong framebuffers on the GPU. Gray-Scott · WebGL Ping-pong 🔲 Cellular Automata Conway's Game of Life plus seven alternative rule sets: HighLife, Day & Night, Maze, Move, Replicator, Seeds, and 2×2. 1024×1024 grid computed on GPU. WebGL Compute · Texture Buffer 💨 Diffusion Brownian-motion diffusion visualised as a density field — particles executing random walks that collectively form a Gaussian spreading front. Brownian Motion · Canvas 2D ❄️ Crystal Growth Diffusion-limited aggregation and Lichtenberg branching — how snowflakes and mineral dendrites form their fractal shapes through stochastic growth. DLA · Fractal

Generative Geometry & Noise

🌿 Barnsley Fern A photorealistic fern generated by only four affine transformations and a random number. Michael Barnsley's canonical iterated function system example. IFS · Iterated Function System 🌀 Bifurcation Diagram The logistic map's route to chaos — every point on the x-axis is a parameter value, every point on y-axis is a steady-state population. The butterfly of chaos theory. Logistic Map · Chaos Theory 🌊 Bath Waves Shallow-water wave reflections in a bounded domain — resonance modes, standing waves, and edge diffraction, all driven by interactive touch/drag. Shallow Water Eq · WebGL 🫧 Bubbles Soap film physics — thin-film interference colours, surface tension forces, Plateau's laws for bubble packing, and dynamic coalescence on touch. Surface Tension · Thin-Film Optics

Special FX & Visualisers

🎼 Concert Hall Acoustics Ray-traced acoustic reflections inside a configurable hall — early reflections, diffuse reverberation tail, and a live RT60 readout as you resize the room. Acoustic Ray Tracing · Canvas 2D 📡 Doppler Effect Wavefronts compressing in front of a moving source, stretching behind — animated at any speed from subsonic to supersonic (Mach cone formation). Wave Propagation · Canvas 2D

Core Algorithms at Work

SDF Ray Marching Gray-Scott Reaction-Diffusion Diffusion-Limited Aggregation Iterated Function Systems Ping-pong Framebuffers Huygens' Wave Superposition Logistic Map (Chaos) Brownian Motion Thin-Film Optics Acoustic Ray Tracing

Recommended Learning Path

Visual first: Start with Barnsley Fern (pure maths, instant payoff), then Bifurcation Diagram (chaos theory in one image). Move to Reaction-Diffusion for GPU-accelerated patterns, and finish with Ray Marching — the hardest but most technically rewarding simulation in this category.

For Educators

Chladni Figures is the most classroom-ready simulation here — it directly demonstrates standing wave nodes and the relationship between frequency and pattern complexity. The Double Slit simulation covers wave-particle duality from the school physics curriculum. Both have adjustable parameters so you can reproduce textbook examples exactly.

Reaction-Diffusion is ideal for biology or chemistry lessons on pattern formation in nature — a genuinely surprising result that spots on a leopard or stripes on a fish can arise from just two interacting chemicals. This connects to Alan Turing's original 1952 paper, which is accessible to sixth-form students.