Demo 1 : A ball hitting a wall

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

Overview of the application

Collision detection

The actual collision detection is done in the step() function. We loop through the walls array and try to find an intersection of the line segment representing the wall and the line segment defined by the ball's current position and the ball's new position.
The function checkCollision() returns true if the two line segments intersect. It uses the algorithm described in article 1.
Note how easy the implementation looks, as opposed to the theory in article 1. The checkCollision() function takes 4 paramaters: the starting points of both line segments and the vectors describing the length and direction of both line segments.



function step() {
   ...
   var bCollision = false;
   for (var i=0; i<this.walls.length; i++){
      if ( checkCollision({x: this.ball_mc._x, y:this.ball_mc._y},
                          this.v,
                          {x:this.walls[i].x, y:this.walls[i].y},
                          this.walls[i].v) ) {
      bCollision = true;
      break;
   }
   ...
}

private function checkCollision(p1:Object, S1:Vector, p2:Object, S2:Vector):Boolean {
   var div = -S2.x * S1.y + S1.x * S2.y;
   var s = (-S1.y * (p1.x - p2.x) + S1.x * (p1.y - p2.y)) / div;
   var t = (S2.x * (p1.y - p2.y) - S2.y * (p1.x - p2.x)) / div;
   if (t >= 0 && t <= 1 && s >= 0 && s <= 1) {
      // draw mark at intersection
      var ix = p1.x + t * S1.x;
      var iy = p1.y + t * S1.y;
      this.drawCross(debug_mc, ix, iy, 0xCC0000);
      return true;
   } else {
      return false;
   }
}

The collision detection goes well. There's one problem though: the collision is detected after the ball has gone through the wall. Once we start bouncing, this will look ackward.