let gridW = 10; //amount of shapes in the width
let gridH = 10; //amount of shapes in the height
let stepX = 60; // horizontal distance between shapes
let stepY = 60; // vertical distance between shapes
let shapeWidth = 40;
let shapeHeight = 40;
var GraphicArray = [];
 
 
function setup()
{
  createCanvas(800, 800);
  noStroke();
  fill(0);
  background(255);
 
  translate((width-(stepX*gridW))/2, (height-(stepY*gridH))/2);  // translate graphic to the center of the screen
 
  for (var i=0; i < gridW; i++)
  {
    GraphicArray[i] = []; //add a second dimension to the array
    for (var j = 0; j < gridH; j++)
    {
      
      GraphicArray[i][j] = new Graphic(i * stepX, j * stepY, shapeWidth, shapeHeight);
      GraphicArray[i][j].draw();
    }
  }
}
 
 
class Graphic
{
 
  constructor(x,y, shapeW, shapeH)
  {
    this._pos = createVector(x, y);
    this._shapeWidth = shapeW;
    this._shapeHeight = shapeH;
  }
 
  draw()
  {
    push();
    stroke(0);
    fill(0);
    rect(this._pos.x, this._pos.y, this._shapeWidth, this._shapeHeight);
    pop();
  }
}

let gridW = 10;
let gridH = 10;
let border = 100;
let stepX = 40;
let stepY = 40;
let distModifier = 1.05;
let graphicSize = 30;
  
function setup()
{
  createCanvas(800,800);
  background(255);
  noStroke();
  fill(0);

  let distX = stepX;
  let distY = stepY;
  translate(border,border);

  for(var i=0;i < gridH;i++){
    for(var  j= 0;j < gridW;j++) {
      rect(j * distX, i * distY, graphicSize, graphicSize);
      distX *= distModifier;
      }
  distX = stepX;
  distY *= distModifier;
  }
} 

let gridW = 12;
let gridH = 12;
let border = 60;
let stepX = 60;
let stepY = 60;
let sizeModifier = 1.05;
let graphicSize = 30;
 
 
function setup()
{
  createCanvas(800, 800);
  noStroke();
  fill(0);
  background(255);
  rectMode(CENTER);
  let graphicSizeScaled = graphicSize;
  translate(border, border);
  for (var i=0; i < gridH; i++)
  {
    for (var j = 0; j < gridW; j++)
    {
      rect(j * stepX, i * stepY, graphicSizeScaled, graphicSizeScaled);
    }
    graphicSizeScaled *= sizeModifier;
  }
}

let gridW = 12;
let gridH = 12;
let border = 60;
let stepX = 60;
let stepY = 60;
let sizeModifier = 1.05;
let graphicSize = 30;
 
 
function setup()
{
  createCanvas(800, 800);
  noStroke();
  fill(0);
  background(255);
  rectMode(CENTER);
  
  var rotation = 0;
  translate(border, border);
  
  for (var i=0; i < gridH; i++)
  {
    for (var j = 0; j < gridW; j++)
    {
      rotation++;
      push();
      translate(j * stepX, i * stepY);
      rotate(radians(rotation));
      rect(0, 0, graphicSize, graphicSize);
      pop();
    }
  }
}