Flow Field Patterns

A dynamic, interactive particle system visualization that creates mesmerizing flow field patterns using HTML5 Canvas and JavaScript.

Overview

This project creates an animated visual effect where thousands of particles move through a mathematically generated flow field, leaving colorful trails that form organic, fluid-like patterns. The result is a hypnotic visualization that responds to the underlying mathematical patterns.

How It Works

Particle System

The visualization is powered by two main classes:

1. Effect Class: Manages the overall system

   • Creates and maintains the flow field grid
   • Initializes and updates all particles
   • Handles canvas resizing and debugging visualization
   • Renders all particles in each animation frame

2. Particle Class: Represents individual particles

   • Each particle has a position, speed, color, and history of previous positions
   • Particles follow the angles defined in the flow field
   • Movement is determined by reading the angle from the flow field at the particle's current grid position
   • Particles leave trails by storing position history
   • When a particle's timer expires, it gradually fades by removing history points
   • Once completely gone, particles reset to a new random position

Flow Field Generation

The flow field is a grid where each cell contains an angle value. These angles are calculated using a combination of sine and cosine functions applied to the cell's coordinates, creating a smooth, wave-like pattern across the grid.

Key parameters that control the flow field:

• cellSize: Controls the grid resolution (default: 20)
• zoom: Controls the frequency of the sine/cosine waves (default: 0.09)
• curve: Acts as a multiplier for the angle calculation (default: 5)

Features

• 2,500 particles creating flowing trails
• Colorful particle paths using a purple color palette
• Debug mode (press 'd' key) to visualize the underlying grid
• Responsive design that adjusts to window resizing
• Smooth animation using requestAnimationFrame

Usage

Simply open index.html in a modern web browser to view the animation.

• Press 'd' to toggle debug mode (shows the underlying grid)
• Resize the browser window to see the flow field adapt

License

This project is licensed under the GNU General Public License v2.0.