Quadtree, k-d tree, BVH and grid rebuilt every frame over thousands of moving points.
About five thousand particles drift in clusters, a spiral galaxy, a river or a uniform haze, and every frame all four spatial indexes are rebuilt from scratch on flat typed arrays: a quadtree that splits crowded squares into quadrants, a k-d tree split at the median on alternating axes (quickselect, so it stays balanced), a bounding volume hierarchy with tight boxes split along each node's longest axis, and a uniform grid filled by counting sort. A circular range query runs against each of them, rejecting whole nodes with one box test, and the table compares their live point-test counts and build times against brute force. The selected structure is drawn as a blueprint, with shallow splits heavier than deep ones, the nodes the query visited hatched in amber and the points it actually tested lit up.
Try it. Move the pointer to drag the query circle around, and use R- and R+ (or [ and ]) to resize it. Switch structures with the tabs or 1 to 4, change the particle distribution with D, and double the particle count with the N button. Left alone, the query sweeps the sheet and the structures take turns.
Quadtree, k-d tree, BVH and uniform grid
Per-frame rebuilds with in-place partitioning and quickselect
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a spatial index visualizer with JavaScript and the HTML canvas element, drawn like an architect's blueprint. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a deep blueprint blue with a faint white grid.
- Create 3,000 particles in a few Gaussian clusters, each drifting slowly, and draw them as tiny white squares.
- Every frame, build a quadtree from scratch: a node holding more than 8 points splits into four quadrants. Draw every split as a thin white line.
- Put a query circle at the mouse. Walk the quadtree, skipping any node whose rectangle does not touch the circle, and test the points in the leaves you reach.
- Color the points inside the circle amber, the points that were tested but outside light blue, and show "tests: 142 instead of 3,000" in a corner.
Once that works, make it beautiful:
- Add a k-d tree (split at the median on alternating axes) and a uniform grid, rebuild all of them every frame, and show a small table comparing how many points each one tested.
- Hatch the visited leaves with diagonal lines (a pattern made with createPattern) and make shallow splits thicker than deep ones.
- Add a blueprint title block in a corner and a radius dimension line with arrowheads on the query circle.
- Let me switch structures with the number keys and change the particle distribution.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a bounding volume hierarchy, k-nearest-neighbor queries, or using the grid for all-pairs collision detection.
