· 1 min read

Flow Fields: An Interactive Playground

The particle animation that used to be this blog's background — now interactive with tweakable parameters.

creative-coding javascript canvas

This was originally the background animation for this blog. I liked it too much to just delete it, so here it is as an interactive playground. Drag sliders to change the behavior in real time.

How It Works

Flow fields use simplex noise to generate a smooth vector field across 2D space. Each point in the field has a direction, and particles follow that direction as they move.

The basic loop:

  1. Sample noise at each particle’s position to get an angle
  2. Apply the angle as a force to the particle’s velocity
  3. Add mouse repulsion when the cursor is nearby
  4. Move the particle, wrap around edges
  5. Fade the background slightly each frame to create trails

The noise field evolves slowly over time (the third dimension of simplex3), so the flow pattern shifts gradually even without interaction.