• Choose a category
• All
• Classic-Fiction

function testWalls() {

var ball;

var testBall;

for (var i = 0; i ball = balls[i];

if (ball.nextx+ball.radius > theCanvas.width) {

ball.velocityx = ball.velocityx*−1;

ball.nextx = theCanvas.width - ball.radius;

} else if (ball.nextx-ball.radius < 0 ) {

ball.velocityx = ball.velocityx*−1;

ball.nextx = ball.radius;

} else if (ball.nexty+ball.radius > theCanvas.height ) {

ball.velocityy = ball.velocityy*−1;

ball.nexty = theCanvas.height - ball.radius;

} else if(ball.nexty-ball.radius < 0) {

ball.velocityy = ball.velocityy*−1;

ball.nexty = ball.radius;

}

}

}

Collisions with balls

The collide() function tests to see whether any balls have hit one another. This function uses two nested loops, both iterating through the balls array to ensure we test each ball against every other ball. We take the ball from the first loop of the balls array, and place it into the ball variable. Then we loop through balls again, placing each ball in the testBall variable, one at a time. When we have both ball and testBall, we make sure they are not equal to one another. We do this because a ball will always have a false positive collision if we test it against itself. When we are sure they are not the same ball, we call hitTestCircle() to test for a collision. If we find one, we call collideBalls(), and then all hell breaks loose. (OK, not really, but the balls do collide, and some really interesting code gets executed.) See that code here:

function collide() {

var ball;

var testBall;

for (var i = 0; i ball = balls[i];

for (var j = i+1; j < balls.length; j++) {

testBall = balls[j];

if (hitTestCircle(ball,testBall)) {

collideBalls(ball,testBall);

}

}

}

}

Ball collisions in depth

So now we get to the most interesting code of this example. We are going to update the properties of each ball so they appear to bounce off one another. Recall that we use the nextx and nexty properties because we want to make sure to test where the balls will be after they are drawn—not where they are right now. This helps keep the balls from overlapping in a way that will make them stick together.

NOTE

Sometimes the balls will still stick together. This is a common problem when creating collisions among balls. This happens when balls overlap one another before the collision test, and the reaction bounce is not enough to split them apart completely. We have made every attempt to optimize this function for the canvas, but we are sure further optimizations are possible.

The collideBalls() function takes two parameters: ball1 and ball2. Both parameters are the ball objects that we want to make collide:

function collideBalls(ball1,ball2) {

First, we need to calculate the difference between the center points of each ball. We store this as dx and dy (difference x and difference y). This should look familiar because we did something similar when we tested for a collision between the balls. The difference is that now we know they have collided, and we want to know how that collision occurred:

var dx = ball1.nextx - ball2.nextx;

var dy = ball1.nexty - ball2.nexty;

To do this, we need to find the angle of the collision using the Math.atan2() function. This function gives us the angle in radians of the collisions between the two balls. This is the line of action or angle of collision. We need this value so that we can determine how the balls will react when they collide:

var collisionAngle = Math.atan2(dy, dx);

Next, we calculate the velocity vector for each ball given the x and y velocities that existed before the collision occurred:

var speed1 = Math.sqrt(ball1.velocityx * ball1.velocityx +

ball1.velocityy * ball1.velocityy);

var speed2 = Math.sqrt(ball2.velocityx * ball2.velocityx +

ball2.velocityy * ball2.velocityy);

Then, we calculate angles (in radians) for each ball given its current velocities:

var direction1 = Math.atan2(ball1.velocityy, ball1.velocityx);

var direction2