let shps = []; // array of Shapes

function setup() {
  createCanvas(windowWidth, windowHeight); // size of the canvas

  /* double for loop to create a grid of shapes */

  for (let x = 25; x < width; x += 50) {
    for (let y = 25; y < height; y += 50) {
      shps.push(new Shapes(x, y));
    }
  }
}

function draw() {
  background(0);

  /* For loop for the length of the shps array, here we display the shapes */
  for (let i = 0; i < shps.length; i++) {
    shps[i].display();
  }
}

class Shapes {
  constructor(posX, posY) {
    this.xPos = posX;
    this.yPos = posY;

    /* The different sizes the shape can choose from */
    /* 1 or 2 times 25 equals 25 or 50*/
    this.sz = floor(random(1, 3)) * 25;

    /* array of colors to randomly choose from, add or change it yourself */
    this.cl = [
      color("#390099"),
      color("#ff5400"),
      color("#D6FFF5"),
      color("#FFFFFF")
    ];

    /* random functions for color, shape and rotation*/
    this.rndCol = floor(random(this.cl.length));
    this.rndShp = floor(random(4));
    this.rndRot = floor(random(1, 4));
  }

  display() {
    rectMode(CENTER); // the 0 point will be in the center for the rectangle

    /* Fill or stroke? */
    /* this.rndCol gives a random number to pick a color in this.cl array */
    fill(this.cl[this.rndCol]);
    noStroke();

    // stroke(this.cl[this.rndCol]);
    // noFill();

    push();
    translate(this.xPos, this.yPos);
    rotate(radians(90) * this.rndRot);

    /* list of different shapes */
    if (this.rndShp == 0) {
      ellipse(0, 0, this.sz, this.sz);
    } else if (this.rndShp == 1) {
      rect(0, 0, this.sz, this.sz);
    } else if (this.rndShp == 2) {
      let triangleSz = this.sz / 2;
      triangle(
        0,
        0,
        0 + triangleSz,
        0 + triangleSz,
        0 - triangleSz,
        0 + triangleSz
      );
    } else if (this.rndShp == 3) {
      let triangleSz = this.sz / 2;
      triangle(
        0 + triangleSz,
        0 - triangleSz,
        0 + triangleSz,
        0 + triangleSz,
        0 - triangleSz,
        0 + triangleSz
      );
    }

    pop();
  }
}