See it in action at sidnewby.com
An interactive generative art experiment featuring particle systems driven by Perlin noise vector fields with dynamic color mapping.
- Particle Systems: Thousands of particles moving through a dynamically generated flow field
- Perlin Noise: Smooth, organic vector fields created using classic Perlin noise algorithms
- Dynamic Color Mapping: Four color modes for visualizing particle behavior
- Velocity: Colors particles based on their speed (slow = teal, fast = pink)
- Position: Colors based on canvas position with diagonal gradient blending
- Noise: Colors determined by Perlin noise values at particle positions
- Monochrome: Single accent color for a cleaner aesthetic
- Adjustable Parameters: Real-time controls for particle count, noise scale, flow strength, and max speed
- Adaptive Performance: Automatic particle count adjustment based on framerate
- Keyboard Shortcuts: Quick access to reset and color cycling functions
- Next.js 16 — React framework with App Router
- React 19 — UI library
- Tailwind CSS v4 — Utility-first CSS framework
- TypeScript — Type safety and enhanced developer experience
# Install dependencies
npm install
# or
bun install
# Run development server
npm run dev
# or
bun devOpen http://localhost:3000 to view the experiment in your browser.
| Key | Action |
|---|---|
Space |
Reset particle positions |
C |
Cycle through color modes |
Flow fields are created using Perlin noise to generate smooth, continuous directional forces across a 2D grid. Each particle:
- Samples the flow field at its current position
- Applies a force in the direction indicated by the noise value
- Updates its velocity and position using basic physics
- Wraps around canvas edges for continuous motion
- Leaves a fading trail by drawing a line from its previous position
The result is organic, fluid motion that creates mesmerizing patterns as thousands of particles flow together.
- Pre-calculated flow field grid with bilinear interpolation for smooth particle movement
- Adaptive particle count based on FPS to maintain smooth animation
- Batched rendering for monochrome mode (single stroke call for all particles)
- Efficient Float32Array storage for the flow field grid
MIT