Separating Axis Theorem (SAT) Collision Detector

SAT Collision Test

Rotate shape A 0°

Rotate shape B 25°

Collision

–

Axes tested

–

Push-out depth

–

Total candidate axes

–

Drag shape A (violet) with mouse or touch. Rotate either shape with the sliders and watch the axis test update every frame.

How it works

Two convex polygons are separated if and only if there exists at least one axis — perpendicular to one of their edges — onto which their projected shadows don't overlap. The Separating Axis Theorem (SAT) turns "do these shapes touch?" into a short list of 1D interval checks: project every vertex of both polygons onto each candidate axis, and compare the resulting ranges.

for each edge normal axis n (from A, then B):
  [minA,maxA] = project(A, n)
  [minB,maxB] = project(B, n)
  overlap = min(maxA,maxB) − max(minA,minB)
  if overlap < 0: SEPARATED on axis n, stop
if no axis separated them: COLLIDING
  push-out depth = min(overlap) over all axes tested

Rotate shape A / B — spin either convex polygon in place; every edge normal changes, so the whole set of candidate axes is recomputed each frame.
Axes tested — SAT stops as soon as one axis proves separation, so this count is usually far below the total candidate axes — the reason SAT is cheap enough to run every frame in a physics engine.
Push-out depth — when the shapes overlap, this is the length of the shortest vector (the axis with the smallest overlap) that would slide them apart — the minimum translation vector (MTV) engines use to resolve a collision.
Show axes — draws every candidate axis as a thin line through its polygon's centroid; the axis that separates the shapes (or the MTV when they collide) is highlighted.

Real-world relevance: SAT is the standard narrow-phase collision test for convex 2D/3D shapes in game and physics engines (Box2D, Unity's PhysX, custom engines alike) — the broad phase (grids, quadtrees, BVHs) narrows down which pairs of objects might be touching, then SAT decides for certain and hands back the MTV used to push overlapping bodies apart.

Shape A — draggable Shape B — fixed Colliding Separating / MTV axis

⚠ Couldn't load the 3D engineThree.js failed to load from the CDN. Check your connection and reload.