Supercharged Javascript Graphics

Thanks to improved Web browser support and the advent of HTML5, JavaScript now plays a major role in programming high-performance Web graphics. This hands-on book shows programmers how to create rich Web applications for big-screen computers and small-screen mobile devices.

With HTML5 and improved web browser support, JavaScript has become the tool of choice for creating high-performance web graphics. This faced-paced book shows you how to use JavaScript, jQuery, DHTML, and HTML5's Canvas element to create rich web applications for computers and mobile devices. By following real-world examples, experienced web developers learn fun and useful approaches to arcade games, DHTML effects, business dashboards, and other applications. This book serves complex subjects in easily digestible pieces, and each topic acts as a foundation for the next.

One of HTML5’s most exciting features, Canvas provides a powerful 2D graphics API that lets you implement everything from word processors to video games. In Core HTML5 Canvas, best-selling author David Geary presents a code-fueled, no-nonsense deep dive into that API, covering everything you need to know to implement rich and consistent web applications that run on a wide variety of operating systems and devices. Succinctly and clearly written, this book examines dozens of real-world uses of the Canvas API, such as interactively drawing and manipulating shapes, saving and restoring the drawing surface to temporarily draw shapes and text, and implementing text controls. You’ll see how to keep your applications responsive with web workers when you filter images, how to implement smooth animations, and how to create layered, 3D scrolling backgrounds with parallax. In addition, you’ll see how to implement video games with extensive coverage of sprites, physics, collision detection, and the implementation of a game engine and an industrial-strength pinball game. The book concludes by showing you how to implement Canvas-based controls that you can use in any HTML5 application and how to use Canvas on mobile devices, including iOS5. This authoritative Canvas reference covers The canvas element—using it with other HTML elements, handling events, printing a canvas, and using offscreen canvases Shapes—drawing, dragging, erasing, and editing lines, arcs, circles, curves, and polygons; using shadows, gradients, and patterns Text—drawing, positioning, setting font properties; building text controls Images—drawing, scaling, clipping, processing, and animating Animations—creating smooth, efficient, and portable animations Sprites—implementing animated objects that have painters and behaviors Physics—modeling physical systems (falling bodies, pendulums, and projectiles), and implementing tweening for nonlinear motion and animation Collision detection—advanced techniques, clearly explained Game development—all aspects of game development, such as time-based motion and high score support, implemented in a game engine Custom controls—infrastructure for implementing custom controls; implementing progress bars, sliders, and an image panner Mobile applications—fitting Canvas apps on a mobile screen, using media queries, handling touch events, and specifying iOS5 artifacts, such as app icons Throughout the book, Geary discusses high-quality, reusable code to help professional developers learn everything they really need to know, with no unnecessary verbiage. All of the book’s code and live demonstrations of key techniques are available at corehtml5canvas.com.

Get a quick introduction to WebGL, the new standard for 3D rendering on the Web and a member of HTML5’s family of technologies. With this hands-on guide, you’ll learn essential WebGL development and production concepts, using the JavaScript 3D engine Three.js. At the end of the book, you’ll put everything together and build a full 3D application with WebGL. You don’t have to be a game development wizard or have 3D graphics experience to get started. If you use HTML, CSS, and JavaScript—and have familiarity with JQuery and Ajax—this book will help you gain a working knowledge of WebGL through clear and simple examples. Understand core 3D graphics concepts and how to implement them in WebGL Create WebGL sample pages as you learn, and build a racing game application in the final chapter Get to know the Three.js open source library in detail Develop working knowledge of graphics rendering, texturing, animation, interaction, and behaviors Seamlessly integrate 3D graphics with other content on the page Learn the tools, file formats, and techniques for developing robust and secure applications in a production environment "WebGL: Up and Running is an ideal introduction to the world of 3D programming on the web. It’s well-written, clear, and fun. I wish it had been around when I started learning!" —Giles Thomas, LearningWebGL.com

