Independent objects in p5.js

Question

My intent is to create in p5.js, an 8x8 grid of numbered rectangles where each is slightly rotated on its center axis compared to the one on its left, above it.

The code below indicates my current stages. My next step is to understand how to populate an array with the 64 object rectangles in a simple and clear way. This way I can independently edit the rotation of each one as needed.

Any resources or reverse engineer-able code would be great.

CODE:

function setup() {
  createCanvas(700, 700);
  colorMode(HSB);
  background(120, 40, 50, 0.6);
  rectMode(CENTER);
  textAlign(CENTER)
  //positioning values
  posX = width/9;
  posY = height/9;
  
  //function to consecutively count to 64, with eight numbers on each column and row
  for (num=1; num<9; num++){
    for (row=1;row<9; row++){
      text(str(num-8 + row*8),num*posX,posY*row);
    };
  };
  noFill();
  for (num=1; num<9; num++){
    for (row=1;row<9; row++){
      rect(num*posX,row*posY,50,50);
    };
  };
};