Visualizations
048 / 500

048 · Astronomy

Cosmic Web

Noise grows into the filaments, voids and clusters of the universe.

A periodic box of white noise is Fourier transformed with a hand-written FFT, shaped by a cold dark matter power spectrum, and turned into a displacement field (psi = i k delta / k^2). Each of 262,144 particles then moves to x = q + D(t) psi(q) under the Zel'dovich approximation, with the growth factor D of a universe with matter and a cosmological constant, and where trajectories cross, walls, filaments and clusters condense out of the smooth early universe. The displacement is kept in three wavenumber bands that freeze as they collapse, so small clumps survive and ride the larger flows. Zoomed in, every lattice cell is resampled into sub-particles, so the folded dark matter sheet stays sharp at any magnification.

Try it. Drag the cosmic time slider to rewind or fast-forward, change the spectral index, or switch between cold, warm and hot dark matter. Click a cluster to fly into it, drag to pan, scroll or use the arrow keys to zoom, and right-click to pull back. Space plays, R grows a new universe.

  • 2D FFT
  • Zel'dovich approximation
  • Lagrangian sheet resampling

View the source · one module, plus a small shared runtime for sizing, the animation loop and input

Build your own

Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.

Build a cosmic web simulator with JavaScript and the HTML canvas element, using the Zel'dovich approximation from cosmology. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.

Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and has a near-black background.
- Write a small radix-2 FFT yourself and use it for 2D transforms (rows, then columns) on a 256 x 256 periodic grid.
- Fill the grid with Gaussian white noise, transform it, and multiply each mode by the square root of a power spectrum. A power law P(k) = k^n times a simple cold dark matter transfer function (the BBKS fit) works well.
- Compute the displacement field in Fourier space as psi(k) = i k delta(k) / k^2, then inverse transform it. Pack psi_x + i psi_y into one complex array so a single inverse FFT gives both components.
- Put one particle at every grid point q and move it to x = q + D psi(q), wrapping around the box. Animate the growth factor D from 0 upward.
- Each frame, count particles per pixel into a density buffer and draw log(1 + density / mean) through a dark blue to orange to white palette with ImageData.

Once that works, make it beautiful:
- Add a slider for cosmic time and map it to D with the growth factor of a flat universe with matter and a cosmological constant.
- Use cloud-in-cell weights when depositing particles and add a soft bloom around the densest clumps.
- Let the mouse wheel zoom in, and resample each grid cell into extra interpolated sub-particles when zoomed so the filaments stay sharp.

Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as warm dark matter that erases small scales, second-order (2LPT) corrections, or a 3D version rendered as a thin slice.
PreviousKnittingPixel art becomes Fair Isle knitting, stitch by twisted stitch, live on the needle. NextCell SortingA Cellular Potts tissue unmixes itself by differential adhesion, on a stained slide.

Related visualizations

  • Baby UniverseAstronomy Tune the universe's ingredients and watch the microwave sky respond.
  • WormholeAstronomy Fly through a traversable wormhole into another universe, with real light bending.
  • Fourier DarkroomMath Paint on a picture's 2D spectrum and watch the inverse FFT redraw it instantly.
  • Cosmic Light ConeAstronomy Our past light cone, horizons and galaxies in the expanding universe, drawn three ways.
  • Dark Matter CurveAstronomy Switch off the dark halo and watch a spiral galaxy fly apart.
  • Quantum BilliardsPhysics A quantum wave packet bounces around chaotic billiards and leaves scars.
  • Earth-Rotation SynthesisAstronomy Radio dishes ride the turning Earth to image a hidden galaxy, then CLEAN it.
  • TwinkleAstronomy Turbulent air boils a star into speckles until adaptive optics snaps it sharp.
  • Flow FieldGenerative art Thousands of particles ride an evolving noise field into silky trails.

Use ← and → to move between demos. While the canvas has focus, keys go to the demo instead.

← More from Emergent Mind Labs