Emanuele Feronato

Talking about HTML5, Javascript, Phaser and TypeScript.

If you read the post about continuous collision detection between a moving circle and a non axis aligned line, it’s time to see how to manage ball bounces.

So we are going to predict the collision as in previous step, and we’ll also predict ball bounce.

As usual, with the simulation:

You can drag all interactive spots to change circle position, radius, velocity, as well as line direction.

How can we manage bounce? First, we iterate through the four steps explained in previous post:

1 – We find the intersection point between the velocity line (displayed in blue) and the obstacle line (displayed in orange).

2 – We find the shortest distance from the moving circle center (displayed in yellow) and the obstacle line (displayed in orange). Such distance is displayed in green.

3 – We find the ratio between circle radius and the above distance.

4 – Finally we ideally place the circle center on the intersection point explained at step 1 and then move it towards yellow circle center by a certain amount. Which amount? Zero pixels if the ratio at step 3 is zero, whole distance between circle and the point found at step 1 if the ratio at step 3 is one, and anywhere in between according to the value we got at step 3.

Then, there are two new steps:

5 – We find the reflection angle of velocity line on obstacle line.

6 – We move the destination circle towards reflection angle by the amount of the distance from circle center found at step 4 and the virtual (gray) circle destination.

That easy. Now, the intersting and difficult part is to handle the case when we aren’t dealing with an infinite line but with a segment line, and the circle hits a vertex.

Then we will finally be able to write a function to predict the collision between a moving circle and any amount of segment lines, hopefully this week if my brain won’t melt looking for a simple algorithm.