Axis-Aligned Bounding Box

Introduction

In computer Programming, Axis-Aligned Bounding Box, or AABB for short, is one of the methods to calculate the collision of two or more objects in the virtual world. It is suited for low geometric accuracy collision detection, as it can only accurately represent two shapes, which are a rectangle (2D) or a box (3D). Any shapes outside rectangles and boxes can be simulated to a limited degree of accuracy by using a dynamic AABB that automatically resizes when object tilts or expands. But in the end, every objects will be dumbed down into rects or boxes.

Applications

2D Games Collision Detection

AABBs are widely used in 2D Games. Most popular of which are Block Breaker and Pong. This two game shares 2 basic geometry of a rectangle and a ball. For example, both the paddle and the ball in Pong can be represented in the virtual world with AABBs because the game mechanics does not require the ball to be accurately represented. The game just needed to know whether the ball has collided with the right or the left paddle and then change the ball direction in response to it.

Most games use homogeneous comparison, meaning it’s comparing AABB against another AABB to detect collisions.

Basic game of Pong with striped rectangles to visualize AABB

Graphical User Interface Mouse Interaction

Graphical User Interface (GUI), as we know and love, also makes use of AABB for mouse tracking, which lets us to interact with the graphical widgets or controls such as pressing a button, selecting an object and moving it around, and many more.

The only difference between detecting collisions in a game and checking if a mouse is hovering a button or not, is that the latter uses nonhomogenous comparison. We’re now comparing AABBs to a point in a two 2D space, which is much more simpler and faster than comparing against another AABB.

Basic GUI with a mouse cursor and a button in the middle

Implementations

Homogeneous comparison

A homogeneous AABB comparison can firstly be done by calculating if both AABBs intersects in the x axis.

Checking both AABB’s x axis to see if they overlap each other