HTML and CSS Reference
In-Depth Information
Technically, kinetic energy is not a vector, so although you use the
v
for velocity, it deals with only the
magnitude of the velocity. It doesn't care about the direction, but that won't hurt your calculations.
Now, it happens that the kinetic energy before and after a collision remains the same. So, you can do
something like this:
KE0 + KE1 = KE0Final + KE1Final
or
(0.5 × m0 × v0
2
) + (0.5 × m1 × v1
2
) = (0.5 × m0 × v0Final
2
) + (0.5 × m1 × v1Final
2
)
You can then factor out the
0.5
values to get this:
(m0 × v0
2
) + (m1 × v1
2
) = (m0 × v0Final
2
) + (m1 × v1Final
2
)
Notice that you have a different equation with the same two unknown variables:
v0Final
and
v1Final
.
You can now factor these out and come up with a single equation for each unknown. These are the
formulas that you end up with when all is done:
(m0 - m1) × v0 + 2 × m1 × v1
v0Final = ----------------------------
m0 + m1
(m1 - m0) × v1 + 2 × m0 × v0
v1Final = ----------------------------
m0 + m1
Now you can see why you have reached a pinnacle of complexity in this topic. Actually, you haven't quite
reached it yet. You're about to apply this to one axis, and after that, you're going to dive in and add
coordinate rotation to it when you move to two axes. Hold on!
Conservation of Momentum on One Axis
Now that you've got the formulas, you can start animating with them. For this first example, you'll again
use the
Ball
class, but we've added a
mass
property to it. Here is the new code (
ball.js
):
function Ball (radius, color) {
if (radius === undefined) { radius = 40; }
if (color === undefined) { color = "#ff0000"; }
this.x = 0;
this.y = 0;
this.radius = radius;
this.vx = 0;
this.vy = 0;
this.mass = 1;
this.rotation = 0;
this.scaleX = 1;
this.scaleY = 1;
this.color = utils.parseColor(color);
this.lineWidth = 1;
}
