demo 2: finding the closest wall

In some cases the ball will fly through the wall. Check this movie:


The problem is actually twofold: the ball goes trough the wall, but it also bounces in the wrong direction. This is hard to see in the flash movie, but the horizontal wall is hit first, so you would expect the ball the bounce up (the green line in the figure). But it bounces off the vertical wall to the left (the red line). Let's tackle this problem first.
To detect a collision we loop through the list of walls, as soon as a collision is detected we break the loop. So the ball will bounce as a result of the first collision encountered. But in this case the collision with the 3rd wall from the list (the horizontal wall) occurs before the collision with the 2nd wall (the vertical wall). We can use the t value returned by the checkCollision() function to determine which collision will happen first. The smaller the t value, the closer the ball is to the collision point.
In order to solve this problem we'll change the step() function. If the result of the checkCollision() function is not -1, when we have a collision, we create an object in which we store the result and the index of the wall. If this is the first result object, it is obviously also the best, so we also store it in the variable bestResultObj. If bestResultObj is defined already, we compare the last result with the best result and store the best (smallest isectRatio) in bestResultObj.
After looping through the walls list we handle the collision with the parameters defined in bestResultObj.

// collision detection
var bestResultObj;
var resultObj;
for (var i=0; i<this.walls.length; i++){
    ...
    var result = checkCollision({x: pt.x, y: pt.y},
                                this.v,
                                {x:this.walls[i].x, y:this.walls[i].y},
                                this.walls[i].v)
    if ( result != -1 ) {
        // create an object containing the portion of the
        // line segment traveled before the collision
        // and the index of the wall
        resultObj = new Object();
        resultObj.isectRatio = result;
        resultObj.wallIdx = i;
        // find out the closest match. This is the one with the lowest isectRatio
        if (bestResultObj == undefined) {
            bestResultObj = resultObj;
        } else {
            if (resultObj.isectRatio < bestResultObj.isectRatio) {
                bestResultObj = resultObj;
            }
        }
    }
}

if (bestResultObj != undefined) {
    // do all the bouncing stuff
    ...
}


This doesn't prevent the ball from flying through the wall, but at least if flies through the right wall.

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