Thousands of particles ride an evolving noise field into silky trails.
Every particle asks a 3D Perlin noise function which way to go, steps a pixel or two, and draws a short line. The canvas is never cleared: each frame lays a nearly transparent veil over the last, so paths pile up into flowing ribbons while old ones slowly fade. Using time as the third noise dimension makes the whole field drift.
Try it. Move the pointer to stir a vortex into the field. Click to change the palette.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a generative art flow field with JavaScript and the HTML canvas element. 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 resizes with the window. Paint it a near-black background.
- Write a small 2D Perlin or simplex noise function yourself (no imports).
- Create about 2,000 particles at random positions. Each frame, read the noise value at each particle's position, turn it into an angle, move the particle a step in that direction, and draw a short line from where it was to where it is now.
- Don't clear the canvas each frame. Instead, fill it with the background color at about 5% opacity, so particles leave trails that slowly fade.
- When a particle leaves the screen or gets old, respawn it somewhere random.
- Animate with requestAnimationFrame and use the elapsed time as a third noise dimension, so the field slowly changes.
Once that works, make it beautiful:
- Give the particles a palette of 4 or 5 colors that look good on black and use globalCompositeOperation = "lighter" so overlapping trails glow.
- Batch the lines into one path per color so thousands of particles stay smooth at 60 fps.
- Make the mouse stir the field: add a swirl around the pointer that fades with distance.
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 curl noise for swirlier flow, sampling colors from a photo, or exporting a high-resolution still.
