let confetti = [];

​

function setup() {

  createCanvas(640, 360);

}

​

function mousePressed() {

  // A for loop that creates 100 new Particle objects

  for (let i = 0; i < 100; i++) {

    // Push new particles to the 'confetti' array with the mouse's x and y position

    confetti.push(new Particle(mouseX, mouseY));

  }

}

​

function draw() {

  background(255);

​

  // A for...of loop to iterate through each 'particle' in the 'confetti' array

  for (let particle of confetti) {

    // Call the show method of the Particle class for the current 'particle'

    particle.show();

    // Call the update method of the Particle class for the current 'particle'

    particle.update();

  }

}

​

// Define the Particle class

class Particle {

  // The constructor is a special method for creating and initializing an object

  constructor(x, y) {

    // Initialize x and y properties with provided arguments

    this.x = x;

    this.y = y;

    // Set a fixed width for the particle

    this.w = 8;

    // Set random horizontal and vertical speeds for the particle

    this.xspeed = random(-5, 5);

    this.yspeed = random(-5, 5);

  }

​

  // Define the update method to change particle properties

  update() {

    // Update x and y properties by adding respective speeds

    this.x = this.x + this.xspeed;

    this.y = this.y + this.yspeed;

​

    // Simulate gravity by continuously increasing vertical speed

    this.yspeed = this.yspeed + 0.1;

  }

​

  // Define the show method to display the particle on the canvas

  show() {

    fill(0);

    noStroke();

    rectMode(CENTER);

    square(this.x, this.y, this.w);

  }

}

​