Artem at Large

I decided to take a stab at implementing a basic subdivision data structure, generator, and renderer. The process is recursive, elegant, and was surprisingly easy to implement quickly. I wanted to be able to split horizontally and vertically, adn to support variable number of subdivisions. I came up with the following:

function genSubdiv(level = 0) {
  // 70% chance of ending if at level 3
  const probablyEnd = (level > 2 && Math.random() > 0.3);

  // End at level 4; lines get too dense
  if (probablyEnd || level === 4) {
    return {};
  }

  // Randomly split vertically
  const split = Math.random() > 0.5 ? "v" : "h";

  // Random number of elements
  const divisions = Math.ceil(random(3));

  return {
    [split]: Array.from({ length: divisions }, () =>
      genSubdiv(level + 1) /* subdivide this cell */
    )
  };
}

The process is:

1. Check if the level is too high and probably (70% chance) return an empty object if the level is 3, definitely if 4
2. Randomly decide to split the space vertically or horizontally
3. Pick a random number n up to 3 for the number of divisions to make
4. Return an object with a single h or v key that is an array of size n where each cell is the result of genSubdiv(level + 1)

Here is the result: