Recursive grid subdivision generates fractal-like layouts by splitting cells into sub-grids

Recursive grid subdivision divides a canvas into a regular grid, then applies the same division to each cell, repeating to a chosen depth. The result is a self-similar, fractal-like tiling where fine and coarse structure co-exist. Each recursion level can vary grid density, colour, content, or stopping condition, producing organic variation within a strict geometric constraint. The key implementation detail is a recursive function taking a bounding rectangle and a depth, drawing content at the current scale, then calling itself on each sub-cell with depth-1. A common error is forgetting to pass updated bounding coordinates, causing every sub-cell to collapse onto the origin.

Examples

function subdivide(x, y, w, h, depth) {
  if (depth === 0) { fill(random(255)); rect(x, y, w, h); return; }
  const cols = 3, rows = 3;
  for (let i = 0; i < cols; i++)
    for (let j = 0; j < rows; j++)
      subdivide(x+i*w/cols, y+j*h/rows, w/cols, h/rows, depth-1);
}

Assessment

Implement recursive grid subdivision with at least 3 levels in p5.js. Add an early-stop rule (e.g. when a cell is below 4px) and vary cell colour by depth. Explain what changes if you randomise the number of subdivisions per level.