let rectCap = 300;//create a cap for the number of rectangles

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

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

  rectangles[i] = new Rectangle();

  } //allows for more rectangles to be created 

}

​

function draw() {

  stroke(1);

  background(250);

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

  rectangles[i].display();//creating a function for rectangles to be drawn

  }

}

​

function mousePressed(){

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

  rectangles[i].changeArtWork();

  }//changes the colors of the rectangles to random colors when the mouse is clicked

}

​

class Rectangle {

  constructor (rectX,rectY,rectWidth,rectHeight,colorR,colorG,colorB,strokeThickness, strokeR,strokeG,storkeB) {

    this.rectX = random(350);//x value of the rectangle

    this.rectY = random(350);//y value of the rectangle

    this.rectWidth = random(50);

    this.rectHeight = random(50);

    this.colorR = random(255);//R colors of the rectangle

    this.colorG = random(255);//G colors of the rectangle

    this.colorB = random(255);//B colors of the rectangle 

    this.strokeThickness = random(3);

    this.strokeR = random(255);

    this.strokeG = random(255);

    this.strokeB = random(255);

  } //creating random variables for each parameter of the rectangle

  display(){

    strokeWeight(this.strokeThickness);

    stroke(this.strokeR,this.strokeG,this.strokeB)

    fill(this.colorR,this.colorG,this.colorB);

rect(this.rectX,this.rectY,this.rectWidth,this.rectHeight);

  } //drawing the rectangles themselves

  changeArtWork(){ 

    this.rectX = random(350);

    this.rectY = random(350);

    this.rectWidth = random(50);

    this.rectHeight = random(50);

    this.strokeThickness = random(3);

    this.colorR = random(255);

    this.colorG = random(255);

    this.colorB = random(255);

  } //the function for changing the position, the parameters,the colors, the thickness of the borders, and the colors of the borders of the rectangles

}