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:
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.
Audience and Assumptions
Readers of this book should have a good working knowledge of creating websites and web applicationsand 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 Googles, 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 .
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. Well 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:
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. Well also discuss the little-used JavaScript binary operators and how you can use them for optimization.
Shows how regular DOM manipulation (DHTML) can be used for fast-moving graphics. Well develop a sprite system (useful for games and other effects) and see how it works within the context of a jQuery plug-in.
Covers basic CSS scrolling techniques, including parallax effects. Well then move on to JavaScript-controlled scrolling and finally to a fast, tile-based parallax scrolling system. Ill introduce you to the powerful Tiled map editor, showing you how to create tile-based maps.
Includes coverage of the user interface libraries jQuery UI and Ext JS. Well explore the differing approaches of the two libraries and their respective suitabilities for various types of applications. In addition to using existing UI libraries, well build a 3D carousel from scratch.
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. Well also develop a full retro-style arcade game to illustrate in action the techniques weve discussed.
Examines the Canvas element in depth, with numerous examplesincluding 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.
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.
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.
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.
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, well convert the sliding puzzle game we developed in into a native app ready for deployment to mobile devices.