Is this a real fluid solver or a particle trick?

A real solver. The fluid mode discretizes velocity and dye on an Eulerian grid and runs the classic 'stable fluids' pipeline every frame: semi-Lagrangian advection (unconditionally stable), explicit diffusion, a Jacobi-iterated pressure projection solving the Poisson equation to keep the field divergence-free, and vorticity confinement to preserve eddies. The particles mode is a separate Lagrangian engine — damped Verlet integration with force centers, springs and collisions.

Why do my vortices fade away?

Numerical diffusion: advection on a coarse grid dissipates small swirls. That's exactly what the vorticity slider counteracts — confinement measures the local curl gradient and re-injects rotational force. Raise it for lively turbulence; note it amplifies existing curl, so inject velocity first.

How do the attractor and repulsor forces work?

Force centers apply an inverse-square (configurable falloff) pull or push. In gravity mode strength scales with particle mass; in Coulomb mode it's charge × center strength with a k constant, so like charges repel. The interactive canvas spawns an attractor at your pointer in particle mode; the exported engines hard-code equivalent force loops.

Why can't I set 100,000 particles on my phone?

The ceiling adapts to reality: 100k is the WebGL2 desktop target. Compact devices cap at 40k GPU, mobile at 12k GPU, and any device without WebGL drops to 2,000–5,000 CPU-mode particles — because a five-fps demo teaches nothing. The stats line always shows your class (mobile/compact/desktop), renderer (GPU/CPU) and resulting cap.

What's the difference between the preview and the exports?

The interactive canvas caps live drawing at 400 particles for interactivity; the exports are full engines sized to your slider values — Matter.js for rigid bodies, PixiJS for a ticker-driven render loop, and a zero-dependency Canvas2D page for anywhere JS runs. All three mirror your gravity, damping and restitution settings.

Can I use the fluid in my own project?

The vanilla Canvas export is the N-body engine; for fluids, the architecture (advection → diffusion → projection → confinement on a typed-array grid) ports directly to WebGL shaders the way GPU Gems chapter 38 describes. Start from the solver's step order — it's the same one this tool runs.

Does touch input work?

Yes — the canvas is pointer-event based (touch-action disabled), so finger drags inject dye/velocity exactly like mouse drags, including stroke speed scaling.

Is anything computed server-side?

No. Both engines are pure typed arrays running in your tab; there is no backend, no upload, and the exports are generated locally from your parameters.

2D Fluid Dynamics & Particle Physics Sandbox

An Eulerian Navier-Stokes fluid with vorticity confinement, plus a Verlet N-body particle engine — inject dye with your pointer, tune the forces, then export runnable Matter.js, PixiJS or vanilla Canvas code.

ready · ceiling 5,000 (desktop, CPU)

Drag on the canvas to inject dye and velocity — the solver advects, diffuses and applies vorticity confinement each frame.

PhysicsGravity120px/s²Vorticity12Particles2,000

WebGL2 uses transform feedback so position and velocity stay on the GPU up to the device ceiling. Without WebGL2, the same control is capped at 2,000–5,000 particles and rendered with Canvas2D.

How it works

Fluid:semi-Lagrangian advection, explicit diffusion, 16 Jacobi pressure iterations (Poisson) and vorticity confinement — Stam's "stable fluids" scheme at 96×96.

Particles: damped Verlet integration with gravity wells, Coulomb charges, springs, wall restitution and elastic circle collisions.

Export

