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

A Cannon Simulation Using Vectors

Now that we’ve defined the vector object, we can use it to develop a simple cannon simulation (Figure 7-5). First, I should qualify the term “simulation”: our goal is not to try to replicate with absolute realism the physics of a cannon, but rather to create a simulation that is realistic enough for applications like games. Even the most advanced physics in games have to suspend reality somewhat. For example, human characters in games do not simulate physics to remain upright and walk, and aircraft in games do not simulate all the physics of flight to remain airborne.


Strictly speaking, for accurate simulations, you should factor the time elapsed per frame into your calculations. However, for the purposes of this demonstration, we’ll assume a frame rate of 30 milliseconds. In actuality, timers on certain browsers are not particularly accurate anyway, so the lack of time calculations is no great loss.

Simple cannon simulation using vectors and HTML5 Canvas

Figure 7-5. Simple cannon simulation using vectors and HTML5 Canvas

The simulation uses HTML5 Canvas to draw the graphics, although you could adapt it to work with any number of rendering methods in the browser (SVG, CSS3, etc.). The graphics are deliberately basic to keep the code’s focus on the use of vectors and the calculations required.

The cannon simulation will use vectors for the following:

  • To represent the aiming direction of the cannon

  • To represent ...

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