Supercharged JavaScript Graphics

Preface

Having been a video game developer for many years and being used to working with high-performance programming languages and hardware, I initially had modest expectations of graphics programming with JavaScript. What I actually found was an excellent and efficient programming language that is continually being leveraged with better browsers, performance enhancements, and exciting new facilities. Combined with features such as Canvas, JavaScript offers web developers a truly viable alternative to plug-ins such as Adobe Flash, and features such as WebGL ensure a very bright future for graphics programming using JavaScript and a browser.

This book is for those who have a good working knowledge of JavaScript and would like to experiment with graphics programming that goes beyond simple hover effects or relying purely on the animation facilities of libraries such as jQuery. Within these pages, I cover various graphics-related subjects, including:

• Reusing and optimizing code, including inheritance techniques and performance tips

• Taking advantage of the surprising graphics power of regular DOM manipulation (DHTML)

• Using the Canvas element for additional graphics power

• Creating video games

• Using math for creative graphics and animation

• Presenting your data in creative ways with the Google Visualizations API and Google Chart Tools

• Using jQuery effectively and developing graphically oriented jQuery plug-ins

• Creating graphically rich web applications suitable for mobile devices using jQuery Mobile

• Using PhoneGap to create native Android applications from your web applications

This fast-paced book will give you a broad kick-start into various graphics techniques, hopefully whetting your appetite for further exploration of the subjects covered.

Experiment and have fun!

Audience and Assumptions

Readers of this book should have a good working knowledge of creating websites and web applications—and in particular, the use of JavaScript.

I like jQuery because it speeds up development, and many of the code samples include this library by default. In general, any external libraries and associated files are included from a reliable content delivery network such as Google’s, thus avoiding the need for you to copy files to your own web space.

Math has been kept to a minimum, although some of the examples use basic vectors and trigonometry.

Organization

The book is fast paced, with the first graphics programming examples appearing in Chapter 1.

In the subsequent chapters, I cover a variety of graphics-oriented topics, focusing primarily on subjects that can add impressive visual impact and interactivity to your web applications.

No book about interactive graphics would be complete without a discussion of video games. We’ll explore this subject in depth by developing a full video game application, as well as examining features that are useful for games projects, such as sprites and scrolling.

The topics covered in each chapter can be summarized as follows:

Chapter 1, Code Reuse and Optimization

Covers JavaScript object-oriented programming techniques as well as code optimizations (including jQuery optimizations) that are useful where performance is important in graphics-based applications. We’ll also discuss the little-used JavaScript binary operators and how you can use them for optimization.

Chapter 2

Shows how regular DOM manipulation (DHTML) can be used for fast-moving graphics. We’ll develop a sprite system (useful for games and other effects) and see how it works within the context of a jQuery plug-in.

Chapter 3, Scrolling

Covers basic CSS scrolling techniques, including parallax effects. We’ll then move on to JavaScript-controlled scrolling and finally to a fast, tile-based parallax scrolling system. I’ll introduce you to the powerful Tiled map editor, showing you how to create tile-based maps.

Chapter 4, Advanced UI

Includes coverage of the user interface libraries jQuery UI and Ext JS. We’ll explore the differing approaches of the two libraries and their respective suitabilities for various types of applications. In addition to using existing UI libraries, we’ll build a 3D carousel from scratch.

Chapter 5, Introduction to JavaScript Games

Demonstrates how to build fun and playable games without resorting to external plug-ins such as Flash. Subjects covered include collision detection and object handling. We’ll also develop a full retro-style arcade game to illustrate in action the techniques we’ve discussed.

Chapter 6, HTML5 Canvas

Examines the Canvas element in depth, with numerous examples—including how to develop a graphical chat application using Canvas and WebSockets. Canvas topics include an introduction to basic drawing, strokes, fills, gradients, recursive drawing, bitmaps, and animation.

Chapter 7, Vectors for Games and Simulations

Covers the myriad uses for 2D vectors in graphical applications and games, proving that a little bit of math can go a long way. Code examples include cannon and rocket simulations with realistic movement.

Chapter 8, Google Visualizations

Explores Google Chart Tools, an expansive resource of data visualization tools that can put an exciting spin on most kinds of data. From bar charts to Google-O-Meter gauges, this chapter covers the implementation of both static and interactive charts and other graphical visualizations in your applications. It includes the crucial topic of formatting your data in the correct way for Chart Tools to use.

