Quad tree visualized with canvas

Quad trees are really cool. You start with a root node, that can have four children. Each of the children can also have four children. You can keep going as deep as you want.

In this experiment, I've made a simple visualization that shows a quad tree in a 2D plane. To begin with, there's just one root node, but if you click and drag below, a tree of nodes will form, and be displayed.

You can see that the areas where you haven't drawn anything, the cells are quite big. Around the edges of what you've drawn, the cells are tiny, and a lot of detail is preserved.

Quad trees have many uses, for example in collision detection in games. You can read more about them on Wikipedia.

Use the arrow keys 1, 2, and 3 to choose colors, and click to draw.