HTML and CSS Reference
In-Depth Information
something is at the start of a particular frame, how fast it is moving, and in what direction, you know where
to put it at the start of the next frame.
The speed part of it is usually defined in terms of pixels per frame. In other words, if an object is at a
certain point as it enters a frame, it's going to be so many pixels away from that point at the end of the
frame.
In most cases, using pixels per frame works fine, and it is definitely the simplest to program. However, due
to the unstable nature of frame rates in the web browser, using pixels per frame might make your
animation slow down at certain points when too much is happening, there is too much to compute, or the
computer is busy doing something else. If you are programming some kind of game or simulation in which
it is crucial that the animation proceeds at a uniform rate, you might want to use an interval-based
animation instead. We included an example of that approach in Chapter 19.
Before we start coding velocity, let's talk a little bit about vectors, because that's how velocity is generally
depicted.
Vectors and velocity
A
vector
is something that has magnitude and direction. In the case of velocity, the magnitude is the
speed. Vectors are drawn as arrows. The length of the arrow is its magnitude, and the direction the arrow
is pointing in is, naturally, the direction of the vector. Figure 5-1 shows some vectors.
Figure 5-1.
A few vectors
It's important to understand that magnitude is always positive. Even a vector with a perceived negative
magnitude is just a vector going in the opposite direction, as illustrated in Figure 5-2.
