Concept:
Yesterday, my home country, Trinidad and Tobago, celebrated its 62nd Independence Day, marking our freedom from British colonialism. This is a deeply cherished event back home, filled with parades showcasing our military, fire service, and vibrant cultural bands. As the day winds down, the celebrations culminate in a spectacular fireworks display in our capital, Port of Spain. While I couldn’t be there to celebrate in person this year, I wanted to honour my country by drawing inspiration from this beloved tradition. That’s why I chose fireworks as the concept for this project, allowing me to connect with home even from afar.
Embedded Sketch:
Code I’m Particularly proud of:
// Firework class definition
class Firework {
constructor(x, y) {
this.firework = new Particle(x, y, true);
this.exploded = false;
this.particles = [];
}
// Update the firework's state
update() {
if (!this.exploded) {
// Apply gravity to the firework
this.firework.applyForce(gravity);
// Update the firework's position
this.firework.update();
// If the firework reaches the peak and starts falling, it explodes
if (this.firework.vel.y >= 0) {
this.exploded = true;
this.explode();
}
}
// Update the particles from the explosion
for (let i = this.particles.length - 1; i >= 0; i--) {
this.particles[i].applyForce(gravity);
this.particles[i].update();
// Remove particle if its lifespan is over
if (this.particles[i].done()) {
this.particles.splice(i, 1);
}
}
}
// Handle the explosion of the firework
explode() {
// Create multiple particles at the firework's current position
for (let i = 0; i < 100; i++) {
let p = new Particle(this.firework.pos.x, this.firework.pos.y);
this.particles.push(p);
}
}
// Display the firework and its particles
show() {
if (!this.exploded) {
this.firework.show();
}
// Show all particles from the explosion
for (let i = 0; i < this.particles.length; i++) {
this.particles[i].show();
}
}
// Determine if the firework is done (all particles are gone)
done() {
return this.exploded && this.particles.length === 0;
}
}
I’m very proud of my firework class, specifically the explode method that handles the creation of the explosion when the firework reaches its peak. By generating 100 particles at the exact position where the firework explodes, I effectively simulate the burst of a firework. The fact that these particles are given random directions and speeds makes each explosion unique and unpredictable, which greatly enhances the realism and excitement of the simulation.
Key Features:
The main feature of this code is to simulate fireworks that shoot up from the mouse click position and then explode into multiple smaller particles. The visual effect is designed to mimic a real-life fireworks show, complete with motion, colour changes, and fading effects.
Each time you click the mouse, a new firework is created at the position where you clicked. The firework then moves upward on the screen, just like a rocket being launched. This adds a layer of interactivity, allowing you to control where and when fireworks appear.
The code uses a special colour mode (HSB—Hue, Saturation, Brightness) to create vibrant, colourful particles. Each firework and its particles are assigned random colours, which makes the display visually exciting.
The entire visual process is controlled by a loop that continuously updates the position, appearance, and behaviour of each firework and its particles. This loop allows for smooth and continuous animation, ensuring that the fireworks display looks natural and fluid.
Reflection and Future Work:
I’m really proud of my fireworks simulation. To take it even further, I’m thinking about adding explosion sounds that vary based on the size and type of firework, which would make the experience even more immersive. I’d also love to introduce different types of fireworks, like starbursts or spirals with unique explosion patterns, to add more variety and depth to the display. These improvements would not only elevate the overall experience but also make the simulation richer and more dynamic, allowing me to create something truly special.