simplequad

examples · a quadtree library for 2D collision detection

🔍

Query Explorer

Move the cursor to query a static scene. Hit shapes light up, and yellow arrows show the MTV response vector for each collision. Toggle the tree overlay to see spatial partitioning live.

visualization mixed shapes mtv
🔴

Horde Survival

Survive escalating waves of 500+ enemies. MTV resolves crowd separation every frame — enemies jostle and press rather than stack. Blast nearby enemies away using MTV-driven knockback. How long can you hold out?

game circles mtv physics
✨

Gravity Sandbox

Spawn glowing blobs that collide and bounce off each other. Adjust gravity and drag in real time. Right-click to attract everything to the cursor.

simulation circles physics
🐦

Boids

150 flocking agents. Each boid queries its spatial neighborhood every frame for separation, alignment, and cohesion. Toggle the tree overlay to see the partitioning in action.

simulation circles
🟠

Pixi.js Platformer

A scrolling platformer rendered with Pixi.js (WebGL/WebGPU). A rolling circle player traverses a wide level — simplequad handles circle-vs-AABB MTV collision; Pixi.js handles the rest.

game mixed shapes mtv physics
🟧

Platformer

Classic side-scroller. Player jumps between platforms collecting coins. Collision resolution via MTV keeps the player standing on surfaces.

game aabb mtv
🟦

Breakout

Classic brick-breaker. The ball is a circle; bricks and paddle are AABBs. MTV from each query hit drives both the push-out and the reflection angle — no manual geometry needed.

game circles aabb mtv
🔵

Top-down Shooter

Shoot enemies that swarm from the edges. Escalating waves and enemy HP stress the tree's circle queries across many dynamic objects.

game circles
🐾

Predator-Prey

Prey flock and flee using spatial neighborhood queries. Predators hunt via a wide search circle and eat on collision. The same tree drives both behaviors every frame.

simulation circles
🪨

Asteroid Field

Classic Asteroids with a twist. Large rocks split into smaller fragments on impact. The tree handles mixed-size circle queries each frame as the field grows.

game circles
🗼

Tower Defense

Place fixed towers to shoot enemies following a winding path. Each tower queries a range circle every frame — demonstrating stationary queriers against many path-following objects.

game circles
🖼

Image Compression

Upload any image to watch a quadtree progressively compress it — subdividing only where pixel colours vary, collapsing uniform regions into a single averaged colour. A different side of spatial data structures.

visualization