This is a short animated guide to understanding elastic collisions between two objects. The above animation is implemented using the velocity formulas described on wikipedia here. I initially wrote the animation code for fun, for a small game project where this interaction was needed, but then I got more curious and wanted to try and gain a deeper understanding of the math behind the motion of two colliding objects.

This article is a summary of that collision process. The maths/physics are quite basic and something I remember studying in high school, but hey it never hurts to go back and relearn. It's been a while. This time around, however, I got to make funny balls move.

The law of conservation of momentum states that within some isolated system the total amount of momentum remains constant, it is neither created nor destroyed, but only changed, or reallocated, through the action of forces.

If we make some simplifying assumptions, and wish away friction, heat, and other pesky ways through which, say two colliding objects might interact, what we're left with is a fairly simple formulation for the momentum of two objects:

$m_1 v_1 + m_2 v_2 = m_1 v_1' + m_2 v_2'$

where $m$ stands for mass, $v$ for velocity, and the $'$ stands for after (as in after the collision).

Much like total momentum, the total kinetic energy of two colliding objects is conserved after a collision (in practice, some might be "lost", i.e. transferred to heat, but here we live on a canvas we control, not in the real world).

In classical mechanics, the kinetic energy of a non-rotating object is:

$K = \frac{1}{2}mv^2$

where $m$ stands for mass and $v$ for velocity.

The total kinetic in our system, before and after a collision, can be expressed as:

$\frac{1}{2}m_1v_1^2 + \frac{1}{2}m_2v_2^2 = \frac{1}{2}m_1{v_1'}^2 + \frac{1}{2}m_2{v_2'}^2$

where $m$ stands for mass, $v$ for velocity, and the $'$ stands for after (as in after the collision).

If we know how big and fast two balls are (i.e. their mass and velocity), and we're interested in figuring out how fast they move after they collide (presumably their mass stays the same, and bits don't just fly off), we can just solve the above equations for $v_1'$ and $v_2'$. Rearranging the above, we get:

$v_1' = \frac{m_1-m_2}{m_1+m_2}v_1 + \frac{2m_2}{m_1+m_2}v_2$

$v_2' = \frac{2m_1}{m_1+m_2}v_1 + \frac{m_2-m1}{m_1+m_2}v_2$

If we assume $m_1 = m_2$ then the above reduce to just

$v_1' = v_2$

$v_2' = v_1$

or in other words, their velocities just swap, as visualised above.

The velocities of two objects after a collision are a bit more complicated to calculate in 2d, but not by alot, once you break the process down into smaller steps. A lot of the reasoning in 2d is built on top of the 1d collision process.

The post impact velocities can be calculated from the pre impact velocities projected onto the unit normal and tangential vectors of the collision. The exchange of forces happens along the unit normal vector. The normal components of the velocities behave just like the 1d velocities exemplified above - they swap along the normal line - using the same formula. The tangential components stay the same as there is no exchange of forces along the unit tangent. After we compute the post collision tangent and normal components we can find the post impact velocities by adding the two components.

A rough simplified visualisation of this process might look like this:

The normal is simply the line connecting the two center points of the objects. The tangent is the line perpendicular to the normal, at the point of impact:

Let's work through an example of the whole process. Let's take two circular objects of equal mass having velocities:

$\vec{v_1} = (10, 10) \\
\vec{v_2} = (0, -10)$

For simplicity let's also take the coordinates of their centers as:

$c_1 = (x_1, y_1) = (15,15)\\
c_2 = (x_2, y_2) = (17,15)$

They look approximately like this:

First let's find the normal vector. As this is a line connecting the two centers, we can find the normal vector by computing the difference between the centers of the circles. The normal then becomes:

$\vec{n} = (x_2 - x_1, y_2 - y_1) = (2, 0)$

The unit normal then becomes:

