OpenGL Collisions
Tags: opengl, graphics
Published: 2020-08-25 05:59:08

In simple terms, when an object makes contact with another object, a collision occurs. OpenGL uses various collision detection techniques to detect collisions that happen in your scene maintaining frame rate. The most primitive one is to approximate each object or a part of the object with a simple shapes such as <b>Circles, Rectangles and Points</b>.

### Approximating techniques

This is an example of approximating objects inside of a circle. To your left, you can see two complete polygons approximated into circles and to your right, you can see a parts of a polygon approximated into a set of small circles.

<table>
<tr>
<td>
<img src="https://i.imgur.com/4e0wECv.gif" height="176" style="height: 152px">
</td>
<td>
<img src="http://www.gamasutra.com/features/20000330/bobic_04.gif" height="152">
</td>
</tr>

<tr>
<td><center>Complete Object</center></td>
<td><center>Part of the Object</center></td>
</tr>
<figcaption>Images: Nick Bobic @ GAMASUTRA</figcaption>
</table>

Once the two circle touches or overlaps each other, a collision occurs.However there is one problem with approximation technique. After approximating into a simple shape, a collision occurs when the bounding shapes touches each other or overlaps each other. So as you can see in the above images, even though the actual polygons are not colliding, the bounding circles overlaps and collides. 

## Collision Types

<ol>

<li>Collision with the wall (wall – object)</li>

<li>Object - object collision
<ul>
<li>Circle – circle</li>
<li>Rectangle – rectangle</li>
<li>Circle – rectangle</li>
</ul>
</li>

<li>Object - point collision
<ul>
<li>Circle – point</li>
<li>Rectangle – point</li>
</ul>
</li>

</ol>

<br />

### Circle-Circle Collision

To detect a collision between a circle and another circle, the <b>circle-circle collision algorithm</b> is used.

Imagine two circles with with radius of r1 and r2 respectively. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w5bl9j6489c0q4ij3jk4.jpg)

If we get the distance between the two center points of the circle as <b>d</b>, the two circles touch each other when <b>d = r1 + r2</b>. And they overlap when <b>d < r1 + r2</b>.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/agt1kx5zfkqhbo5b6501.png)

So the circle-circle collision algorithm can be defined as follow.

``` 
A collision of two circles happen when Radius 1 + Radius 2 > = Distance.
```

### AABB - AABB Collisions

AABB stands for "Axis-Aligned Bounding Box". That means a rectangular shape aligned to the base axes of the scene. If we are using a 2D scene, the base axis being X and Y. 

Down below is an example of a circular object, surrounded by an AABB.

 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ngpxketyj1k0h7xi0foh.png)
<figcaption>Image: Learn OpenGL</figcaption>

When detecting collisions, We have to consider the both X and Y axis. Consider the following two AABBs. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hjk2c2p2nbm3udd1cpsf.jpg)

We can calculate the X range and Y range of the boxes separately as shown in the image above.

When the ranges collapse on each other on either axis, a collision occurs.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/44wago6ve9bakjydoc8b.png)
<figcaption>Image: Mozilla MDN</figcaption>

In the image above, you can see the X ranges are overlapping. Therefore a collision will occur. Same happens with the Y axis as well.


So far we discussed basic stuff about collisions, Circle-Circle collisions and AABB collisions. That is it for this blog. If you have any questions or feedback, feel free to comment below! Happy Coding!