Applying the Conservation Laws

The derivation of the equations here is also shown worked out on paper in collision_reaction.pdf in the Chapter06 directory on the CD-ROM.

In this section we'll apply these two conservation laws to help us find the motion of objects after a collision.

You may be wondering why we have introduced these conservation laws. The reason is that we're going to apply them to help us find the motion of objects after a collision we are looking for structures and relationships that will enable us to determine the new velocities of objects after they collide. In this section we'll derive the equations that can tell us the new velocities of two collided objects. We will then apply these equations in two cases: two rectangles colliding and two billiard balls colliding.

Let's assume that two objects, object1 and object2, are moving toward each other. Object1 is of mass m1 and velocity v1i, and object2 is of mass m2 and velocity v2i. The two objects collide elastically. We want to learn the new velocities of each object after the collision.

In the equations below, i signifies "initial" and f signifies "final."

Before the collision

Momentum of the objects:

 p1i = m1*v1i  p2i = m2*v2i Pi = p1i+p2i 

Kinetic energy of the objects:

 ke1i = (1/2)*m1*v1i2  ke2i = (1/2)*m2*v2i2 KEi = ke1i+ke2i 

After the collision

 p1f = m1*v1f  p2f = m2*v2f Pf = p1f+p2f 

Kinetic energy of the objects:

 ke1f = (1/2)*m1*v1f2  ke2f = (1/2)*m2*v2f2 KEf = ke1f+ke2f 

Apply the law of the conservation of momentum

 Pi = Pf = P  m1*v1i+m2*v2i = m1*v1f+m2*v2f KEi = Kef (1/2)*m1*v1i2+(1/2)*m2*v2i2 = (1/2)*m1*v1f2+(1/2)*m2*v2f2 

Rearranging and combining the two equations above, we get the following:

 v1i-v2i = v2f-v1f  V = v1i-v2i 

So,

 v1f = v2f-V  

Using the above equation with the equation for P, we get the final results:

 v2f = (P+V*m1)/(m1+m2)  v1f = v2f-v1i+v2i 

If you are interested in seeing more of the in-between steps in the above derivation, you can check out collision_reaction.pdf in the Chapter06 directory. To use this information, all we need to do is calculate the values for P and V, and then use the last two equations. In the next section, we'll look at an example of how we might use this in Flash.

Rectangle-Rectangle Reactions

Open rectangle_rectangle.fla in the Chapter06 directory. You may notice that this is the same file we used in Chapter 5, "Collision Detection" with a few modifications and additions. During the object definitions at the beginning of the ActionScript, we add rectangle1.mass = 1 and rectangle2.mass = 1. In conservation-of-momentum situations (for example, collisions), the mass of any one specific object is not important. What is important is the relative masses how the masses compare. Here, as you can see, both objects have a mass of 1. If we set the mass of both objects to 1,000,000, the result would be the same. If the mass of rectangle1 is 5 and the mass of rectangle2 is 1, then rectangle1 is five times as massive as rectangle2. This would produce the same results as if rectangle1 had a mass of 50 and rectangle2 had a mass of 10 (in both cases, the mass ratio is 5 to 1).

