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
🟧

Platformer

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

game 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
🟦

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
🐦

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

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
🪨

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
🔴

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
🐾

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
🖼

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
🟠

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