Chapter 12 · the same engine, eleven different worlds
Chapter 11 shipped one starfield. That answers “can you do a starfield.” This page answers the question underneath it: what else is a particle system for — and what happens when one turns into another.
Move to push · click for a shockwave · hold to make a well · 1–9, 0, − switch systems · space pauses · C opens the controls
Paused. Your system asks for reduced motion, so nothing moves until you press Play (space), Step (.) or click the stage.
WebGL is unavailable in this browser, so the stage cannot run. Everything below still explains how each system works.
Same point sprite. Same vertex shader. Same additive blend. What changes is the integrator, and that is the entire argument — the rendering is cheap and the simulation is where the craft lives. These are not eleven shaders wearing a costume; they are eleven different physics, sharing everything that is not the physics.
Every one of them reads the same pointer, and every one of them answers it differently. That is the comparison worth making. The part that is new is that none of them is a cut: pick another and the particles you are looking at turn into it.
Switching a system does not reseed it. Every particle keeps its position and its velocity, and the new integrator simply starts acting on them. Where a system has a home for each particle — the lattice’s torus, the wordmark’s letters, the galaxy’s orbits, the bloom’s grid — a spring toward that home is blended in for the length of the morph, so you watch the reorganisation instead of a jump.
Colour, size and brightness are snapshotted at the switch and blended to the new system’s values by the same ease; the palette ramp crossfades stop by stop. When the two systems use different numbers of particles, the ones that join are cloned from existing particles and fade in, and the ones that leave coast and fade out. The morph is counted in simulation steps, not wall-clock time, so it is exactly as reproducible as everything else here.
Open them with C or the Controls button. Count, size, glow and trails shape what you see; force, damping and speed change the physics. Each system maps them onto its own constants (the table above names them), so a slider that means “gravity” for the wells means “central mass” for the galaxy and “circulation” for the vortices. There are 9 palette choices, one of them the brand ramp, and a randomise button that builds a new palette in OKLCH so the stops stay perceptually even.
The whole configuration is in the URL hash: system, variant, count, size, glow, trails, force, damping, speed, palette (a preset, or the four colours of a randomised one), seed, pointer mode and whether adaptive quality is on. The keys are short so a link stays short, and every value is clamped on the way in, so a hand-edited or hostile hash can at worst give you an ugly picture. Trails are written only when you have set them; absent means “this system’s own default”. The microphone is never in the link and never starts from one.
Save PNG writes the canvas at its current backing-store size, which on this screen is – pixels. Record writes 5 seconds of the canvas as a WebM through MediaRecorder where the browser has it, and says so where it does not. The simulation is deterministic: the same hash and the same number of steps give the same picture, which is how the preview reel for this chapter was captured.
The simulation runs on the CPU in typed arrays and steps at a fixed 60 Hz; the frame rate decides how many steps are owed, never how big they are. The pool holds 60,000 particles and the drawing buffer is capped at 2.2 megapixels, which is a fill budget rather than a promise about any particular machine. The count also scales with the area of the screen, down to 35% of what you asked for on a phone, because the same particles in a quarter of the pixels are four times as bright and cost a phone more than they cost this desktop.
An adaptive governor measures the frame time as an exponential average and decides once a second. Slower than 22 ms and it multiplies the particle budget by the ratio of the target to the measured frame time, but by no more than 0.8 in one step, down to 30%; at the floor it lowers the drawing-buffer scale, down to 55%. Faster than 15.6 ms for 3 seconds in a row and it gives it back, slowly, so it does not oscillate. The numbers in the controls panel — frames, frame time, simulation time, particles drawn and the budget — are measured live; none is typed in.
The loop stops when the tab is hidden, and restarts with a fresh clock so
it does not run a second of physics in one frame. If the browser reports
prefers-reduced-motion the page starts paused on a frame the
system has already been advanced to, and motion happens only when you ask
for it: Play, Step, a click, or choosing another system.
Move the pointer. Click. Hold. 1–9, 0 and − switch systems, R reseeds, N randomises, T starts a tour that walks through every system, H hides the words so you are looking at nothing but the particles. Switch while something is happening, and watch what it turns into.
It runs on software rendering — there is no GPU requirement, and the fill rate is capped rather than assumed.