<!DOCTYPE html>
<!-- Generated by DevTools Fluid & Particle Sandbox — vanilla Canvas2D engine -->
<html lang="en">
<head><meta charset="utf-8" /><title>Particles</title>
<style>html, body { margin: 0; height: 100%; background: #0b0f14; } canvas { display: block; }</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth; canvas.height = innerHeight;

// 2000 Verlet particles — pointer drags attract them.
const N = 2000;
const px = new Float32Array(N), py = new Float32Array(N);
const ox = new Float32Array(N), oy = new Float32Array(N);
let seed = 12345;
const rand = () => ((seed = (seed * 1664525 + 1013904223) >>> 0) / 0xffffffff);
for (let i = 0; i < N; i++) {
  px[i] = ox[i] = rand() * canvas.width;
  py[i] = oy[i] = rand() * canvas.height;
}
let mouse = null;
addEventListener("pointermove", (e) => (mouse = [e.clientX, e.clientY]));
addEventListener("pointerleave", () => (mouse = null));

function frame() {
  const dt = 1 / 60, dt2 = dt * dt;
  for (let i = 0; i < N; i++) {
    let fx = 0, fy = 98; // gravity
    if (mouse) {
      const dx = mouse[0] - px[i], dy = mouse[1] - py[i];
      const r = Math.sqrt(dx * dx + dy * dy) + 40;
      const f = 500000 / (r * r);
      fx += (dx / r) * f; fy += (dy / r) * f;
    }
    const vx = (px[i] - ox[i]) * (1 - 0.005);
    const vy = (py[i] - oy[i]) * (1 - 0.005);
    ox[i] = px[i]; oy[i] = py[i];
    px[i] += vx + fx * dt2;
    py[i] += vy + fy * dt2;
    if (py[i] > canvas.height - 3) { py[i] = canvas.height - 3; oy[i] = py[i] + vy * 0.85; }
    if (px[i] < 3 || px[i] > canvas.width - 3) { px[i] = Math.max(3, Math.min(canvas.width - 3, px[i])); ox[i] = px[i] + vx * 0.85; }
  }
  ctx.fillStyle = "rgba(11,15,20,0.35)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#38bdf8";
  for (let i = 0; i < N; i++) ctx.fillRect(px[i] - 1.5, py[i] - 1.5, 3, 3);
  requestAnimationFrame(frame);
}
requestAnimationFrame(frame);
</script>
</body>
</html>

About this tool

The Fluid & Particle Sandbox is a physics laboratory with two engines behind one canvas. The fluid mode is a genuine Eulerian Navier-Stokes solver in the 'stable fluids' tradition: semi-Lagrangian advection for unconditional stability, explicit diffusion for viscosity, a Jacobi-iterated pressure projection enforcing near-incompressibility (the Poisson step), and vorticity confinement to keep eddies alive instead of smearing out. Drag your pointer to inject dye and velocity, and watch vortices shed, curl and dissipate the way real smoke does.

The particle mode is a damped Verlet N-body engine: gravity wells and Coulomb-style attractors/repulsors with configurable falloff, spring links with stiffness and damping, wall restitution, and elastic circle-to-circle collision resolution. Verlet integration (position-based, storing only current and previous positions) is the scheme behind cloth, rope and soft-body physics in games — the same core you'd ship.

Interaction is pointer-first and touch-friendly. In fluid mode your stroke injects momentum and dye scaled by pointer velocity; in particle mode dragging spawns an attraction center that pulls the swarm toward your cursor. Gravity, vorticity strength and particle count are live sliders.

Device ceilings follow the PRD contract: the 100,000-particle target applies to WebGL2-capable desktops; compact devices cap at 40k GPU, mobile at 12k GPU, and CPU-fallback devices degrade to 2,000–5,000 so the page never becomes a slideshow. The stats line always shows your active class and renderer.

When you find a feel you like, export it as real code: a Matter.js world with walls and your particle count, a PixiJS ticker application with the Verlet loop inlined, or a standalone vanilla Canvas2D engine page with pointer attraction — runnable starting points, not pseudocode.

How to use

Choose an engine
Fluid (Navier-Stokes) for smoke and vortices; Particles (N-body) for swarms, gravity and collisions.
Paint the field
In fluid mode, drag to inject dye and velocity — pointer speed scales the push.
Herd the swarm
In particle mode, drag to attract particles; release to let them fly under gravity.
Tune the physics
Gravity, vorticity and particle count sliders update the running simulation live.
Watch the ceiling
The stats line shows your device class (mobile/compact/desktop) and renderer (GPU/CPU) with the matching particle cap.
Export the code
Grab Matter.js, PixiJS or vanilla Canvas output sized to your particle count and gravity.

Use cases

Game feel prototyping

Dial in particle counts, gravity and restitution against your target device class, then export the exact configuration as engine code.

Learning computational fluid dynamics

Watch advection, diffusion and projection each do their part — every stage of the stable-fluids pipeline is a live parameter.

Landing-page FX

Pointer-reactive fluid trails and swarms are the signature of modern hero sections; prototype here, export the code.

Physics education

Inverse-square falloff, Coulomb repulsion and elastic collisions are all interactive here — no formulas-first ramp.

Common mistakes

Mistake:Judging fluid speed at the wrong grid scale

Fix:The solver runs at 96×96 regardless of canvas size — a maximized window shows the same physics, just upscaled; velocity magnitudes are in grid units.

Mistake:Expecting 100k particles on a phone

Fix:The ceiling adapts by device class and GPU presence; the stats line tells you which class you're in — the target is desktop WebGL2.

Mistake:Maxing vorticity for 'more fluid'

Fix:Vorticity confinement amplifies existing curl; it can't create swirl from a still field. Inject velocity first, then confine.

Mistake:Reading the preview as the export limit

Fix:Interactive drawing caps at 400 particles for smoothness; the slider value sizes the exported engines at up to your device ceiling.

Frequently asked questions

Stable Fluids: Why Smoke Simulators Never Blow Up

Semi-Lagrangian advection, pressure projection and vorticity confinement — the three tricks from Jos Stam's 1999 paper that made real-time fluid simulation unconditionally stable, explained by playing with them.

References & standards

Distributed Systems & Network Topology Simulator

Build a network topology from load balancers, API gateways, microservices, message queues, distributed databases and caches, then inject chaos — kill nodes, partition the network, packet loss, latency spikes, circuit breaker trips — and watch Raft leader election, split-brain and Hystrix-style breaker state react live. Export the topology as Docker Compose, Kubernetes manifests, Mermaid or PlantUML. Entirely client-side, educational simulation.

Typography Anatomy & Variable Font Lab

Load a TTF/OTF/WOFF/WOFF2 font and inspect glyph Bézier outlines, baseline/x-height/cap-height guides, kerning pairs, OpenType features and live variable-font axis sliders — export CSS @font-face, font-variation-settings and fallback metric overrides.

Pixel Art Sprite Studio

Draw retro pixel art on an 8x8 to 64x64 grid with pencil, flood-fill, ordered-dither and symmetry tools, curated PICO-8/Game Boy/NES/C64/Endesga-32 palettes, multi-layer compositing, and a frame timeline with onion skinning. Export static PNG, animated PNG, GIF, a sprite-sheet atlas (Pixi/Phaser/Godot/Unity JSON), or a CSS steps() animation snippet.

Digital Logic Gate & Circuit Simulator

Build digital circuits from AND/OR/NOT/NAND/NOR/XOR/XNOR gates, tri-state buffers, switches, clocks and 7-segment displays; wire flip-flops, latches and multiplexers into adders and counters. Runs an event-driven propagation-delay simulation with High-Z and driver-conflict detection, packages sub-circuits into reusable ICs, and exports a truth table, K-Map minimization, Verilog, VHDL, and a documented JSON+SVG schematic. Everything runs client-side; circuits never leave the browser.

GLSL Shader Art & Visual FX Playground

A live GLSL fragment-shader laboratory running on WebGL2 with the full Shadertoy uniform set (iResolution, iTime, iTimeDelta, iFrame, iMouse, iChannel0..3). Write shaders with syntax highlighting and see them recompile on every keystroke, with compiler errors mapped back to your line numbers and highlighted in the editor, plus a live FPS counter. The gallery ships raymarched spheres, tori and a Mandelbulb fractal, Voronoi and FBM procedural noise, cyberpunk grids, plasma waves, a neon audio visualizer and matrix rain. Export any shader as Three.js ShaderMaterial code, a React Three Fiber component, a standalone single-file WebGL2 HTML page or plain GLSL — or record the canvas straight to WebM video. A Canvas2D plasma fallback keeps the tool usable where WebGL2 is unavailable.

Web Audio Modular Synthesizer & Sound FX Generator

A full synth voice designer running entirely in your browser: seven oscillator flavors (sine, saw, triangle, square with real PWM duty control, white/pink/brown noise), a visual ADSR envelope, resonant biquad filtering, an LFO routed to pitch, filter or gain, and an effects chain of tanh overdrive, stereo ping-pong delay and Schroeder reverb. Play the two-octave keyboard with your mouse, the printed computer keys (A W S E D…) or a Web MIDI controller, watch the live FFT spectrum and scrolling waterfall spectrogram, fire retro game SFX one-shots (jump, laser, coin, powerup, explosion, click), then export your sound as 8/16/24-bit WAV or as dependency-free Web Audio code you can paste into any project.