Tips and Tricks - HTML5 Animation with JavaScript - page 447

second elapsed. Because your vx and vy are now in terms of pixels per second, you can multiply them by
this fraction and know how much to move the object. Also, don't forget to reset the value of the time so
you can measure the next frame.
Test the example, and you see that the ball moves at about the same speed as the original. But the really
amazing thing is that no matter what frame rate the animation is played at, it still moves at the same
speed! Of course, higher rates make for a much smoother animation, and the lower ones are quite jumpy,
but the velocity itself should be consistent.
This method can also be used in a timer-based animation. It's not listed here, but take a look at document
13-time-based-2.html and see that the regular animation loop has been replaced with
window.setInterval , while continuing to apply velocity using getTimer . You can also adjust the fps
variable and see how the animation looks at different frame rates.
You can use this technique with any example in the topic that contains velocity. In doing so, you also need
to apply a similar technique to any acceleration or repeated forces, such as gravity, because these are
also time based. Values for acceleration have to be much larger when converted to this type of animation,
because acceleration is defined as distance per time interval per time interval. For example, gravity is
approximately 32 feet per second per second.
Where gravity might be something like 0.1 in our a frame-based animations, it has to be more like 300
here. Then you apply it like so:
vy += gravity * elapsed / 1000;
Go ahead and try gravity applied like this to the previous example, with a value of 300. You should find
that it looks about equal to the same frame-based animation with a gravity of 0.1. You can find this code in
the exercise 14-time-based-3.html .
Collisions between same-mass objects
Remember Chapter 11 and the conservation of momentum? That was some serious code. It happens you
can make it a little bit simpler when two objects of the same mass collide. Along the line of collision,
objects simply swap their velocities. Although you still use coordinate rotation to determine that line of
collision, as well as the object's velocities on it, this wipes out the complex conservation of momentum
stuff. To see how it works, let's go back to the example 06-multi-billiard-2.html in Chapter 11, and
use that as the base for the next example, 15-same-mass.html . It's a big file, so all of the code from the
original won't be listed here, but look at the for loop that create all the balls near the top of the script:
for (var radius, ball, i = 0; i < numBalls; i++) {
radius = Math.random() * 20 + 15;
ball = new Ball(radius, Math.random() * 0xffffff);
ball.mass = radius;
ball.x = Math.random() * canvas.width;
ball.y = Math.random() * canvas.height;
ball.vx = Math.random() * 10 - 5;
ball.vy = Math.random() * 10 - 5;
balls.push(ball);
}