HTML and CSS Reference
In-Depth Information
You can place one of the balls just on the edge of the other one, but which one should you move?
Whichever one you moved would appear to “jump” into its new position unnaturally, which would be
especially noticeable at low speeds.
There are probably a number of ways to determine the correct placement of the balls, ranging from simple
to complex and accurate to totally faked. The simple solution we used for this first example is to add the
new velocity back to the objects, moving them apart again. This is realistic, quite simple, and
accomplished in two lines of code. You can also see that the total system momentum is still the same after
the collision, with -1/3 as the final velocity value for
vx0Final
and 5/3 for
vx1Final
:
(ball0.mass * ball0.vx) + (ball1.mass * ball1.v) = (2 * 1) + (1 * -1) = (2 * -1/3) + (1 * 5/3)
= 1
Later, in the “Solving a Potential Problem” section, you'll see a problem that can crop up with this method
and we'll work on a solution that's a little more robust.
Go ahead and load the
01-billiard-1.html
document in your browser. Change the masses and
velocities of each ball until you see what's going on, and then change the sizes of each. You'll see that the
size doesn't have anything to do with the reaction. In most cases, the larger object has a higher mass and
you can probably figure out the relative area of the two balls and set some realistic masses for their sizes.
But usually, it's more effective to just mess around with numbers for mass until things look and feel right.
We're creating visual programs, so, sometimes, the eye is the best judge.
Optimizing the Code
The worst part of this solution is that huge equation right in the middle of the code, and that we have
almost exactly the same equation in there twice. We should get rid of one of them.
But it's going to take a bit more math and algebra. You need to find the relative velocity of the two objects
before the condition; this is their combined total velocity. Then, after you get the final velocity of one object,
you can find the difference between it and the total velocity to get the final velocity for the other object.
You find the total velocity by
subtracting
the velocities of the two objects. That might seem strange, but
think of it from the viewpoint of the system. Let's imagine the system has two cars going the same
direction on a highway. One is moving at 50 mph and the other at 60 mph. Depending on which car you're
in, you can see the other car going at 10 mph or -10 mph. In other words, it's either slowly moving ahead
of you or falling behind you.
Before you do anything with collisions, you need to find out the total velocity (from
ball1
's viewpoint) by
subtracting
ball1.vx
from
ball0.vx
:
var vxTotal = ball0.vx - ball1.vx;
Then, after calculating
vx0Final
, add that to
vxTotal
, and you'll have
vx1Final
. This might not be the
most intuitive formula, but you'll see it works:
vx1Final = vxTotal + vx0Final;