Home▸Fluid Dynamics & Aerodynamics▸2D Lattice-Boltzmann Flow

2D Lattice-Boltzmann Flow: D2Q9 Vortex Street

2D companion to the Lattice-Boltzmann Flow simulator: a from-scratch D2Q9 lattice-Boltzmann fluid solver rendered on a plain 2D canvas. Nine-direction distribution functions per cell, real BGK collision toward Maxwell-Boltzmann equilibrium, streaming and bounce-back walls — place a cylinder and watch the von Karman vortex street emerge.

Fluid Dynamics & Aerodynamics2DAdvanced60 FPS📱 Mobile-adapted💧 Water⇄ 3D version
2d-lattice-boltzmann ↗ Open standalone

A 2D companion to the Lattice-Boltzmann Flow simulator: a from-scratch D2Q9 lattice-Boltzmann solver — real per-cell distribution functions, BGK collision, streaming and bounce-back — drawn as a plain 2D canvas heatmap, with a placeable cylinder that sheds a von Kármán vortex street.

About this simulation

This 2D companion runs the same class of algorithm as the 3D Lattice-Boltzmann Flow simulator — a real D2Q9 lattice-Boltzmann method with per-cell distribution functions, BGK collision and streaming — but draws the flow field directly to a plain 2D canvas via ImageData instead of uploading it to a WebGL texture.

🔬 What it shows

Fluid enters from the left at a fixed inlet velocity and flows around a cylinder you can resize or repaint. Once the Reynolds number crosses roughly 47, the wake becomes unstable on its own and sheds an alternating von Kármán vortex street — visible directly in the velocity and vorticity heatmaps.

🧮 The method

Nine distribution functions per lattice cell stream to their neighbours and then relax toward a Maxwell-Boltzmann equilibrium determined by the local density and velocity. Averaging the nine values recovers the macroscopic density and velocity fields shown on screen — no Navier-Stokes solve required.

🖌️ Draw your own obstacles

Click or drag anywhere on the fluid to paint solid, bounce-back walls. Any distribution that streams into a solid cell reflects straight back the way it came, so the flow naturally deflects around whatever shape you draw.

What is the Lattice-Boltzmann Method?

It is a computational fluid dynamics technique that evolves particle distribution functions on a regular grid instead of solving the Navier-Stokes equations directly. Particles stream to neighbouring cells and then collide, relaxing toward a local equilibrium; averaging the distributions recovers density and velocity.

What does D2Q9 mean?

D2Q9 names the lattice geometry: two dimensions (D2) with nine discrete velocity directions (Q9) — a rest state, four axis-aligned moves and four diagonal moves, weighted 4/9, 1/9 and 1/36 respectively. It is the standard lattice for two-dimensional LBM.

How does this differ from the 3D Lattice-Boltzmann Flow simulator?

Both run the identical D2Q9 streaming-and-collision algorithm on a 2D grid. The 3D page uploads the resulting field to a WebGL texture and draws it on a Three.js quad; this page paints the same kind of field directly onto a 2D canvas with putImageData — a genuinely different rendering pipeline, not a different physics model.

Why does the vortex street appear on its own?

Behind a bluff body, flow becomes unstable above a critical Reynolds number and small disturbances grow into alternating shed vortices. The discrete LBM dynamics already contain the required nonlinearity, so the pattern emerges without any extra forcing once viscosity is low enough.

What does the viscosity slider change?

Viscosity sets the BGK relaxation time via τ = 3ν + 0.5, which controls how quickly distributions return to equilibrium. Lower viscosity raises the Reynolds number and produces more vortex shedding; higher viscosity damps the flow toward smooth, laminar streamlines.

⚙ Under the hood

A from-scratch D2Q9 lattice-Boltzmann fluid solver rendered on a plain 2D canvas: real nine-direction distribution functions per cell, BGK collision toward Maxwell-Boltzmann equilibrium, streaming and bounce-back walls. Place a cylinder and watch the von Kármán vortex street emerge at the right Reynolds number.

lattice boltzmannlbmd2q9computational fluid dynamicsvon karman vortex streetreynolds numberbgk collision2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)