let rectangles = [];

function setup() {

  createCanvas(500, 500);

}

​

function draw() {

    background(0);

  for (let i = 0; i < rectangles.length; i++) {

    //running the functions within my Rectangle class

    rectangles[i].display();

    rectangles[i].move();

  }

}

​

//initiating for rectangle to be created when mouse is pressed

function mousePressed() {

  rectangles.push(new Rectangle());

​

}

​

class Rectangle {

  constructor() {

    //location, height, width, color, speed and gravity

    this.x = mouseX;

    this.y = mouseY;

    this.height = random(30, 100);

    this.width = random(30, 100);

    this.color = color(random(256), random(256), random(256), 127);

    this.speed = 0.5;

    this.gravity = 0.2;

  }

  //this is what makes the rectangles bounce

  move() {

    this.y = this.y + this.speed;

    this.speed = this.speed + this.gravity ;

​

    if (this.y > 480) {

      //reverse the speed

      this.speed = -1 * this.speed + this.gravity;

    }

  }

//where the rectangles and color are displayed

  display() {

    fill(this.color);

    rect(this.x, this.y, this.width, this.height);

  }

}

​