✐ ✐ “80609˙CH09˙Dionisio” — 2011/8/29 — 9:22 — page 463 — #1 ✐ ✐ © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR9 SALE OR DISTRIBUTION © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOTGraphics FOR SALE OR DISTRIBUTION and AnimationNOT FOR SALE OR DISTRIBUTION © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 9.1 Fundamentals 9.4.8 Transformations © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC 9.1.1 Coordinate Spaces 9.4.9 Animation 9.1.2NOTColors FOR SALE OR DISTRIBUTION 9.4.10Canvas by ExampleNOT FOR SALE OR DISTRIBUTION 9.1.3 Pixels vs. Objects/Vectors 9.5 SVG 9.1.4 Animation 9.5.1 Seeing SVG in a Web Browser 9.2 HTML and CSS 9.5.2 SVG Case Study: A Bezier © Jones &9.2.1 BartlettHTML Learning, Elements forLLC Graphics © JonesCurve & EditorBartlett Learning, LLC NOT FOR 9.2.2SALECSS OR DISTRIBUTION 9.5.3NOTObjects FOR SALE in the DrawingOR DISTRIBUTION 9.2.3 Visual Properties 9.5.4 Reading and Writing Attributes 9.2.4 Absolute Position 9.5.5 Interactivity (a.k.a. Event Handling 9.2.5 Case Study: Bar Chart Redux) 9.2.6 Case Study: Towers of Hanoi Display 9.5.6 Other SVG Features © Jones & Bartlett9.3 Learning,Animation LLC in HTML and CSS © Jones9.6 & Bartlett3D Graphics Learning, with WebGL LLC NOT FOR SALE OR DISTRIBUTION9.3.1 Constant Velocity NOT FOR SALE9.6.1 ORWebGL DISTRIBUTION is the 3D canvas 9.3.2 Fading In and Out 9.6.2 Case Study: The Sierpinski Gasket 9.3.3 Animating Other Properties 9.6.3 Defining the 3D Data 9.3.4 Ramped (or Eased) Animation 9.6.4 Shader Code 9.3.5 Declarative CSS Animation 9.6.5 Drawing the Scene 9.4 The© Canvas Jones Element & Bartlett Learning, LLC 9.6.6 Interactivity© and Jones Events & Bartlett Learning, LLC 9.4.1NOTInstantiating FOR SALE a Canvas OR DISTRIBUTION9.7 Other Client-Side GraphicsNOT FOR Technologies SALE OR DISTRIBUTION 9.4.2 The Rendering Context 9.7.1 Flash 9.4.3 Drawing Rectangles 9.7.2 Java 9.4.4 Drawing Lines and Polygons 9.7.3 VML 9.4.5 Drawing Arcs and Circles Chapter Summary © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC 9.4.6 Drawing Bezier and Quadratic Curves Exercises NOT FOR 9.4.7SALEWorking OR DISTRIBUTION with Images NOT FOR SALE OR DISTRIBUTION © Jones & Bartlett Learning, LLC. NOT FOR SALE OR DISTRIBUTION. 3723 ©✐ Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC ✐ NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION ✐ ✐ ✐ ✐ “80609˙CH09˙Dionisio” — 2011/8/29 — 9:22 — page 464 — #2 ✐ ✐ © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 464 CHAPTER 9 Graphics and Animation © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC IntroductionNOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION Many JavaScript applications involve performing computations and showing re- sults by manipulating the DOM of a web page. Effective event handling, as seen in Chapter 6, based on both user activity and the passage of time, facilitates interac- © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC tivity, with JavaScript as the connecting technology. We have seen, so far, that our NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION options for displaying information to the user have been generally text or images that are stored (or generated) on a server. This range of elements is adequate for conventional documents and forms but falls short for applications such as games, simulations, visualization, and animation. © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC This chapter aims to introduce you to the suite of visual, graphics, and anima- NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION tion technologies that are available in modern, standards-compliant web browsers. These options range from additional visual and graphical properties within the HTML DOM to full-fledged graphics technologies that allow you to draw and fill lines, curves, polygons, or other shapes, perform sophisticated image pro- © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC cessing and compositing operations, and even render hardware-accelerated three- NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION dimensional (3D) objects. All this, manipulated entirely within your browser, with no additional software. © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR9.1 SALE Fundamentals OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION Certain concepts and techniques are common to all graphics and animation subsys- tems. This section introduces the core set that underlies the specific technologies in this chapter. © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 9.1.1 Coordinate Spaces All computer graphics operations are generally performed within the context of a coordinate space—that is, a two-dimensional (2D) or 3D region within which colors, lines,© shapes, Jones or & other Bartlett entities Learning, are placed. LLC A specific location within© thatJones space & canBartlett Learning, LLC be representedNOT FOR with SALE sequences OR DISTRIBUTION of numbers called coordinates, withNOT one number FOR SALE for OR DISTRIBUTION each dimension of the space. Thus, 2D coordinates are represented by an ordered pair (x, y), while 3D coordinates are represented by an ordered triple (x,y,z). By convention, the x in 2D or 3D coordinates represents a horizontal location (“left © Jones to& Bartlett right”), while Learning,y is vertical LLC (“up to down”). In 3D,© Jonesz is typically & Bartlett referred Learning, to as LLC NOT FORdepth SALE, representing OR DISTRIBUTION the “front-to-back” dimension.NOT The FOR special SALE coordinates OR DISTRIBUTION (0, 0) and (0, 0, 0) are designated as the origin of the space. © Jones & Bartlett Learning, LLC. NOT FOR SALE OR DISTRIBUTION. 3723 ©✐ Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC ✐ NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION ✐ ✐ ✐ ✐ “80609˙CH09˙Dionisio” — 2011/8/29 — 9:22 — page 465 — #3 ✐ ✐ © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 9.1 Fundamentals 465 © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC The directionNOT FOR along SALE which OR a coordinate DISTRIBUTION grows also varies based onNOT the graph- FOR SALE OR DISTRIBUTION ics system. A typical convention is to have x-coordinates increase to the right. In 2D graphics systems, y-coordinates usually increase in the downward direc- tion. In some 3D graphics systems, the y-coordinate increases upward, with the © Jonesz-coordinate & Bartlett increasing Learning, as it movesLLC toward the viewer.© These Jones are & all Bartlett conventions, Learning, LLC NOThowever, FOR SALE and there OR DISTRIBUTION is no hard-and-fast rule on directionalityNOT and FOR coordinate SALE OR values, DISTRIBUTION it is thus another thing to note when learning about a new graphics technology. Coordinate spaces give us an unambiguous mechanism for designating positions and sizes—an understandably crucial part of being able to tell a computer where © Jones & Bartlettto Learning, draw something. LLC Figure 9.1 illustrates© typical Jones 2D & andBartlett 3D coordinate Learning, spaces. LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION y (0, 0) © Jones & Bartlettx Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION (0, 0) x © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FORy SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION y z © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALEy OR DISTRIBUTION (0, 0, 0) (0, 0, 0) x x © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION z FIGURE 9.1 © Jones2D and & 3D Bartlett coordinate Learning, spaces, each LLC showing a rectangle with opposite© Jones corners & (2Bartlett, 1) (indicated Learning, LLC NOT byFOR the small SALE square) OR and DISTRIBUTION(4, 2) (indicated by the small triangle) inNOT 2D, or (2FOR, 1, 0) SALEand (4 ,OR2, 0) DISTRIBUTIONin 3D. © Jones & Bartlett Learning, LLC. NOT FOR SALE OR DISTRIBUTION. 3723 ©✐ Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC ✐ NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION ✐ ✐ ✐ ✐ “80609˙CH09˙Dionisio” — 2011/8/29 — 9:22 — page 466 — #4 ✐ ✐ © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION 466 CHAPTER 9 Graphics and Animation © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC InNOT the physicalFOR SALE world, OR we DISTRIBUTION tend to attach units to coordinatesNOT and FOR distances. SALE OR DISTRIBUTION A location on the earth is typically given in degrees (latitude and longitude); lengths or distances may be measured in inches, meters, miles, or even light-years, with “square” or “cubic” versions of these units representing areas and volumes, © Jones respectively.& Bartlett Learning, Computer graphics LLC systems vary in their© Jones use of units.& Bartlett Keep anLearning, eye on LLC NOT FORthem SALE in theOR later DISTRIBUTION sections. NOT FOR SALE OR DISTRIBUTION 9.1.2 Colors If coordinate spaces define where or how big a visual entity may be, colors form © Jones & Bartlett Learning, LLC © Jones & Bartlett Learning, LLC the basis of what that entity looks like. Without going into a deeper discussion NOT FOR SALE OR DISTRIBUTION NOT FOR SALE OR DISTRIBUTION of the physics of light and color, suffice it to say that in most computer graphics systems, a color is represented by the ordered triple (r, g, b), with r representing the amount of red in a color, g representing the amount of green, and b representing the amount of blue.