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>

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.

.env Secret Safety Linter

Validate .env syntax and spot likely leaked credentials or placeholder secrets.

.htaccess Generator

Build an Apache .htaccess — HTTPS redirects, rewrites, error pages, security headers, and basic auth

AI Function Calling Schema Generator

Generate function calling JSON schemas from TypeScript interfaces

Algorithm Arena & Data Structure Visualizer

Interactive arena for algorithms and data structures: eight sorting algorithms racing on one seeded input, six pathfinding algorithms walking generated mazes, and BST, AVL, Red-Black, B-tree, heap and trie operations replayed step by step with rotations highlighted. Every run shows the Big-O table and the phase-highlighted reference implementation in four languages, and compared values can be played as pitch (sonification) through the shared audio engine. Everything runs client-side; inputs never leave the browser.

Ansible Playbook Generator

Build an Ansible playbook — hosts, vars, and tasks with modules — as YAML

Apache Config Generator

Build an Apache 2.4 VirtualHost — ServerName, DocumentRoot, Directory, aliases, and optional SSL

<!DOCTYPE html>  <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>

Related guides