Phase 4: Making the Ball Bounce off Walls

Collision Detection Logic

The logic behind making the ball bounce back off the wall on impact was pretty much the most complex part of the whole project. However this wasn't any rocket science. Below please find a clear explanation of how I have detected the collision and the calculation behind keeping the ball move after impact.

I always tend to start from the easy part and then moving on to the real stuff. Therefore lets start with the logic behind detecting the collision between the ball the the canvas boundaries. The first thing I did was a list of facts about the ball canvas as shown below.

• Ball diameter: 20 pixels
• Canvas width: 320 pixels
• Canvas height: 480 pixels

Figure 4.1

As shown in the diagram above, we can detect that the ball has hit any boundaries by knowing the minimum and maximum x and y coordinates. This way, when the ball is drawn using these coordinates, the application will detect that the ball has reached one of the limits and a calculation is performed to get the new angle of projection. Taking into consideration that the ball will always be reflected at a 90 degrees angle to the angle of impact, the following diagram was drawn to demonstrate how the angle of projection will be calculated.

Figure 4.2

When the ball hits one of the boundaries, a calculation will need to be performed depending on which wall is hit. A variable will be used to assign a number to each wall. This number will be used to call the correct calculation depending on which wall is hit. In the diagram shown above, we can see that when the ball has an x coordinate equal or greater than 310, the ball will need to bounce back off the wall using a calculation as follows:

Imagine that the ball started the path with an angle of angle degrees. Therefore angle m is equivalent to angle subtracted from 180 degrees (angles on a straight line). Keeping in mind that the ball will always be reflected by an angle of 90 degrees, the new angle of projection can be obtained by subtracting angle m from 90. In order to calculate the new x and y coordinates of the ball after hitting the right wall, the following calculation must be performed; 

remainingRadius = radius - currentRadius

sin(newAngle) = y / remainingRadius 

sin(newAngle) *  remainingRadius  = y

cos(newAngle) = x / remainingRadius 

cos(newAngle) *  remainingRadius = x

The remainingRadius variable is the radius that will need to be covered by the ball after hitting a wall. This is very important as if the original radius is used, then the ball would move the original distance once again after hitting the wall, hence not being physically sound. The startMovement() and updateCanvas() functions will then be repeated once again until the ball covers the whole distance chosen by the player. 

Implementing the Logic

//giving the function the radius and returning the new x position
function getBounceX(r) {
var radAngle = bounceAngle * (Math.PI / 180);
var result = Math.sin(radAngle) * r;
return result;
}

The function above is being given the remainingRadius of the ball from the startMovement() function and returning the new x coordinate of the ball after bounce.

//giving the function the radius and returning the new y position
function getBounceY(r) {
var radAngle = bounceAngle * (Math.PI / 180);
var result = Math.cos(radAngle) * r;
return result;

}

The function above is being given the remainingRadius of the ball from the startMovement() function and returning the new y coordinate of the ball after bounce.

//check if ball hit the left and right wall
if (ballNewX <= 10){
remainingRadius = radius - currentRadius;
currentRadius = 0;
bounceAngle = (180-(90-angle));
ballx = ballNewX;
bally = ballNewY;
bounceCount=1;    

The function above was added to the startMovement() function to check whether the new x coordinate of the ball is greater or equal to 10 pixels. This means that the function is checking whether the ball has hit the left wall. Three similar functions where implemented to check whether the ball has hit any of the canvas boundaries. If the value is true, than the function will calculate the remaining distance to be covered by the ball after impact, calculate the new angle and increment the bounceCount variable by 1 so that the function moving the ball knows that the ball is moving after impact, rather than after being launched by the player.

if (currentRadius < remainingRadius && bounceCount == 1){
ballNewX = ballx + getBounceX(currentRadius);
ballNewY = bally + getBounceY(currentRadius);
currentRadius++;
setTimeout("updateCanvas();startMovement();", delay);
} 

The function above is also part of the startMovement() function which creates a series of new x and y coordinates of the ball to continue the movement until the ball covers the whole radius after impact.