Skip to content

README.md

Latest commit

 

History

History
57 lines (37 loc) · 2.32 KB

README.md

File metadata and controls

57 lines (37 loc) · 2.32 KB
Raw

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.