Chapter 9, Reaching the Small Screen with jQuery Mobile

Describes jQuery Mobile, a framework built on top of jQuery to provide a unified user interface to mobile-targeted web applications. jQuery Mobile turns regular HTML pages into an interactive and animated mobile experience. This chapter covers the development of a graphical sliding puzzle game specifically geared to the jQuery UI and mobile devices.

Chapter 10, Creating Android Apps with PhoneGap

Want to create a native mobile application using your usual web development skills? PhoneGap comes to the rescue. This chapter explains how to install and configure PhoneGap to create native Android applications. After we walk through installation and configuration, we’ll convert the sliding puzzle game we developed in Chapter 9 into a native app ready for deployment to mobile devices.

Conventions Used in This Book

The following typographical conventions are used in this book:

Italic

Indicates new terms, URLs, email addresses, filenames, and file extensions.

Constant width

Indicates computer code in a broad sense, including commands, arrays, elements, statements, options, switches, variables, attributes, keys, functions, types, classes, namespaces, methods, modules, properties, parameters, values, objects, events, event handlers, XML tags, HTML tags, macros, the contents of files, and the output from commands.

Constant width bold

Shows commands or other text that should be typed literally by the user.

Constant width italic

Shows text that should be replaced with user-supplied values or by values determined by context.

Note

This icon signifies a tip, suggestion, or general note.

Warning

This icon indicates a warning or caution.

Websites and pages are mentioned in this book to help you locate online information that might be useful. Normally I specify both the address (URL) and the name (title, heading) of a page. Some addresses are relatively complicated, so you can probably locate the pages more easily by using your favorite search engine to find a page by its name, typically by entering it inside quotation marks. This method may also help if you can’t find the page by its address; it may have simply moved elsewhere, so the name could still work.

Using Code Examples

This book contains many code snippets and examples, along with several complete and substantial applications. Some of these will be laborious to enter manually, so I would recommend copying the code from the book’s code repository. Larger portions of code may be interspersed with regular copy text. This helps provide a fluid narrative through the code, rather than requiring you to constantly cross-reference code to text in different locations.

Where an example HTML page is featured, most of the examples use the HTML5 doctype:

<!DOCTYPE html>

For convenience, any CSS styles used in the examples are embedded within the HTML of the page. This is not necessarily the approach that you should take with production web applications, as external style sheets are recommended. However, within the context of a book, it makes sense to keep things together where possible. You can find the code examples here:

http://www.professorcloud.com/supercharged

Target Browsers

Most of the example code in this book will work on reasonably up-to-date browsers, such as:

• Firefox 3.6x+

• Safari 4.0x+

• Opera 10.x+

• Chrome 5.x+

• Internet Explorer 8+

In fact, some of the examples work even in IE6 and IE7, although I don’t recommend using these browsers.

The examples were fully tested on Windows machines using XP, Vista, and Windows 7, and partially tested on iOS. In theory, the examples should also work on Linux versions of the supported browsers.

Use of the Canvas tag is limited to browsers that support it, so for Internet Explorer, this means version 9 only (for native support without any additional plug-ins or libraries).

A handful of the examples require a specialized environment to work, such as a mobile development environment (PhoneGap), server language (PHP), or a specific browser. Where this is the case, I cover setting up and configuring the environment.

Safari® Books Online

Note

Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly.

With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features.

O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.

How to Contact Us

Please address comments and questions concerning this book to the publisher:

O’Reilly Media, Inc.

1005 Gravenstein Highway North

Sebastopol, CA 95472

[phone] (in the United States or Canada)

[phone] (international or local)

[phone] (fax)

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at:

http://www.oreilly.com/catalog/9781449393632

To comment or ask technical questions about this book, send email to:

[e-mail]

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

Acknowledgments

It takes a lot more than an author to get a book to print, so I’d like to thank the following people:

• Simon St.Laurent, who was nothing but enthusiastic, encouraging, and helpful throughout the development of this book.

• All those who contributed time and expertise to review the book—especially Shelley Powers, who provided lots of insightful comments and suggestions.

• My copyeditor, Rachel Monaghan, and others in the production staff who smoothed out the last push to this book’s completion.

• The generous community of developers who freely share their work, hints, and tips to help move the Web forward.

• My wife and daughter, Rebecca and Sofia, who were worried that my laptop had become a permanent appendage.