$\vec{un} = \frac{\vec{n}}{|\vec{n}|} = \frac{\vec{n}}{\sqrt{n_x^2+n_y^2}} = \frac{(2, 0)}{\sqrt{2^2 + 0^2}} = (1, 0)$

The unit tangential is the unit vector perpendicular to the unit normal. We can get that like so:

$\vec{ut} = (-un_y, un_x) = (0, 1)$

Now can project the pre impact velocities onto the normal and tangential components. To do this, we take the dot product of the velocity vectors and the unit normal and unit tangent vectors.

Let $v_{1n}$ be the scalar velocity of object 1 in the normal direction, $v_{1t}$ the scalar velocity of object 1 in the tangential direction, and $v_{2n}$ and $v_{2t}$ be the same thing, but for object 2. We get this doing the aforementioned dot product:

$v_{1n} = \vec{un} \cdot \vec{v_1} = 10\\
v_{1t} = \vec{ut} \cdot \vec{v_1} = 10\\
v_{2n} = \vec{un} \cdot \vec{v_2} = 0\\
v_{2t} = \vec{ut} \cdot \vec{v_2} = -10$

The post collision tangential velocities stay the same:

$v_{1t}' = v_{1t} = 10\\
v_{2t}' = v_{2t} = -10\\$

The post collision normal velocities swap according to the 1d formula:

$v_{1n}' = \frac{m_1-m_2}{m_1+m_2}v_{1n} + \frac{2m_2}{m_1+m_2}v_{2n}$

$v_{2n}' = \frac{2m_1}{m_1+m_2}v_{1n} + \frac{m_2-m1}{m_1+m_2}v_{2n}$

Keeping in mind $m_1 = m_2$ and plugging in our numerical values for our example, we get:

$v_{1n}' = v_{2n} = 0\\
v_{2n}' = v_{1n} = 10$

Note this is the exact simplified 1d formula for when two objects of equal mass collide.

At this point, we are almost done, we can now convert the scalar normal and tangent velocities into vectors, by multiplying the unit/tangent normal vectors by the scalar values.

$\vec{v_{1n}'} = v_{1n}' \vec{un} = (0, 0)\\
\vec{v_{2n}'} = v_{2n}' \vec{un} = (10, 0)\\
\vec{v_{1t}'} = v_{1t}' \vec{ut} = (0, 10)\\
\vec{v_{2t}'} = v_{2t}' \vec{ut} = (0, -10)$

Finally, the post impact velocity vectors are equal to:

$\vec{v_1}' = \vec{v_{1n}'} + \vec{v_{1t}'} = (0, 10)$

$\vec{v_2}' = \vec{v_{2n}'} + \vec{v_{2t}'} = (10, -10)$

These look approximately like so (post impact in green):

The numerical example was a fairly simplified one so we can more quickly do it on paper as well as more easily visualise it. Looking at the above picture you can kinda see how the normal component of the velocity of the blue object (left) swapped with the normal component of the velocity of the pink object (right). Since the pink object has zero movement on the x axis, it stands to reason that the blue object won't have any after the impact. As a result blue goes straight up after the collision, while pink goes down and to the right as it now has the blue object's horizontal movement.

You can revisit the rough visualisation at the beginning of this section to see the above paragraph drawn in an animated way (for a slightly different example, but very similar in principle).

For quick implementation purposes just use this compact formulas for post impact velocities (notations as followed in this article, with angle brackets indicating the inner product of two vectors):

$\vec{v_1'} = \vec{v_1} - \frac{2m_2}{m_1+m_2} \frac{\langle v_1 - v_2, c_1 - c_2 \rangle}{\| c_1 - c_2 \|^2}(c_1 - c_2)\\
\vec{v_2'} = \vec{v_2} - \frac{2m_1}{m_1+m_2} \frac{\langle v_2 - v_1, c_2 - c_1 \rangle}{\| c_2 - c_1 \|^2}(c_2 - c_1)$

The wikipedia page on elastic collision has a bunch more references and details regarding this process.