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

Canvas and Recursive Drawing

One benefit of immediate mode drawing is the lack of an intervening data structure that we’d have to create and manipulate to keep track of drawing elements; with immediate mode drawing, you can just fire and forget drawing commands, layering them as thick as you like. This makes Canvas particularly useful for high-density, recursive drawing functions like fractals. Recursive functions are defined as those that call themselves. By feeding the last set of results generated by a function back into the function itself, we create a kind of software feedback loop. The following example calls itself recursively 10 times:

var rescurse(value1, value2) {
    if (value1 <= 0) return;
    recurse(value1, value2);

The previous example is not particularly exciting, but it demonstrates two important aspects of recursive functions:

  • Values are adjusted within the recursive function and fed back into it.

  • We need a test to break out of otherwise infinite recursive loops.

Instead of applying simple increments and decrements, what if we did something more interesting involving a little bit of trigonometry and some random elements? Figure 6-14 shows a recursively drawn tree that uses simple Canvas-line drawing commands. The natural-looking effect is a recognizable feature of recursive graphical functions. Notice how the final tips of the branches look very refined and thin. This is due to the previously discussed fractional pixel anti-aliasing.

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