Computer Graphics - English Week - 2009 N Slide Set: svg1_b z 1.1: Grouping Overview z 1.2: Elements inside Group z 1.3: Definitions z 1.4: Transformations z 1.5: Transformations z 1.6: Rotation about a point z 1.7: More on Transformations z 1.8: Transformation Example z 1.9: Nested Groups David Lightfoot (Oxford Brookes University) 1 Computer Graphics - English Week - 2009 Slide Set: svg1_e z 2.1: Structuring z 2.2: Symbols z 2.3: Symbols made of Symbols z 2.4: Symbols viewBox z 2.5: Clipping z 2.6: Clip an Image David Lightfoot (Oxford Brookes University) 2 Computer Graphics - English Week - 2009 Slide Set: anim_intro z 3.1: Animation z 3.2: Uses of Animation z 3.3: Example - Setting up IP socket connection z 3.4: The Illusion of Motion z 3.5: A Timeline in Movies z 3.6: Conventional Techniques z 3.7: Conventional Animation z 3.8: Use of Computers z 3.9: Keyframing z 3.10: Interpolation z 3.11: Linear Interpolation ... z 3.12: Smooth Motion David Lightfoot (Oxford Brookes University) 3 Computer Graphics - English Week - 2009 Slide Set: svg2_c z 4.1: SVG Animation: Introduction z 4.2: What, How, When z 4.3: What is animated? z 4.4: Common Attributes z 4.5: Animation Functions z 4.6: Relationship to SMIL z 4.7: Animation Styles z 4.8: Animating Properties/Attributes z 4.9: Animating d Attribute z 4.10: animate Examples z 4.11: Animating stroke-dashoffset z 4.12: Animating Text Offset z 4.13: Stop Opacity: Lighting z 4.14: animateTransform Element z 4.15: Additive Animations z 4.16: Pseudo 3D z 4.17: Transformed Paths z 4.18: Animate Symbols z 4.19: Animated Fridge Control z 4.20: Animated Fonts z 4.21: set Element z 4.22: Changing Visibility z 4.23: Changing Visibility z 4.24: animateColor Element z 4.25: animateMotion Element z 4.26: Animate along Path z 4.27: Animate Motion Example z 4.28: Other Motion Paths z 4.29: Animating Path and Offset z 4.30: How z 4.31: How is Animation Performed? z 4.32: Types z 4.33: How Attributes z 4.34: values Attribute z 4.35: values Example z 4.36: values Examples z 4.37: Animating Text Example z 4.38: Animating Clip Path David Lightfoot (Oxford Brookes University) 4 Computer Graphics - English Week - 2009 Slide Set: svg2_d z 5.1: keyTimes z 5.2: Example keyTimes z 5.3: animateMotion: keyPoints z 5.4: calcMode z 5.5: Key Spline Interpolation z 5.6: Example Key Spline Interpolation z 5.7: Ball Bouncing z 5.8: Linear v Spline z 5.9: Animating many Circles z 5.10: When z 5.11: When is Animation Performed? z 5.12: Timing Attributes z 5.13: Synchronisation z 5.14: Events z 5.15: Animation onclick and set z 5.16: Chaining Animations z 5.17: Chaining: IP Network z 5.18: Restarting an Animation David Lightfoot (Oxford Brookes University) 5 Computer Graphics - English Week - 2009 Slide Set: svg1_b 1.1: Grouping Overview 1.2: Elements inside Group David Lightfoot (Oxford Brookes University) 6 Computer Graphics - English Week - 2009 1.3: Definitions z Sometimes SVG elements are used to define something not to render it z To make it explicit that it is a definition: { Enclose the element in a defs element { Elements inside a defs element are not rendered <defs> <g>. for symbols <style>. <script>. <gradient id="gradientidentifier">. <clipPath id="clipidentifier">. <mask id="maskidentifier">. <symbol id="symbolidentifier">. <filter id="filteridentifier">. <animate id="animateidentifier">. <text id="textref">. for tref </defs> 1.4: Transformations David Lightfoot (Oxford Brookes University) 7 Computer Graphics - English Week - 2009 1.5: Transformations 1.6: Rotation about a point David Lightfoot (Oxford Brookes University) 8 Computer Graphics - English Week - 2009 1.7: More on Transformations 1.8: Transformation Example David Lightfoot (Oxford Brookes University) 9 Computer Graphics - English Week - 2009 1.9: Nested Groups David Lightfoot (Oxford Brookes University) 10 Computer Graphics - English Week - 2009 Slide Set: svg1_e 2.1: Structuring 2.2: Symbols David Lightfoot (Oxford Brookes University) 11 Computer Graphics - English Week - 2009 2.3: Symbols made of Symbols 2.4: Symbols viewBox David Lightfoot (Oxford Brookes University) 12 Computer Graphics - English Week - 2009 2.5: Clipping 2.6: Clip an Image David Lightfoot (Oxford Brookes University) 13 Computer Graphics - English Week - 2009 Slide Set: anim_intro 3.1: Animation From the very beginning of cinematography, moving pictures were admirably placed to visually express new ideas and explore technical innovations. ... Animated cartoons attempt to recreate graphically physical or organic movement. Unlike live-action film, however, animation has the greater flexibility of using motion creatively. That is to say, it can exaggerate physical possibilities by slowing movement down, speeding it up and using it comically or expressively. Herein lies the starting point of the art of animation. ... We are all familiar with animated cartoons as mass entertainment, especially for children. ... There are also, however, many examples of animation's potential for communicating witty visual ideas and sophisticated narratives to older audiences; some animated films not only have immediate appeal but are memorable and contain interesting social comment. ... John Halas, "Masters of Animation", 1987 3.2: Uses of Animation z Advertising z Entertainment z Education z Art z Industrial design and simulation z Scientific visualization z Interactive computing/user interfaces ... David Lightfoot (Oxford Brookes University) 14 Computer Graphics - English Week - 2009 3.3: Example - Setting up IP socket connection 3.4: The Illusion of Motion z 1824, Peter Mark Roget, studying physiology at the University of London, wrote "Persistence of Vision with Regard to Moving Objects" z 1825, Dr John Ayrton Paris, commercialised his "Thaumatrope". A disc of card with a picture of a bird on one side and a birdcage on the other. Twirling it by strings attached to opposite edges, viewer's eye retained the image of one side as the other was revealed. Bird appeared to be in the cage z 1880, Eadweard Muybridge, placed twenty-four still cameras linked to trip wires across a race track. When horse broke each wire, camera was triggered. Sucession of images showed mechanics of movement in time z 1877, Emile Reynaud, used a circular cluster of revolving mirrors to reflect a sequence of drawings on a horizontal band around a revolving drum. By 1892 evolved into Theatre Optique, could be viewed by large audience. Show lasting up to 15 minutes z 1895, Auguste and Louis Lumiere projected live-action motion pictures onto a screen with their Cinematographe in Paris. Often regarded as the earliest film makers, La Sortie des Usines Lumiere z 1899, Arthur Melbourne Cooper, considered to have made first animated commercial, promoted Bryant & May, Match Appeal z 1907, Winsor McCay, Little Nemo in Slumberland, appeared in New York Herald. Earliest success in character creation. z 1914, Winsor McCay, Gertie the Dinosaur, film David Lightfoot (Oxford Brookes University) 15 Computer Graphics - English Week - 2009 3.5: A Timeline in Movies From Nancy Pollard, Brown University z (1914) Gertie, Winsor McCay z (1928) Steamboat Willie, Disney z (1933) King Kong, Willis O'Brien z (1930s and 40s) Betty Boop, Popeye, Daffy Duck, Bugs Bunny, Woody Woodpecker, Mighty Mouse, Tom & Jerry (how many did you spot in Who Framed Roger Rabbit?!!) z (1937) Snow White, Disney - animated feature film, cost $1.5M z (1982) Tron, MAGI - movie with computer graphics premise z (1984) Last Starfighter - computer graphics used interchangeably with actual models of space ship z (1993) Jurassic Park - computer graphics used to create living creatures, meant to appear realistic z (1995) Toy Story, Pixar, full-length feature film done entirely with 3D computer animation. Won an Oscar 3.6: Conventional Techniques z Drawing on film z Multiple drawings z Rotoscoping (project film of real actors onto drawing paper) z Stop motion animation z Acetate cels, multiple plane cels, e.g. face, hands, body, tree, grass, sky David Lightfoot (Oxford Brookes University) 16 Computer Graphics - English Week - 2009 3.7: Conventional Animation z Storyboard z Key frames drawn z Intermediate frames filled in (inbetweening) z Trial film is made (called a pencil test) z Pencil test frames transferred to cels z Note: iterative process with a lot of feedback 3.8: Use of Computers z In-betweening, e.g. La Faim, Peter Foldes, Canada, 1974 z Disney's CAPS system { scanned artists' drawings { online colouring of cels (broad colour palette, exact colour matching) { online compositing { 3D effects can be created with 2D drawings, e.g. Beauty and the Beast z 3D graphical worlds { permits easier experimentation with actor position, camera position { can perform more complex camera moves (which might be impossible with physical camera) { trades effort of creating drawings for effort of building and animating 3D world David Lightfoot (Oxford Brookes University) 17 Computer Graphics - English Week - 2009 3.9: Keyframing z Keyframes mark important visual transitions, extremes of action z Inbetweening is process of creating intermediate frames between the key frames z Can be computed z Calculate intermediate positions of figure along path z (Figure in these slides is very loosely based on a figure called Blubby, , H.J. Shin, J. Lee, S.Y. Shin and M. Gleicher, Computer Puppetry: An Importance-Based Approach, ACM Transactions on Graphics, 20(2), 2001.) 3.10: Interpolation z To interpolate from one position of the circle to another, we can linearly interpolate the position of the centre z Given positions v1 and v2, at keyframes 1 and 2, position of v for intermediate frame for time t (0 <= t <= 1), given by: vt = (1-t)v1 + tv2 David Lightfoot (Oxford Brookes University) 18 Computer Graphics - English Week - 2009 3.11: Linear Interpolation ..