Another change to this file is that instead of executing a trace action when a collision is detected, we execute a function called reaction(). This function calculates the new velocities of the objects after they have collided.

 1   function reaction (a, b) { 2      var m1 = a.mass 3      var m2 = b.mass 4      var v1i = a.xmov 5      var v2i = b.xmov 6      var V = v1i-v2i 7      var P = m1*v1i+m2*v2i 8      //the new x speed of b 9      var v2f = (P+m1*V)/(m1+m2) 10     //the new x speed of a 11     var v1f = v2f-v1i+v2i 12     //take the new speeds and put them in the objects 13     a.xmov = v1f 14     b.xmov = v2f 15     //update the tempx positions with the new speeds 16     a.tempx = a.x+a.xmov 17     b.tempx = b.x+b.xmov 18  } 

The parameters a and b are references to the rectangle objects. They are passed into this function when it is called. Lines 2 and 3 set the mass variables. Lines 4 and 5 set the initial speed variables. The next two lines set the quantities V and P. Lines 9 and 11 solve for the new speed of each object. We then take these new speeds and update the xmov variable in each of the objects (lines 13 and 14). And since we are updating the xmov variables, we also need to update the tempx variables (lines 16 and 17).

To see an example of this in Flash (not in a game) with multiple rectangles of different masses, check out railroad.fla in the Chapter06 directory. This file was created with Flash 5, so don't be surprised if the ActionScript looks a little different from what you would expect with Flash MX.

Generate a SWF to test this file. You will see that when the two objects collide, they rebound realistically. You can change the mass values of each of the rectangles to convince yourself that the physical realism holds up.

Circle-Circle (Billiard-Ball) Reactions

The steps involved in showing the realistic reaction from colliding billiard balls are more complicated than those for a reaction of two rectangles. The conservation equations we developed do not change at all; the trick is to figure out what is conserved. Remember, when two objects collide, the momentum affected is the component that lies along the line of action. For instance, in the rectangle collision discussed above, the line of action is the imaginary line between the two centers of the rectangles, which is along the x-axis. Therefore, the momentum affected lies along the x-axis. If these two rectangles were also moving in the y direction, then their y velocities would be unaffected when colliding. When two balls are colliding, their line of action is drawn between the two centers. The amount of momentum that lies along this line is what is affected in the collision. So we must use trigonometry to find the velocity of each ball that lies along this line. Finding the amount of one vector that lies along another line is called projection, and it was covered extensively in Chapter 3, "Trigonometry 101." Here we project the x and y velocities of each ball onto the line of action. The velocity components that lie along the line of action are what are affected by the collision. We can then use the conservation equations to find the new velocities. With the new velocities, we can project backward to get the new velocities along the x and y axes.

If this sounds confusing, that's only because it is confusing! If you just want to use the result, then skip ahead a few pages to where we dissect the FLA file. If you are interested in understanding how we arrive at the ActionScript, then stay right here. (And if you want to see this worked out on paper, then open up billiard_ball_reactions.pdf from the CD.)

We have two billiard balls, ball1 of x velocity xvel1 and y velocity yvel1, and ball2 of x velocity xvel2 and y velocity yvel2. Our goal is to project the x and y velocities onto the line of action. We can then apply the conservation equations to these velocities.

The velocity along the line of action from the projection of ball1's x and y velocities we call xvel1prime, and it is calculated as follows:

xvel1prime = xvel1*cos(theta)+yvel1*sin(theta)

This equation is made up of the projection of the x and y velocities of ball1 using the angle theta, which is the angle that the line of collision makes with the x-axis. The component of the velocity of ball1 that is perpendicular to the line of action (which is unaffected by the collision) is

yvel1prime = yvel1*cos(theta)-xvel1*sin(theta)

You'll see that this equation is also a combination of the projection of the x and y velocities of ball1. The component of the ball2 velocity that lies along the line of action we call xvel2prime:

xvel2prime = xvel2*cos(theta)+yvel2*sin(theta)

The component of the velocity of ball2 that is perpendicular to the line of action (which is unaffected by the collision) is

yvel2prime = yvel2*cos(theta)-xvel2*sin(theta)

Using the conservation equations developed earlier in this section, we use the mass of each ball, along with xvel1prime and xvel2prime, to find the new "rebounded" velocities of each ball along the line of action. They are v1f and v2f (as above, f indicates "final").

Using v1f and v2f and yvel1prime and yvel2prime, we can find the new velocities along Flash's x and y axes. This requires us to project back out from the line of action to the axes using the angle theta. Here are the new velocities of each ball.

xvel1 = v1f*cos(theta)-yvel1prime*sin(theta)

yvel1 = yvel1prime*cos(theta)+v1f*sin(theta)

xvel2 = v2fcos(theta)-yvel2prime*sin(theta)

yvel2 = yvel2prime*cos(theta)+v2f*sin(theta)

And here's a boiled-down recap of the process we've just completed:

1. Project the x and y velocities of each ball onto the line of action. This is necessary because at the time of collision the only velocities (momentums) affected are those that lie along the line of action.

2. Apply the conservation equations to these projected velocities to find the new velocities after the collision.

3. Using the new velocities along the line of action and the velocities perpendicular to the line of action, project everything back onto Flash's x and y axes. This will provide the final new velocities after a collision has occurred.

Now let's see this in ActionScript. Open billiard_ball.fla in the Chapter06 directory. The ActionScript in this file is almost identical to that of circle_circle2.fla in Chapter 5, "Collision Detection." The differences in the ActionScript are as follows:

1. We add a mass variable to the ball objects during the object definitions at the beginning of the ActionScript. For the ball1 object we set the mass to 1 with the action game.ball1.mass = 1, and for the ball2 object we set the mass to 1 with the similar statement game.ball2.mass = 1.

2. In the ballToBallDetection() function, we no longer execute a trace action when a collision is detected. Instead, we call a function called ball2BallReaction(). When it's called, we pass the ball2BallReaction() function the following information:

    b1, b2, xl1, xl2, yl1, yl2, whatTime  

   If you remember, b1 and b2 are references to the ball objects, xl1 and yl1 are the starting positions of ball1, xl2 and yl2 are the starting positions of ball2, and whatTime is the number of frames since the last frame that it takes for the collision to occur (this number is between 0 and 1).

3. We add a function called ball2BallReaction(). This function calculates what the new velocities of each ball should be after the collision.

Here is the ball2BallReaction() function:

 1   function ball2BallReaction(b1, b2, x1, x2, y1, y2, time) { 2      //get the masses 3      var mass1 = b1.mass; 4      var mass2 = b2.mass; 5      // -----set initial velocity variables 6      var xVel1 = b1.xmov; 7      var xVel2 = b2.xmov; 8      var yVel1 = b1.ymov; 9      var yVel2 = b2.ymov; 10     var run = (x1-x2); 11     var rise = (y1-y2); 12     var Theta = Math.atan2(rise, run); 13     var cosTheta = math.cos(Theta); 14     var sinTheta = math.sin(Theta); 15     //Find the velocities along the line of action 16     var xVel1prime = xVel1*cosTheta+yVel1*sinTheta; 17     var xVel2prime = xVel2*cosTheta+yVel2*sinTheta; 18     //Find the velocities perpendicular to the line of action 19     var yVel1prime = yVel1*cosTheta-xVel1*sinTheta; 20     var yVel2prime = yVel2*cosTheta-xVel2*sinTheta; 21     // Conservation Equations 22     var P = (mass1*xVel1prime+mass2*xVel2prime); 23     var V = (xVel1prime-xVel2prime); 24     var v2f = (P+mass1*V)/(mass1+mass2); 25     var v1f = v2f-xVel1prime+xVel2prime; 26     var xVel1prime = v1f; 27     var xVel2prime = v2f; 28     //Project back to Flash's x and y axes 29     var xVel1 = xVel1prime*cosTheta-yVel1prime*sinTheta; 30     var xVel2 = xVel2prime*cosTheta-yVel2prime*sinTheta; 31     var yVel1 = yVel1prime*cosTheta+xVel1prime*sinTheta; 32     var yVel2 = yVel2prime*cosTheta+xVel2prime*sinTheta; 33     //change old pos 34     b1.tempx = b1.xpos+bl.xmov*time; 35     b1.tempy = b1.ypos+b1.ymov*time; 36     b2.tempx = b2.xpos+b2.xmov*time; 37     b2.tempy = b2.ypos+b2.ymov*time; 38     b1.xmov = xVel1; 39     b2.xmov = xVel2; 40     b1.ymov = yVel1; 41     b2.ymov = yVel2; 42  } 

Lines 2 9 in this ActionScript handle initializing all of the variables we need from the ball objects. References to the two colliding ball objects are passed into this function as b1 and b1. The variables being initialized are the x and y velocities of each ball and their masses. We need to know the angle of the line of action, so we calculate it in lines 10 12; in lines 10 and 11 we calculate the rise and run of the line of action, and then in line 12 we calculate the angle using atan2. Since we will be using the sine and cosine of theta several times, in lines 13 and 14 we set variables to hold those values so that they don't need to be calculated repeatedly. In lines 16 and 17 the velocity of each ball is projected onto the line of action. These are the velocities affected during the collision. Next, we calculate the velocities perpendicular to the line of action. They are only included to help us project back onto the Flash axes. In lines 21 27 the conservation equations are applied. The results of this (lines 26 and 27) are the new velocities along the line of action after the collision. Now that we have the new velocity along the line of action, we can translate back to Flash's x and y axes. We do this in lines 29 32. These are the new velocities of each ball, and need to be stored on each ball. But first we set the temporary position of the ball to be exactly where the balls should have been when they first collided (lines 34 37). Now we change the velocity on the ball objects in lines 38 41.

Generate a SWF to test this file. You will see that when the two balls collide, they react in a realistic way. Close the SWF and change the mass of one of the balls to something bigger, like 10 or 20. Then test the file again, and you will see that the conservation equations are working properly. You have just learned the hardest part of making a game of pool!

If you would like to look at another implementation of this, see realGravity.fla in the Chapter06 directory. This file was created with Flash 5 quite some time ago, so the ActionScript may look slightly different from what is presented here (but it still works perfectly well, of course). The file has collision detection and reactions of four massive spheres. Each sphere attracts all of the other spheres gravitationally. The result is four spheres slowly moving toward one another. When they collide, they bounce off each other.

Ever-Evolving ActionScript

I have written and rewritten collision detection and collision reaction scripts many times. And the more experienced I become as a programmer, the more and better ways I see to program these events. Everything that I have shown you so far has worked very well for me. But I will inevitably encounter a situation maybe even before finishing this book where one of the collision detection or reaction techniques that I have written does not do what it should. It may work great in most situations, but then one particular case crops up which I didn't take into account, and where my script won't work.

What I am saying is that these scripts are a great starting place. And for the games used in this book they work very well. But as Flash grows as a programming platform, and as the demand for complicated or original games gets larger, we will be forced to further refine these techniques techniques with which we currently see, and have, no problems. We may even have to scrap them for newer and better ways. If these issues of Flash growth and development interest you, then you should try to actively keep up by reading related topics on Flash resource sites. In addition, future revisions of this book will undoubtedly contain additions to these scripts, and some may even be completely rewritten.

In this chapter we covered the major types of collision reactions, including rectangle-rectangle reactions, billiard-ball reactions, and ball-line reactions. With this knowledge you will be able to add a new level of realism to your games. You will see the collision reactions you learned in this chapter applied to at least two of the games, 9-ball and Pinball, in Part 3 of this book.