Learn how to build a full-stack application with Backbone.js by taking advantage of JavaScript modules, workflow automation, and Backbone’s interface building blocks. With this practical guide, author Patrick Mulder takes experienced backend developers and JavaScript programmers through the steps necessary to create a fully functional single-page application. Backbone’s rich ecosystem of plugins makes applications easier to design and scale, but knowing which tools to use for your project can be tricky. How do you combine views and the data layer with Backbone, or serve and deploy JavaScript assets? You’ll not only learn the answers to these and many other questions; you’ll also discover Backbone’s vast number of use cases. Get started quickly by using a Backbone.js and Browserify Track state and organize data with Backbone models and collections Capture events from users by using views and manipulating the DOM Combine Backbone views with advanced HTML templates Use Backbone to browse remote data sources from an API Authenticate and authorize client-side interactions Build a backend API with Node.js and Restify Set up workflow automation with Bower, Grunt, Yeoman, and RequireJS

Flash is fading fast as Canvas continues to climb. The second edition of this popular book gets you started with HTML5 Canvas by showing you how to build interactive multimedia applications. You’ll learn how to draw, render text, manipulate images, and create animation—all in the course of building an interactive web game throughout the book. Updated for the latest implementations of Canvas and related HTML5 technologies, this edition includes clear and reusable code examples to help you quickly pick up the basics—whether you currently use Flash, Silverlight, or just HTML and JavaScript. Discover why HTML5 is the future of innovative web development. Create and modify 2D drawings, text, and bitmap images Use algorithms for math-based movement and physics interactions Incorporate and manipulate video, and add audio Build a basic framework for creating a variety of games Use bitmaps and tile sheets to develop animated game graphics Go mobile: build web apps and then modify them for iOS devices Explore ways to use Canvas for 3D and multiplayer game applications

Using WebGL®, you can create sophisticated interactive 3D graphics inside web browsers, without plug-ins. WebGL makes it possible to build a new generation of 3D web games, user interfaces, and information visualization solutions that will run on any standard web browser, and on PCs, smartphones, tablets, game consoles, or other devices. WebGL Programming Guide will help you get started quickly with interactive WebGL 3D programming, even if you have no prior knowledge of HTML5, JavaScript, 3D graphics, mathematics, or OpenGL. You’ll learn step-by-step, through realistic examples, building your skills as you move from simple to complex solutions for building visually appealing web pages and 3D applications with WebGL. Media, 3D graphics, and WebGL pioneers Dr. Kouichi Matsuda and Dr. Rodger Lea offer easy-to-understand tutorials on key aspects of WebGL, plus 100 downloadable sample programs, each demonstrating a specific WebGL topic. You’ll move from basic techniques such as rendering, animating, and texturing triangles, all the way to advanced techniques such as fogging, shadowing, shader switching, and displaying 3D models generated by Blender or other authoring tools. This book won’t just teach you WebGL best practices, it will give you a library of code to jumpstart your own projects. Coverage includes: • WebGL’s origin, core concepts, features, advantages, and integration with other web standards • How and basic WebGL functions work together to deliver 3D graphics • Shader development with OpenGL ES Shading Language (GLSL ES) • 3D scene drawing: representing user views, controlling space volume, clipping, object creation, and perspective • Achieving greater realism through lighting and hierarchical objects • Advanced techniques: object manipulation, heads-up displays, alpha blending, shader switching, and more • Valuable reference appendixes covering key issues ranging from coordinate systems to matrices and shader loading to web browser settings This is the newest text in the OpenGL Technical Library, Addison-Wesley’s definitive collection of programming guides an reference manuals for OpenGL and its related technologies. The Library enables programmers to gain a practical understanding of OpenGL and the other Khronos application-programming libraries including OpenGL ES and OpenCL. All of the technologies in the OpenGL Technical Library evolve under the auspices of the Khronos Group, the industry consortium guiding the evolution of modern, open-standards media APIs.

HTML5 is revolutionizing the way Web applications are developed, and this practical, hands-on book puts developers right in the middle of the action. The book also includes tips for Flash developers on how to transfer their skills to HTML5 programming.