An explanation of the separation axis theorem algorithm for collision detection

This article is translated from @sevenson's article separating Axis theorem (SAT) explanation. The original author uses ActionScript to write the algorithm, but the main story is the algorithm principle, I think once the principle of the algorithm is mastered by us, choose what programming language to implement the algorithm is a secondary thing.
I am not an English major, so the translation of the text is inappropriate or omissions, welcome you to correct, thank you!

The text reads as follows:

The separation axis theorem (abbreviated as the SAT) is a technique used to detect the collision of a convex polygon.

I'm not an expert on this, but when the need to detect collisions comes before me, I've done a lot of reading and finally implemented it in ActionScript 3.

I think I should share what I have learned and hope that everyone will not be in a bad place in this area:)

When I discovered that I needed to detect polygon collisions in flash, I happened to encounter a method called the separation axis theorem. But the only problem is that in order to really master it, I took a lot of effort.

After reading a lot of information about collision detection and referring to some code examples, this approach was finally understood by me.

To help other developers who are not proficient in math, I think I should write a brief introduction to how this algorithm works quickly. I've also introduced a demo that uses the separation axis theorem and the ActionScript 3 source code for everyone to download and use. (Translator: Demo and source code please check and download in the original text)

Note: The separation axis theorem requires a bit of knowledge of mathematical vectors, so before you delve into this algorithm, you'd better review the content.

Algorithm Brief

Fundamentally, the purpose of the separation axis theorem (and other collision algorithms) is to detect and determine if there is a gap between the two graphs. The method used in the separation axis theorem makes the algorithm itself seem very unique.

The best analogy to what I've heard about the separation axis theorem is this:

Suppose you take a torch from different angles to two graphs, then what kind of shadows will be cast onto the walls behind them?

If you use this method to process these two graphs from every angle, and you cannot find any gaps, then these two graphs will be in contact with each other. If you find a gap, then these two graphs are obviously not in contact with each other.

From a programmatic point of view, testing from every possible angle can make processing very dense. Fortunately, because of the nature of the polygon, you only need to detect a few of these critical angles.

The number of angles you need to detect is exactly the number of sides of this polygon. In other words, the maximum number of angles you need to detect is the sum of the two polygon edges you want to detect collisions. For example, two Pentagon need to detect 10 angles.

How to implement in code

This is a simple but rather verbose approach, the following are the basic steps:

Step One: take an edge out of the polygon that needs to be detected and find its normal vector (perpendicular to its vector), this vector will be one of our "projection axes".

Step Two: loop to get each point of the first polygon and project them onto this axis. (Record this polygon projected to the highest and lowest point on the axis)

Step Three: do the same with the second polygon.

Step four: get the projection of these two polygons separately, and detect whether the two projections overlap.

If you find a gap between these two projections to the "shadow" on the axis, then these two graphs must not intersect. But if there are no gaps, then they may be in contact, and you need to continue testing until you have finished detecting each edge of the two polygons. If you do not see any gaps after testing each side, then they collide with each other.

This algorithm is basically the case.

Incidentally, if you record which axis has the smallest projection overlap value (and how much overlap), you can use this value to separate the two graphs.

So how do we deal with circles?

In the separation axis theorem, the detection circle is somewhat singular compared to the detection polygon, but it is still achievable.

Most notably, the circle is not an edge, so there is no obvious axis for the projection. But it has a "not very obvious" projection axis. This axis is the line that passes through the center of the circle and the closest vertex to the center of the polygon.

After that, each projection axis of the other polygon is traversed by routine, and the projection overlap is detected.

Oh, by the way, in case you want to know how to project a circle onto an axis, you simply project the center of the Centre and then add and subtract the radius to get the projection length.

Advantages and Disadvantages

As with other collision detection techniques, the separation axis theorem algorithm has its own advantages and disadvantages. Here is a brief overview of some of its advantages and disadvantages:

Advantages

(translator: Originally foreigners also like to talk about the merits first, ah ~>~)

• The separation axis theorem algorithm is very fast-it perfectly uses the basic knowledge of mathematical vectors. As long as the gap is detected, you can immediately get the result and eliminate unnecessary operations.
• The separation axis theorem algorithm is very accurate-at least as far as I know. (Translator: Suddenly feel the author is not reliable Ah, embarrassed ...) ）

Insufficient

• The separation axis theorem algorithm is only suitable for convex polygons-complex graphics (translators: concave polygons, such as pentagram) cannot use this method unless you divide them into small convex polygons, and then test the small polygons in turn.
• The separation axis theorem algorithm does not tell you that a collision occurs on that side-it simply tells you how much overlap and the shortest distance you need to separate them.

Maybe this algorithm will have more advantages and disadvantages, but I think this should be the most important.

Summarize

I hope this article will help you understand the separation axis theorem algorithm. I have done my best to provide too much information and to explain it very concisely. (I'm not a math expert, so I'm sorry if I miss something)

Here are some pages that help me understand the separation axis theorem algorithm:

• harverycartel.org--has more detailed representations and a lot of cool examples. I have learned a lot on this page.
• gpwiki.org--has good explanations and code examples, which I use as a basis for writing my own code.
• Tony pa--Vector Tutorial, a good resource for learning vectors.
• GameDev.net forum--A forum member wrote the split axis theorem collision detection system, which brings me some computational ideas.

The following are the contents of the Translator's supplement

I have implemented this algorithm in JavaScript, and if you are interested, you can download the source code or view the online demo in the link provided below.

Source code Download View online Demo

An explanation of the separation axis theorem algorithm for collision detection