Johan van Mol .org - Collision detection & bouncing part 2: actionscript examples of collision detection: demo 2: collision detection before the ball hits the wall

Johan van Mol .org

Home

Articles

Blog

Advanced Search

Home

Articles

Flash

Collision detection & bouncing part 2: actionscript examples of collision detection

Tuesday, 06 June 2006

Article Index
Collision detection & bouncing part 2: actionscript examples of collision detection
demo 1: A ball hitting a wall
demo 2: collision detection before the ball hits the wall
demo 3: the ball approaching the wall at a sharp angle
demo 4: the ultimate ball-hits-wall algorithm
demo 5: a polygon hitting a wall

Page 3 of 6

Demo 2 : collision detection before the ball hits the wall

Download all demos' source code as zip | view this demo's source code in a new window

In this demo we want to detect the collision before the ball hits the wall. In the previous demo we used a line segment between the ball's current center and the ball's new center to detect a collision. But a ball doesn't hit a wall with it's center, rather with it's edge. All we need to do is use a line segment between the ball's current edge and the ball's new edge in the direction of the speed. To make it easy on ourselves we'll use the ball's current center and it's new edge.

The source code is almost the same as the first demo, except this part of the step() function:

var vrVector = this.v.plus(this.v.getNormalized().cross(this.radius));
...
var bCollision = false;
for (var i=0; i<this.walls.length; i++){
   if ( checkCollision({x: this.ball_mc._x, y:this.ball_mc._y},
                       vrVector,
   {x:this.walls[i].x, y:this.walls[i].y},
                       this.walls[i].v) ) {
      ...
   }
}

vrVector is the speed vector plus the radius. More precisely it's the speed vector plus a new vector co-linear with the speed vector with a length of radius.
this.v.getNormalized() returns a vector co-linear with this.v but with length of 1.
Vector.cross(this.radius) multiplies the vector by the radius.
This vector is added to the existing speed vector.
The new vector is used in the checkCollision() function.

OK, we're getting there. This algorithm detects the collision before the ball goes through the wall... in most cases. When the ball approached the wall at a sharp angle, it will go through. Check the demo below.

<< Previous - Next >>

Comments

thank you so much for this!!
i have been searching for weeks to find this
Posted by Roman Vaughan, Whose homepage is http://smartie.awardspace.com/ on Thursday, 03 August 2006 at 7:21

This is the best collision detection explanation and example I have seen for flash yet! Much better than using a simple hitTest or whatever, thanks so much!
Posted by Vince, Whose homepage is http://kamazar.com on Sunday, 07 January 2007 at 12:56

There are some good flash tutorials dealing with collisions on www.tonypa.pri.ee. The website should provide some extra reference material for those interested.
Posted by Mike Hamman, on Friday, 11 April 2008 at 4:06

Thanks, this is the most on to it explanation I've had. Will allow for some truly dynamic realistic collisions. Are you still building on this?
Posted by Alexis, Whose homepage is http://www.joomlabear.com on Sunday, 29 June 2008 at 5:22

You are not authorized to leave comments - please login.