HomeAlgorithms & AISpatial Hash Grid: Broad-Phase Collision Indexing

Spatial Hash Grid: Broad-Phase Collision Indexing (2D)

Watch a uniform 2D spatial-hash grid index hundreds of moving circles so collision detection runs near O(n) instead of O(n²) brute force — toggle methods, hover a particle to see the exact cells it queries, and watch the candidate-pair counter diverge live.

Algorithms & AI2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-indexx ↗ Open standalone

Hundreds of circles bounce inside a box while the simulation indexes their positions into a uniform 2D grid every frame, so collision checks only ever look at the 9 cells around each particle instead of every other particle on screen. A live counter tracks exactly how many candidate pairs the indexed grid's broad phase produces — each one then verified with a real narrow-phase circle-circle distance test — versus how many comparisons brute-force O(n²) would need at the same particle count. A method switch lets you run true brute force to watch frame time and the counter both spike as particle count grows, and hovering any particle highlights the exact 9 cells and candidate set the broad phase queried for it — a direct, moving picture of why every serious physics engine, spatial database and collision system indexes its objects instead of scanning them all.

⚙ Under the hood

Hundreds of bouncing circles are indexed into a uniform 2D grid every frame so collision detection runs near O(n) instead of O(n²) brute force — switch methods live, hover a particle to see the exact cells it queries, and watch the candidate-pair counter diverge.

spatial hashingcollision detectiondata structuresindexingalgorithmsbroad-phase

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)