Week 3 – Generative Art OOP

Concept

For this week’s generative artwork, I decided to create a fireworks effect. The idea was inspired by something that happened recently back home in Fiji. My home football team, Ba FA, won the league, and my dad was showing me videos of the fireworks that were happening that night to celebrate the win. With that in mind, I thought it would be interesting to create my own digital version of fireworks using p5.js.

I wanted the artwork to feel active and unpredictable, so instead of having the fireworks appear in the exact same way every time, I used randomness to control their position, size, colour, and speed. I also added a mouse interaction so the user can click anywhere on the canvas to create a firework.

Code I Am Proud Of

The part of my code that I am most proud of is how I implemented the Firework class and made each firework have its own properties. Doing object oriented programming particularly in p5.js was new to me but with the help of Coding Train tutorials, I managed to pull this off. Each firework has its own position, size, maximum size, colour, and speed. This allowed me to create multiple fireworks that behave slightly differently from each other.

// Firework Class
class Firework {
  constructor(x, y) {
    this.x = x;
    this.y = y;

    // Starting size and the maximum size of the firework
    this.size = 5;
    this.maxSize = random(40, 100);

    // Random color for the firework
    this.r = random(100, 255);
    this.g = random(100, 255);
    this.b = random(100, 255);

    // For random speed of the fireworks
    this.speed = random(0.5, 2);
  }
  
  // Method for making the firework bigger
  update() {
    this.size += this.speed;
  }

  // Method for displaying the firework
  display() {
    noFill();
    stroke(this.r, this.g, this.b);
    strokeWeight(3);
    circle(this.x, this.y, this.size);
    // Small center of the firework
    fill(this.r, this.g, this.b);
    noStroke();
    circle(this.x, this.y, 5);

}
  // Returns true when the firework reaches its maximum size, otherwise false
  finished() {
    return this.size >= this.maxSize;
  }

I am also really proud of how I made the fireworks finish and then get removed from the array. I used a finished() method to check when a firework reaches its maximum size:

function draw() {
  // Goes backwards through the array and removes any fireworks that have finished
  for (let i = fireworks.length - 1; i >= 0; i--) {
    if (fireworks[i].finished()) {
      fireworks.splice(i, 1);
    }
  }
}

This part took me quite a while to figure out. I initially found it really tough to remove fireworks from the array while also going through the array. I eventually realized that I could go through the array backwards. This allows me to safely remove a firework . The finished method checks whether the firework has reached its maximum size. Once it has, the loop removes it from the array.

Implementation

I used an array called fireworks to store all of the firework objects. New fireworks are automatically created at random positions, and the user can also create one by clicking on the canvas.

I also used a transparent background to create the fading effect: background(10, 10, 30, 25);

The 25 is the alpha value, so the background is partially transparent rather than completely covering the previous frame. This allows parts of the previous frames to remain visible and gradually fade away, creating a trail effect behind the fireworks.

I also used random() throughout the program so that the fireworks do not all look or behave exactly the same. Their colours, speeds, maximum sizes, and positions can all be different, which makes the artwork generative.

Reflection

I enjoyed making this artwork because I was able to connect a personal experience from home with what I have been learning in p5.js. It also helped me understand object-oriented programming and arrays better.

The most challenging part was figuring out how to remove finished fireworks from the array. I initially found this confusing, but going through the array backwards and using splice() helped me understand better how fireworks with different speeds that finish at different times can be removed correctly.

If I were to improve this artwork in the future, I would like to make the fireworks look more realistic by adding individual particles that explode outward instead of just making the circle grow. I would also like to experiment with different shapes, sounds, and more mouse interactions to make the celebration feel more dynamic.

Leave a Reply