Create fireworks

Processing Beginners
1

Hello everyone, I want to create fireworks, my idea is that when I click a firework is created that moves upwards, and once it exceeds 1/4 of the height of the screen it disappears and instead 10 is created sparks that separate in different directions, as you can see in my code I am working with an arrayList of fireworks, so it had occurred to me that the 10 sparks are created in a fixed arrangement of 10 positions, in which each position creates a spark, taking as position x and y the last position in which the firework was left … well, this is where I come with the development of this algorithm, I am stuck since I think it is a little more difficult than I imagined (or maybe not), how could I continue the code to achieve this? if you try it, the firework goes up but when it disappears the sparks are not seen on the screen (I guess because the update function is inside the for and they only appear for 1 iteration and then the background update “clears them” ) sorry for my english…

The main code:

ArrayList<Firework> fireworks = new ArrayList<Firework>();
Spark[] sparks = new Spark[10];
Firework f;

void setup(){
  size(400, 400);
  colorMode(HSB);
}

void draw(){
  background(0);
  for(int i=0; i < fireworks.size(); i++){
    f = fireworks.get(i);
    f.update();
    f.move();
    if (f.y < height/4){
      for(int j=0; j < sparks.length; j++){
        sparks[j] = new Spark();
        sparks[j].update();
        println(sparks[j].x, sparks[j].y);
      }
      fireworks.remove(i);
    }
  }
}

void mousePressed(){
  fireworks.add(new Firework());
}

Firework class:

class Firework{
  float x, y, velx, vely, diam=5;
  
  Firework(){
    this.x = random(0, width);
    this.y = height-diam;
    this.velx = random(-3, 3);
    this.vely = random(5, 10);
  }
  
  void update(){
    noStroke();
    fill(255);
    ellipse(x, y, diam, diam);
  }
  
  void move(){
    x += velx;
    y -= vely;
  }
}

Spark class:

class Spark{
  float x, y, velx, vely, diam=20;
  
  Spark(){
    this.x = f.x;
    this.y = f.y;
    this.velx = random(-3, 3);
    this.vely = random(-3, 3);
  }
  
  void update(){
    ellipse(x, y, diam, diam);
  }
}
1 Like
2

Hello and welcome to the forum!

Great to have you here!

It’s not too easy.

I solved it here and can lead you through. It was fun.

Remark 1

Let’s say you click mouse multiple times fast.

Then you have multiple spark groups.

Therefore put sparks INTO the class Firework because each rocket has it’s own ring of sparks.

And get rid of fireworks.remove(i);

(you can use it when the sparks are gone, but not where it is now. And the usage is a little more complex)

Remark 2

Then you want to have an explosion start, so

  • first rocket rising,
  • then 2nd explosion.

You have to distinguish the two situations inside the class. You draw different things.

Remark 3

Also distinguish between

  • starting the explosion when the rocket is high enough and
  • displaying the sparks.

You had this in one go. Bad.

Totally different:

start:

    exploding=true; 
    for (int j=0; j < sparks.length; j++) {
      sparks[j] = new Spark( x, y ); // give the rocket pos to all sparks here 
    }//for

Fly:

    if (exploding) {
      // after exploding 
      for (int j=0; j < sparks.length; j++) {
        sparks[j].update(); // display 
      }//for
    }//if

Remark 4

Not important:

An explosion itself is different from a rising rocket. It’s a circle.

So I always do this with circle maths, but you can do it with velx, vely too:

    radius += speed; 
    x1=cos(angle) * radius  + x;
    y1=sin(angle) * radius  + y;
    fill(col1); 
    ellipse(x1, y1, diam, diam);

Hope this helps!

Chrisir

1 Like