Online Book Reader

HTML5 Canvas [73]

Multiple Balls Bouncing and Colliding

Now it’s time to step it up again. Testing balls bouncing off walls is one thing, but what about balls bouncing off one another? We will need to add some pretty intricate code to handle this type of interaction.

Ball interactions in physics

For this example, we are going to create an elastic collision, which means that the total kinetic energy of the objects is the same before and after the collision. This is known as the law of conservation of momentum (Newton’s third law). To do this, we will take the x and y velocities of two colliding balls, and draw a “line of action” between their centers. This is illustrated in Figure 5-8, which has been adapted from Jobe Makar and Ben Winiarczyk’s Macromedia’s Flash MX 2004 Game Design Demystified (Macromedia Press). Then we will create new x and y velocities for each ball based on this angle and the law of conservation of momentum.

To properly calculate conservation of momentum when balls collide on the canvas, we need to add a new property: mass. Mass is the measurement of how much a ball (or any object) resists any change in its velocity. Because collisions tend to change the velocity of objects, this is an important addition to the ball objects we will use on the canvas.

Figure 5-8. Two balls colliding at different angles with a line of action drawn between them

Making sure the balls don’t start on top of each other

We will work from the code we created for Example 5-6 (CH5EX6.html). The first big change to that code is to make sure the balls don’t randomly start on top of one another. If we let them start in the same location, they would be forever intertwined and would spin off into oblivion. To be honest, it looks pretty cool when that happens, but that’s not the result we are looking to achieve.

In canvasApp(), we set a variable named tempRadius to 5. We will use this value as the radius for each ball we create. Next, we create another new variable named placeOK and set it to false. When this is equal to true, we know we have found a place to put a ball that is not on top of another ball.

Next, we enter a while() loop that will continue to iterate as long as placeOK is false. Then, we set all the values for our new ball object:

tempRadius = 5;

var placeOK = false;

while (!placeOK) {

tempX = tempRadius*3 + (Math.floor(Math.random()*theCanvas.width)-tempRadius*3);

tempY = tempRadius*3 + (Math.floor(Math.random()*theCanvas.height)-tempRadius*3);

tempSpeed = 4;

tempAngle = Math.floor(Math.random()*360);

tempRadians = tempAngle * Math.PI/ 180;

tempvelocityx = Math.cos(tempRadians) * tempSpeed;

tempvelocityy = Math.sin(tempRadians) * tempSpeed;

Now, we need to make a dynamic object out of the values we just created and place that object into the tempBall variable. This is where we create a mass property for each ball. Again, we do this so that we can calculate the effect when the balls hit one another. For all the balls in this example, the mass will be the same—the value of tempRadius. We do this because, in our 2D environment, the relative size of each ball is a very simple way to create a value for mass. Since the mass and speed of each ball will be the same, they will affect each other in a similar way. Later, we will show you what happens when we create ball objects with different mass values.

Finally, we create nextX and nextY properties that are equal to x and y. We will use these values as “look ahead” properties to help alleviate collisions that occur “between” our iterations, which lead to overlapping balls and other oddities:

tempBall = {x:tempX,y:tempY, nextX: tempX, nextY: tempY, radius:tempRadius,

speed:tempSpeed, angle:tempAngle, velocityx:tempvelocityx,

velocityy:tempvelocityy, mass:tempRadius};

Now that we have our new dynamic ball object represented by the tempBall variable, we will test to see whether it can be placed at the tempX and