Collision detection for beginners (with TypeScript examples) [WIP]

Sections

• Inspiration

• Introduction

• Prerequisites

• The Maths (theory) behind

  • Analytic Geometry
  • Coordinates of a point on a straight line
  • Cartesian coordinate system

• Distance between two points

  • Along a line
  • On a plane
  • In a space

Inspiration

This resource is heavily inspired by Thomas Jefferson’s Collision Detection. I have worked with this resource on my very own project for several years now, and it helped me implement my own collision detection.

Introduction

This resource aims to explain the mathematical principles behind 2D and 3D collision detection from the basics, with code examples.
If you’re interested in seeing collision detection implementations, without all the Maths theory, click here

Prerequisites

Basic understanding of any programming language of your choice. The examples on this site will be written exclusively in TypeScript, but I will try to explain the core concepts, so you will have no trouble rewriting the examples in the language of your choice.
You will need to know how functions work and some basic data types to understand the examples in this resource. If you understand the following example, you should be good to go!

function greet(name: string){
  return `Hello ${name}!`;
}HelloWorld.ts

The Maths (theory) behind

Analytic Geometry

Analytic Geometry, also called coordinate geometry or Cartesian geometry, is the branch of mathematics that studies geometric figures using a coordinate system and algebraic methods. It represents points by ordered pairs (or triples) of numbers, and describes lines, curves, and shapes through equations and inequalities.

Coordinates of a point on a straight line

• The number axis on the line $x$ is determined by the choice of unit and the choice of an origin at point $O$, which divides the line $x$ into two opposite half-lines - the positive and the negative half-axis.

Cartesian coordinate system

• in a plane (2D): consists of two mutually perpendicular number lines, called the $x$-axis and the $y$-axis, that intersect at a point called the origin. Every point in the plane can be uniquely represented by an ordered pair of real numbers $(x,y)$, where $x$ is the coordinate along the $x$-axis and $y$ is the coordinate along the $y$-axis.
• in a space (3D): consists of three mutually perpendicular number lines, called the x-axis, y-axis, and z-axis, that intersect at a common point called the origin. Every point in space can be uniquely represented by an ordered triple of real numbers (𝑥,𝑦,𝑧), where 𝑥, 𝑦, and 𝑧 are the coordinates along the respective axes.

Distance between two points

Along a line

The distance between two points $A=[x_{1}]$, $B=[x_{2}]$ on a line is equal to the absolute value of the difference of real numbers $x_{1}$ and $x_{2}$.

Try moving your cursor along this grid to interact with this example.

function calculateDistanceTwoPointsLine(x1: number, x2: number) {
	distance = Math.round(Math.abs(x1 - x2));
}

On a plane

The distance between two points $A=[x_{1},y_{1}]$, $B=[x_{2},y_{2}]$ in the plane is determined as the size of the hypotenuse of a right triangle $ABC$, where:
$|AC|=|x_{2}-x_{1}|$, $|BC|=|y_{2}-y_{1}|$,

function calculateDistanceTwoPointsPlane(x1: number, y1: number, x2: number, y2: number) {
	distance = Math.round((x2-x1)**2 + (y2-y1)**2);
}

In a space

The distance between two points $A=[x_{1},y_{1},z_{1}]$, $B=[x_{2},y_{2},z_{2}]$ in a space is determined as the size of the hypotenuse of a right triangle $ABC$, using the triangle $ADC$.

We use the triangle $ADC$ to calculate the length of the leg $AC$, needed to calculate the size of the hypotenuse of $ABC$ (the final distance). Make sure to take your time with the example below, in order to understand it completely.
$|AD| = |x_{2}-x_{1}|,$
$|AC|=\sqrt{(x_{2} - x_{1})^2 + (z_{2} - z_{1})^2},$
$|BC| = |y_{2}-y_{1}|$
$|DC| = |z_{2}-z_{1}|$

function calculateDistanceTwoPointsSpace(x1: number, y1: number, z1: number, x2: number, y2: number, z2: number) {
	distance = Math.round((x2-x1)**2 + (y2-y1)**2 + (z2-z1)**2);
}