You are previewing Supercharged JavaScript Graphics.

Supercharged JavaScript Graphics

Cover of Supercharged JavaScript Graphics by Raffaele Cecco Published by O'Reilly Media, Inc.
  1. Supercharged JavaScript Graphics
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. Preface
      1. Audience and Assumptions
      2. Organization
      3. Conventions Used in This Book
      4. Using Code Examples
      5. Safari® Books Online
      6. How to Contact Us
      7. Acknowledgments
    3. 1. Code Reuse and Optimization
      1. Keeping It Fast
      2. What and When to Optimize
      3. Homespun Code Profiling
      4. Optimizing JavaScript
      5. Optimizing jQuery and DOM Interaction
      6. Other Resources
    4. 2. DHTML Essentials
      1. Creating DHTML Sprites
      2. Converting into a jQuery Plug-in
      3. Timers, Speed, and Frame Rate
      4. Internet Explorer 6 Background Image Caching
    5. 3. Scrolling
      1. CSS-Only Scrolling Effects
      2. Scrolling with JavaScript
    6. 4. Advanced UI
      1. HTML5 Forms
      2. Using JavaScript UI Libraries
      3. Creating UI Elements from Scratch
    7. 5. Introduction to JavaScript Games
      1. Game Objects Overview
      2. The Game Code
    8. 6. HTML5 Canvas
      1. Canvas Support
      2. Bitmaps, Vectors, or Both?
      3. Canvas Limitations
      4. Canvas Versus SVG
      5. Canvas Versus Adobe Flash
      6. Canvas Exporters
      7. Canvas Drawing Basics
      8. Animating with Canvas
      9. Canvas and Recursive Drawing
      10. Replacing DHTML Sprites with Canvas Sprites
      11. A Graphical Chat Application with Canvas and WebSockets
    9. 7. Vectors for Games and Simulations
      1. Operations on Vectors
      2. Creating a JavaScript Vector Object
      3. A Cannon Simulation Using Vectors
      4. Rocket Simulation
    10. 8. Google Visualizations
      1. Limitations
      2. Chart Glossary
      3. Image Charts
      4. Interactive Charts
    11. 9. Reaching the Small Screen with jQuery Mobile
      1. jQuery Mobile
      2. TilePic: A Mobile-Friendly Web Application
      3. PhoneGap
    12. 10. Creating Android Apps with PhoneGap
      1. Installing PhoneGap
      2. Creating a PhoneGap Project in Eclipse
    13. Index
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly
O'Reilly logo

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 that ...

The best content for your career. Discover unlimited learning on demand for around $1/day.