Creating a Fireworks Simulation in Processing

Question

I have an assignment in which I have to make a fire works simulation using processing. My goal is to have a firework that can shoot out multiple ellipses in a circular formation. Image of what I'm trying to accomplish can be found here

The code I have right now seems to be drawing the ellipses in a spiral. I have copy-pasted my a download link for the code a the bottom, if anyone would like to try it out.

Code link:

ArrayList<Ball> ballList;
int timer;
int amount;
int ball;
float angle;
boolean draws;
Ball b;

void setup() {
  size(1300, 700);

  ballList = new ArrayList<Ball>(ball);
  ball= 36;
  amount = 1000;
}

void draw() {
  background(0);
  for (int i = ballList.size()-1; i > -1; i--) {
    for (int k = 0; k < ball; k++) {
      Ball b = ballList.get(i);
      fill(255, 0, 0, b.a);
      b.display();
    }// for loop
  }// for loop
}// void draw

void mousePressed() {
  for (int j = 0; j < ball; j++) {
    ballList.add (new Ball(angle));
  }
}

class Ball {
  float X;
  float Y;
  float rad;
  float mx;
  float my;
  float a;
  float draw;
  color c = color(random(0, 255), random(0, 255), random(0, 255));
  float d;
  
 float angle;
  float X2;
  float Y2;
  float angle2;
  float x;
  float y;
  
  Ball(float _angle) {
    X = mouseX; //mouse X
    Y = mouseY; //mouseY;
    d = 0;
    rad= 10;
    angle = _angle;
    a = 255;
    
    
  }//Ball
  void display() { // draw the ball and fill in colour
    
noStroke();
   a--;
    d++;
    angle += 10;
    if (angle >= 360) {
      angle = 0;
    }
    angle2 = radians(angle);
    X2 = cos(angle2) * d + X; 
    Y2 = sin(angle2) * d + Y;
    a -= 0.5;
    ellipse(X2, Y2, rad, rad);
  }// void display
}

See [How do I format my code blocks?](//meta.stackoverflow.com/q/251361/4642212). — Sebastian Simon, Dec 12 '21 at 18:15

score 0 · Answer 1 · answered Dec 14 '21 at 11:18

The reason you are seeing a spiral is because you are updating each balls' position just before drawing it, making them just a tad bit out of synch with every ball you draw. If you first update each ball's position before drawing you will get the effect that you're looking for.

score 0 · Answer 2 · answered Dec 14 '21 at 11:56

The problem is that you are drawing the same ball multiple times, moving it each time. Instead, you should seperate the logic for moving the ball and displaying it like this

void update() { // update the ball
    d++;
    a--;
}//void update

void display() { // draw the ball and fill in colour
    noStroke();
    angle += 10;
    if (angle >= 360) {
        angle = 0;
    }
    angle2 = radians(angle);
    X2 = cos(angle2) * d + X; 
    Y2 = sin(angle2) * d + Y;
    ellipse(X2, Y2, rad, rad);
}// void display

Then, make sure that the update function is only called once for each ball

for (int i = ballList.size()-1; i > -1; i--) {
    Ball b = ballList.get(i);
    b.update();
    for (int k = 0; k < ball; k++) {
        fill(255, 0, 0, b.a);
        b.display();
    }// for loop
}// for loop

Creating a Fireworks Simulation in Processing

2 Answers2