The primary goal of this project is to create an imagery world in a simulate a system of particles. The simulation includes both attraction and repulsion between particles, as well as various visual effects like ripples and shiny particles.
I first determined that I needed to use attraction and repulsion to create an environment where particles interact with each other. Particles are randomly generated with positions, velocities, and radius. Each particle has an initial velocity and a gravitational mass determined by its radius. Particles are stored in the particles array. The Gravitational Attraction between particles is calculated based on Newton's law of gravitation. The force is applied to each particle, and the velocity is updated accordingly. This force is inversely proportional to the square of the distance between particles, simulating gravity. Repulsion is also applied between particles when they come too close to each other. If the distance between two particles is smaller than a threshold, the force between them is inverted and amplified to push them apart. Then I changed their size and shape to make them look more like fireflies.
Next, I spent a lot of time wrestling with the code to achieve the ripple effect. I make the particles bounce and ripple when they land at a random point in the rect range. I continuously encountered errors such as particles bouncing when they hit the border of the rect, particles bouncing in the wrong direction, ripples not expanding or disappearing, etc., but I finally fixed them and used the mills () function to make the effect look better. Each ripple (ellipse) kept expanding and disappearing within two seconds.
As part of the "Treasure in the Lake" I implemented it using Shiny Particles. Shiny particles are small, glowing elements that emerge from the center of the canvas and disperse outward in random directions. I set that each particle has a unique size and gradually fades as its lifespan decreases, creating a sparkling, dynamic effect. The particles move independently, fading smoothly until they disappear, ensuring a continuous flow of shimmer without overwhelming the scene. By controlling their lifespan, velocity, and transparency, the effect remains visually engaging and balanced. Future improvements could include color variations, curved motion, or interactive behavior to enhance their realism and responsiveness.
The spinning pinwheels form a repeating pattern at the bottom of the canvas, creating a sense of motion and depth. This part came form my occurred idea and I found it interesting. Each pinwheel is drawn using ellipse() and animated with rotate() to spin dynamically, while scale() adjusts their size based on position, giving a layered perspective effect. The color of the pinwheels transitions smoothly over time using lerpColor(), adding a visually engaging gradient effect. Their speed and size vary depending on their placement, making the pattern feel organic and lively. This technique enhances the scene’s overall movement, making the pinwheels appear to swirl in a mesmerizing, rhythmic flow.
Each pinwheel is drawn using ellipse() and animated with rotate() to spin dynamically, while scale() adjusts their size based on position, giving a layered perspective effect. The color of the pinwheels transitions smoothly over time using lerpColor(), adding a visually engaging gradient effect. Their speed and size vary depending on their placement, making the pattern feel organic and lively. This technique enhances the scene’s overall movement, making the pinwheels appear to swirl in a mesmerizing, rhythmic flow.
To summarize, this project has been a rewarding exploration of physics-based animation and visual aesthetics, but it also came with its challenges. One major hurdle was fine-tuning the balance between attraction and repulsion forces to ensure that the particle interactions felt natural and dynamic without becoming chaotic or unstable. Additionally, optimizing performance while managing a large number of particles required careful handling of array operations and memory efficiency. Despite these challenges, I gained a deeper understanding of vector math, force applications, and procedural animation in p5.js. The process also reinforced the importance of fine control over motion and visual effects, particularly in elements like the shiny particles' fading transitions and the spinning pinwheels' color interpolation. Moving forward, I aim to refine these elements further by experimenting with more organic movement patterns and interactivity to enhance the immersive quality of the simulation.
Here's some main sections of my code: