generative grid layouts

2023-01-25

---

#learning-exhaust

Quadtree

Process

1. Add some { x, y } points to a 2D space. In this example, the point’s positions are random but biased towards a focal point.
2. Subdivide the space into quadrants based on the density/position of the points
3. Store a reference to the resulting rectangles (these are the grid areas)
4. Use the resulting grid areas to position stuff! In the example above, I am using squares and circles to form a simple pattern.

Once the Quadtree fills with a certain number of objects, it splits itself into four more Quadtrees. Once those Quadtrees fill up, they divide themselves again, and so on.

source: https://georgefrancis.dev/writing/generative-grid-layouts-with-quadtrees/