let num_rows = 5;

let num_cols = 8

let base_length = 20;

let minoffset = 10;

let offsetlist = [];

let currrow = [];

let ratiolist = [];

let gaplist = [];

let maxratio = 7;

let mingap = 2;

let maxgap = 5;

​

function setup() {

  createCanvas(square_length*num_cols, square_length*num_rows);

  for(let row = 0; row <num_rows;row+=1){

    currrow = []

    for(let col = 0; col<num_cols;col+=1){

      currrow.push([random(minoffset,square_length-base_length-1),random(minoffset,square_length-base_length-1)])

    }

    offsetlist.push(currrow);

  };

  for(let row = 0; row <num_rows;row+=1){

    currrow = []

    for(let col = 0; col<num_cols;col+=1){

      currrow.push([random(maxratio),random(maxratio)]);

    }

    ratiolist.push(currrow);

  };

  for(let row = 0; row <num_rows;row+=1){

    currrow = []

    for(let col = 0; col<num_cols;col+=1){

      currrow.push(random(mingap,maxgap));

    }

    gaplist.push(currrow);

  };

  noFill();

}

​

function draw() {

  for(let row = 0; row <num_rows;row+=1){

    for(let col = 0; col<num_cols;col+=1){

      let startx = col*square_length;

      let starty = row*square_length;

      //grid square

      fill(255)

      square(startx,starty,square_length)

      noFill()

      //get random offsets for central square

      let [xoffset, yoffset] = offsetlist[row][col]

      let [xratio, yratio] = ratiolist[row][col]

      let squaregap = gaplist[row][col]

      //

      for(let sqoffset=0; sqoffset<min(xoffset/xratio,yoffset/yratio);sqoffset+=squaregap){

        let offsetedx = startx+xoffset-sqoffset*xratio;

        let offsetedy = starty+yoffset-sqoffset*yratio;

        let offsetedlength = base_length+sqoffset*(1+max(xratio,yratio))

        square(offsetedx,offsetedy,offsetedlength);

      }

    }

  }

}