Concept:
The idea was to create a dynamic simulation where fireworks launch, explode, and slowly fade away, all while maintaining a sense of development over time. I wanted it to feel like a live performance in the sky, starting from calm darkness to sudden bursts of light and color and back to calm again.
Embedded Sketch:
Code Logic:
Here’s how the flocking concept is applied in my code:
Cohesion (Launching): The initial firework is like a single leader particle that starts from the bottom of the screen and moves upward. This particle influences the others once it bursts.
Separation (Explosion): When the main firework particle reaches its peak and “explodes,” it releases smaller particles that spread out in random directions. The particles act like a flock momentarily repelling from the center, creating that explosion effect.
Alignment (Falling and Fading): As the particles start to slow down and fall due to gravity, they align more with each other to create the visual of embers gently dispersing and fading away.
Code I’m Proud Of:
One part of the code I’m particularly proud of is how the flocking system’s logic was adapted to control the explosion and fading of particles:
explode() {
for (let i = 0; i < 100; i++) {
let p = new Particle(this.firework.pos.x, this.firework.pos.y, false);
this.particles.push(p);
}
}
When the firework reaches its highest point, this explode() function kicks in. It creates 100 new Particle objects, each with its own direction and speed. This mimics the behavior of a flock splitting apart. Instead of moving together like traditional flocks, these particles use a random2D() vector to scatter and simulate an explosion.
Additionally, each particle follows a simple rule:
Velocity Adjustment: Each particle’s velocity is affected by gravity, making them fall and spread out more realistically.
Lifespan Control: Particles gradually lose opacity (this.lifespan -= 4) to simulate them fading as they fall, creating that “embers in the sky” look.
This adaptation of flocking logic is what makes the explosion feel dynamic and natural, allowing the particles to behave independently yet still appear as part of a cohesive firework.
Challenges I Faced:
One of the main challenges was making the explosion look natural. Initially, the particles either looked too rigid or didn’t spread out enough. To solve this, I played around with p5.Vector.random2D() and tweaked the speed multipliers until it felt right. Another challenge was getting the fading effect correct. It took some trial and error to adjust the lifespan so that particles would fade smoothly and not disappear too abruptly.
Future Improvements:
While I’m happy with how the project turned out, there’s always room for more! Here are some ideas I’m thinking about:
Sound Integration: Adding sound effects would make the fireworks feel even more real. I’d like to use the p5.sound library to sync explosions with audio.
Mouse Interaction: Letting users click to create their own fireworks would add an interactive element to the project.
Different Shapes and Trails: Experimenting with different particle shapes and trail effects could make each firework more unique and visually interesting.
Color Themes: Adding color gradients or changing themes over time to simulate different types of fireworks shows would enhance the overall look.