Flow Field Visualization

This project visualizes flow fields using p5.js. It includes 1D and 2D graph visualizations and a flow field simulation.

Project Structure

Files and Directories

• 1d-graph.js: Contains the code for the 1D graph visualization.
• 2d-graph.js: Contains the code for the 2D graph visualization.
• flow-field/: Directory containing files related to the flow field simulation.
  • flow-field.js: Main file for the flow field simulation.
  • Grid.js: Contains the Grid class which initializes and updates the flow field.
  • Particle.js: Contains the Particle class which represents particles in the flow field.
• index.html: HTML file to load and run the visualizations.
• OpenSimplexNoise.js: Library for generating OpenSimplex noise.

Usage

1. Open index.html in a web browser.
2. The visualizations will automatically start.

Classes

Grid

Defined in flow-field/Grid.js.

• constructor(rows, cols, cellSize): Initializes the grid.
• initFlowField(): Initializes the flow field vectors.
• updateVectors(): Updates the flow field vectors.
• getVectorAt(x, y): Returns the vector at a given position.
• drawVectors(): Draws the flow field vectors.
• drawArrow(x, y, vec, color): Draws an arrow representing a vector.

Particle

Defined in flow-field/Particle.js.

• constructor(): Initializes a particle.
• applyForce(force): Applies a force to the particle.
• update(): Updates the particle's position.
• draw(color): Draws the particle.
• ensureEdges(): Ensures the particle stays within the canvas boundaries.

Dependencies

• p5.js
• OpenSimplexNoise.js

License

This project is licensed under the MIT License.