Supercharged JavaScript Graphics

Chapter 7. Vectors for Games and Simulations

Most programmers will agree that programming is a lot more fun than mathematics, but there are certain circumstances where a little bit of math knowledge can go a long way. As a “value added” math subject, vectors punch way above their weight in terms of useful functionality. Mix together a few other math ingredients, and you have a versatile vector toolkit that can be used for all sorts of applications. Don’t worry if math isn’t your strong point; the JavaScript equivalents of equations will always be provided. Although it can be a benefit if you understand the underlying mathematics, it is not crucial.

Vectors are typically described as a quantity that has both a magnitude (length) and direction. Exactly what does this mean? Some simple examples illustrate the concept best.

• Nonvectors:

  • 2 miles

  • 12 inches

  • 1 kilometer

• Vectors:

  • 2 miles north

  • 12 inches to the right

  • 1 kilometer northeast

Why are vectors useful? Because they make all sorts of movement and spacial behavior a lot easier to understand and implement in code. Vectors can be added, scaled, rotated, and pointed at things. They also form the foundation of more sophisticated programming subjects like physics simulations. Most importantly, when you get the hang of them, they are huge amounts of fun.

The real-world distances and directions described in the preceding lists are familiar and make sense; however, as JavaScript programmers, we are more interested in measurements and directions ...