Johan van Mol .org - Collision detection & bouncing part 3: bouncing balls: demo4: rethinking the algorithm

Johan van Mol .org

Home

Articles

Blog

Advanced Search

Home

Articles

Flash

Collision detection & bouncing part 3: bouncing balls

Sunday, 10 September 2006

Article Index
Collision detection & bouncing part 3: bouncing balls
More about the dot product
demo 1: basic bouncing
demo 2: finding the closest wall
demo 3: recursive collision detection
demo4: rethinking the algorithm
demo5: bouncing off sloped walls
demo6: the last bug

Page 6 of 8

demo4: rethinking the algorithm

Hmm... time to rethink the algorithm. Do we need to check every wall? A ball can only collide with a wall if it's moving towards that wall and not when it's moving away from it. Moving towards a wall implies that the angle between the speed vector and the normal of the wall is greater than 90 degrees. So we need trigonometry after all? No, the sign of the dot product will tell us enough. If the dot product of the speed vector and the wall's normal < 0 then the angle is > 90 and the ball is moving towards the wall. This check does not only avoid hanging the application, but it is also an optimization. It depends on the geometry of the walls, but on the average half of the walls won't be checked. In code it looks like this: if (this.walls[i].n.dot(speedVec) < 0) {

private function move (x:Number, y:Number, speedVec:Vector) {
    // determine the new position by adding the speed vector
    var newX = x + speedVec.x;
    var newY = y + speedVec.y;

    // collision detection
    var bestResultObj;
    var resultObj;
    for (var i=0; i<this.walls.length; i++){
        // check collision, if speedVec moves a way from normal, don't check
        var result = -1;
        if (this.walls[i].n.dot(speedVec) < 0) {
            // find closest point to wall on the ball's edge
            var vec:Vector = this.walls[i].n.getInverted().cross(this.radius);
            var pt:Vector = new Vector(x, y).plus(vec);
            // check collision of the speed vector starting
// in the closest point and the line segment
            result = checkCollision({x: pt.x, y: pt.y},
                             speedVec,
                             {x:this.walls[i].x, y:this.walls[i].y},
                             this.walls[i].v);
        }
        ...

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

<< Previous - Next >>

Comments

Its a gr8 tutorial for how can we use vectors instead of trigonometry for motions and collisions
Posted by poonam sheth, Whose homepage is http://smspoonam.blogspot.com on Wednesday, 11 October 2006 at 10:17

There's a typo on step 3bis:
...the Y-component of Y...
instead of
...the Y-component of v...
but great work ;).
Posted by Fugus, on Thursday, 19 October 2006 at 12:47

I fixed the typo. Thanx.
Posted by Johan van Mol, on Thursday, 19 October 2006 at 3:06

Thanks for the great set of tutorials, very helpful!

One issue I've been trying to solve is dealing with walls that the ball can hit from either side. The direction of the normal throws things off. What I did was added an else after the 'if (this.walls[i].n.dot(speedVec) < 0) { ' block in move().

Instead of var vec:Vector = this.walls[i].n.getInverted().cross(this.radius); in the else I have it as var vec:Vector = this.walls[i].n.cross(this.radius);

This seems to work, but I'm worried I've recreated the bugs you addressed in demo4, and I'm guessing there might be a better solution out there.
Posted by peter, Whose homepage is http://www.thup.com/ on Thursday, 07 December 2006 at 11:17

do you got a tool to convert a drawed wallshape to this wall array that needed?
Posted by Peter, Whose homepage is http://index.hu on Wednesday, 30 May 2007 at 4:03

First I draw the shape in Illustrator and save the file in Illustrator 8 format. Open the file in a text editor, scroll to the bottom and you'll find something like
(Layer 1) Ln
... more stuff here ...
24 803 m
69 828 l
108 775 l
31 757 l
24 803 l
The numbers in front are the X and Y coordinates. 'm' means moveTo, 'l' means lineTo. I copy and paste these codes, save them as a string in actionscript and parse the string.
Posted by Johan van Mol, on Wednesday, 30 May 2007 at 5:20

You are not authorized to leave comments - please login.