// as array of class with color

​

let x = 12, y = x, w = 30, h = w, offset = 2, grid = /*15*/3, many = grid * grid;

let shownum = true;//false; //true;

let mytiles = [];      // array of "OneRect", long "many"

var mycolors= [[255,0,0],[255,128,0],[255,255,0],[0,255,0],[0,0,255],[127,0,255],[255,102,178],[80,80,80]];      // array of 8 colors

​

​

function setup() {

  createCanvas(500, 500);

  noStroke();

  make_myRects();

}

​

function draw() {

  background(0);

  if (shownum) text(nf(frameRate(), 1, 1) + " fps", 5, 10);

  draw_myRects();

}

​

function make_myRects() {

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

    let posx = x + (i % grid) * (w + offset);

    let posy = y + (floor(i / grid)) * (h + offset);

    let cR = random(127, 255);

    let cG = random(127, 255);

    let cB = random(127, 255);

    let mcol = int(random(8));   

//    disable array with -1 will use cR,cG,cB

//    mytiles.push(new OneRect(posx, posy, cR, cG, cB, -1, i));

    mytiles.push(new OneRect(posx, posy, cR, cG, cB, mcol, i));

  }

}

​

function draw_myRects() {

  for (let i = 0; i < many; i++) mytiles[i].draw();

}

​

class OneRect {

  constructor(posx, posy, cR, cG, cB, xcol, id) {

    this.posx = posx;

    this.posy = posy;

    this.cR = cR;

    this.cG = cG;

    this.cB = cB;

    this.xcol = xcol;

    this.id = id;

  }

  draw() {

    if (this.xcol > -1 ) fill(mycolors[this.xcol][0],mycolors[this.xcol][1],mycolors[this.xcol][2]);

    else                 fill(this.cR,this.cG,this.cB);

    rect(this.posx, this.posy, w, h); // w,h, from GLOBAL or draw any other shape/text on that position

    fill(200, 0, 0);

    if (shownum) text((this.id + 1), this.posx + 5, this.posy + h / 2);

  }

}