An interactive 2D particle flow visualization project using p5.js. 🎨🖌️
I'm learning p5.js driven by curiosity. This is a project to explore and understand the library by creating a 2D particle flow visualization. It combines various effects such as noise-based movement, color transitions, fireworks, and interactive mouse effects like swirling and attracting to create a dynamic and engaging visual experience. 🌟🔮
Check out the the repository page to navigate the current implementation.
- Dynamic particle system with customizable parameters 🔧
- Multiple color palettes and blending modes 🎨
- Firework effects with various trajectories and behaviors 🎆
- Zoom functionality for exploring the particle field 🔍
- Interactive mouse effects (attract, repel, swirl, vortex, wave) 🖱️
- Customizable particle shapes 🔶🔷
- Adjustable noise functions for particle movement 🌊
Static mode:
You can run the current project by cloning the repository and opening the src/index.html file in the browser.
Basic server mode (for future implementation of new visualizations and deployment):
- Clone the repository:
git clone https://github.com/yourusername/particle-flow-visualization.git - Navigate to the project directory:
cd particle-flow-visualization - Install dependencies (express and socket.io):
npm install
- Start the server:
node server.js - Open a web browser and go to
http://localhost:3000(or the port specified in your environment).
The project includes a GUI for real-time adjustment of various parameters:
- Particle settings (count, size, lifespan, etc.) 🔢
- Color settings (palette, speed, blend mode, etc.) 🌈
- Firework settings (size, lifespan, effects, etc.) 🎇
- Zoom settings 🔎
- Mouse effect settings 🐁
Explore these settings to create unique visual experiences. 🎉🌠