//Constructor function for the "Particle" class with a list of arguments:

  constructor(x, y, firework, monocolorFirework, red, green, blue, multicolorFirework) {

    this.pos = createVector(x, y);

    this.size = 3.2;

    this.accel = createVector(0, 0);

    //Gravity which will be only applied to the 'y' value:

    this.gravity = createVector(0, 0.2);

    //Variable to indicate if the particle/rocket has already exploded or still  being a rockect:

    this.firework = firework;

    //We will track the time the firework will be visible (its lifespan) by increasing their levels of transparency until they reach to 0:

    this.lifespan = 255;

    //If the particle still being a rocket:

    if(!this.firework) {

      //The velocity will be lineal (applying only to the 'y' value) and upward:

      this.vel = createVector(0, random(-11, -13));

      //We set a random color for each particle/rocket:

      this.red = random(255);

      this.green = random(255);

      this.blue = random(255);

    //If the particle has already exploded:

    } else {

      //We set a random angle and a random radius to apply to the velocity of the firework's particles:

      //We set a random angle for each particle to make them draw the form of a typical firework which is circular. For that, we need establish a range of 360º:

      this.randomAngle = random(1, 361);

      //Through the random radius will set the maximum length that the firework's particles could reach, which is 13 pixels:

      this.randomRadius = random(14);

      //The velocity for the 'x' value of the firework's particles will be the cosine of their angles by its radiuses and, thus, the one for the 'y' value will be the sine of their angles by their radiuses:

      this.vel = createVector(cos(this.randomAngle) * this.randomRadius, sin(this.randomAngle) * this.randomRadius);

      //If the firework is still monocolor, will use the arguments that we introduced in the constructor function to indicate what color had the rocket previously and apply it to all the particle that shape the firework:

      if(monocolorFirework || !multicolorFirework) {

        this.red = red;

        this.green = green;

        this.blue = blue;

      //If the 'multicolor' button was pressed:

      } else {

        //We set a random color for each particle of the firework:

        this.red = random(255);

        this.blue = random(255);

        this.green = random(255);

      }

    }

  }

  //METHODS of the 'Particle' class:

  //Method to apply any kind of physical force:

  applyForce(force) {

    //We apply the gravity to the particle's acceleration:

    this.accel.add(force);

  }

​

  //Method to update the particle's location:

  update() {

    //In case, this particle/rocket has already turned into a firework:

    if(this.firework) { 

      //We decrease the time that will be visible (its lifespan or duration) a little bit each time:

      this.lifespan -= 3.8; 

    }

    //These series of actions will be applied whether the particle/rocket has exploded or not:

    //We update the position of the particle:

    this.pos.add(this.vel);

    this.vel.add(this.accel);

    this.accel.mult(0);

  }

  //Method to render the particle:

  render() {

    strokeWeight(this.size);

    //If this particle still being a rocket:

    if(!this.firework) {

      //We don't need to apply the lifespan as the alpha channel:

      stroke(this.red, this.green, this.blue);

    //If it has already exploded, we must to apply its lifespan as the alpha channel:

    } else {

      stroke(this.red, this.green, this.blue, this.lifespan);

    }

    point(this.pos.x, this.pos.y);

  }

}