the fluid in liquid is real

The technique is not ours. It follows the stable fluids method Jos Stam published in 1999, which made real-time fluid simulation practical by choosing steps that cannot blow up, however hard you push them. The code in dopa is re-typed and tuned from Pavel Dobryakov’s open-source WebGL fluid simulation, which is released under the MIT licence. What we added is the tuning, the four modes, the scaling for phones and the way it fits into the playground.

The screen is covered by two grids of numbers, held as textures on the graphics card. One stores how fast and in which direction the fluid is moving at each point. The other stores the dye, the colour you actually see. Every frame runs the same five steps.

1. Move the motion along. The fluid carries its own velocity with it, so each cell looks back along the flow to see what has arrived there.
2. Put the swirl back. Simple simulations lose their eddies quickly as they smear out, so this step measures how much each region is spinning and gives that spin a push. It is why the curls keep their energy instead of turning to syrup.
3. Keep it from compressing. Water cannot be squeezed into a smaller space, so the simulation solves for pressure over 16 repeated passes and removes any part of the motion that would squash the fluid. More passes would be slightly more accurate and slower, and 16 holds a smooth frame rate.
4. Carry the colour. The dye moves along the corrected flow.
5. Draw it. The brightest parts of the dye bloom softly into their surroundings.

When you drag, the toy injects a burst of velocity and a splash of dye at your finger, pointing the way you are moving, and a faster stroke pushes harder. That is why a slow drag and a quick one look nothing alike, and why the same shape never comes out twice.

Motion and colour do not need the same detail. The velocity grid is coarse, 128 cells across, because the broad shape of the flow is what matters there. The dye grid is far finer, 768 across, because that is what your eye reads. Splitting them is most of how a full-screen fluid runs smoothly in a browser tab.

On phones, and on any device with a touch pointer or a low pixel density, liquid lowers both, to 512 for the dye and 96 for the motion, and caps how sharply it renders. At phone sizes it still looks crisp, and every frame costs considerably less.

Flow, bloom, swirl and zen run exactly the same simulation. They differ in a handful of numbers, and each of those numbers means something physical.

• Dye dissipation is how fast colour fades. Every step divides the dye by one plus this rate, so a higher number fades faster. Bloom has the lowest, so colour lingers and glows. Zen has the highest, so the canvas clears and stays calm.
• Velocity dissipation is how long the fluid keeps moving once you let go. Swirl keeps it lowest and goes on turning well after your stroke. Zen keeps it highest and settles.
• Curl is the strength of the swirl push: 52 in swirl, 32 in flow and 12 in zen.
• Splat force is how hard your finger pushes. Swirl pushes hardest and zen most gently.

A fluid simulation is one of the heavier things a web page can run, so liquid is careful with it. It runs while you are touching it, coasts for a moment so your last stroke can settle, and then stops, leaving the final frame on screen instead of spending your battery in the background.

Drops are paid for movement you add up over time, about a full sweep at a time and never faster than a short cooldown, so idle swirling earns a trickle rather than a flood. And on a device that cannot run the simulation, liquid shows a still preview instead of a broken canvas, while the rest of dopa carries on as normal.