Predicting Collision Points With Math in AS3

In my previous tutorial about collision detection between a circle and a line, I covered projection on a line using the dot product of a vector. In this tutorial, we shall look at the perpendicular dot product and use it to predict the point of intersection for two lines.

---

Final Result Preview

Let’s take a look at the final result we will be working towards. Use the left and right arrow keys to steer the ship (triangle), and press up to boost the speed temporarily. If the projected future collision point is on the wall (the line), a red dot will be painted on it. For a collision that “already” happened (i.e. would have happened in the past, based on the current direction), a red dot will still be painted but slightly transparent.

You can also mouse click and drag the black dots to move the wall. Note that we don’t just predict the location of the collision, but also the time.

---

Step 1: Revision

Before getting into the topic, let’s do some revision. Here’s the dot product equation (previously covered here):

And here’s the perpendicular dot product definition as extracted from Wolfram:

---

Step 2: Perpendicular Dot Product

Now to help us form a mental picture, I’ve prepared the image below. I’m confident at this point you are able to derive the vertical and horizontal components of a vector, so the components involving sine and cosine shouldn’t be a challenge.

Let’s substitute both components with their equivalent. I have used A with a hat to represent the unit vector of A (that is, a vector that points in the same direction as A, but has a magnitude of exactly 1). Another detail is that the perpendicular of B is actually the right normal of B – more on normals next step.

From the diagram above we can see that the projection of B on A will produce |B|*cos (theta). But why would the projection of B’s normal produce |B|*sin (theta)? [...]

Read more: Predicting Collision Points With Math in AS3