1. Graphics 2D 2 Subject:T0934 / Multimedia Programming Foundation Session:7 Tahun:2009 Versi:1/0

2. Bina Nusantara Learning Outcomes In the end of this session, students must be able to: –Understand the basic principal of animation –Apply correct Java syntax to animate graphics primitives

3. Outline Java Coordinate System Animation Java 2D Graphics Bina Nusantara

4. Java Coordinate System The origin is located in the upper-left corner of the window All values are positive integers. Bina Nusantara

5. Animation in Java Animation is the sequencing of a series of static images to generate the illusion of movement. Bina Nusantara AnimationFrame-BasedCast-Based

6. Frame Based Animation Displaying a sequence of static frames –Simpler –Often used in nongaming animations –Background and objects are inseparable Bina Nusantara

7. Cast Based Animation Moving objects independently of the background –Also called sprite animation –Often used in games –Background and objects are separable Bina Nusantara

8. Frame Rate –The standard frame rate is 12 fps (frames per second). –The higher the frame rate is defined, the smoother the animations is. Bina Nusantara

9. Transparency Use Transparency Colors –colors in an image that are unused (aren't drawn along with the rest of the colors in the image) Use transparency supported image format –GIF –PNG Bina Nusantara Transparency color

10. Z-Order the relative depth of objects on the screen Bina Nusantara

11. Z-Order Bina Nusantara Setting Control when dragged Remove object

12. Z-Order Bina Nusantara Change Z-order Add the object match with it’s Z-order

13. Animation Process 1.Using Image objects to hold image files 2.Putting a series of images into an array 3.Display the image array sequentially in high speed to produce the animation 4.Set the movements of the image array Bina Nusantara

14. Drawing problems Flickering –Caused by drawing the images directly and consecutively on the screen Tearing –a splitting effect that occurs when drawing to the screen happens faster than the monitor's refresh rate Solution : Double Buffering Page Flipping Bina Nusantara

15. Double Buffering create an image on back buffer (off screen) call the image from back buffer onto the screen (Block Line Transfer/BLT) Bina Nusantara blitting http://www.j2ee.me/docs/books/tutorial/figures/extra/fullscreen/doubleBuffering.gif

16. Double Buffering Bina Nusantara Full code downloadedable in additional materi.

17. Double Buffering Bina Nusantara Result This animation didn’t have any flicker.

18. Page Flipping Use 2 buffers called back buffer and primary surface use video pointer to switch between two buffers the pointed buffer will become primary surface and the other one back buffer Bina Nusantara http://www.j2ee.me/docs/books/tutorial/figures/extra/fullscreen/pageFlipping.gif

19. Page Flipping Bina Nusantara Check whether the PC is support for Page Flipping or not Create the back buffer

20. Page Flipping Bina Nusantara Draw something in back buffer

21. Page Flipping Bina Nusantara Flip the back buffer to screen Result Full code downloadable in Additional Materi

22. Animation Special Effects Tweening Warping Morphing Bina Nusantara

23. Tweening The interpolation of two images to yield a smooth-flowing animation Also called In-betweening Typically done with points, lines, or polygons Bina Nusantara

24. Warping the mathematical trick of stretching and squashing an image Bina Nusantara

25. Morphing DissolvingWarpingTweening Bina Nusantara http://code.google.com/p/javamorph/

26. References Introduction to Java Programming. 2009. Daniel Liang. Ch: Java 2D API Java Media APIs. 2009. http://books.google.co.id/books?id=FtrwhyPa_bgC&pg=PA72&lpg= PA72&dq=user+coordinate+space+coordinate+java&source=bl&ots =vxxsy6CD9Z&sig=zKOxJ9Q7hGCqtxkajz9XFa8rS1I&hl=id&ei=j4s4 SvDXJabo6gPS05zQCw&sa=X&oi=book_result&ct=result&resnum= 5#PPA94,M1 http://books.google.co.id/books?id=FtrwhyPa_bgC&pg=PA72&lpg= PA72&dq=user+coordinate+space+coordinate+java&source=bl&ots =vxxsy6CD9Z&sig=zKOxJ9Q7hGCqtxkajz9XFa8rS1I&hl=id&ei=j4s4 SvDXJabo6gPS05zQCw&sa=X&oi=book_result&ct=result&resnum= 5#PPA94,M1 Java 2D Graphics (Jonathan Knudsen). 2009. http://books.google.co.id/books?id=UxM2iXiFqbMC&pg=PA23&lpg= PA23&dq=graphics+coordinate+user+device&source=bl&ots=hVj3O 0X5Ih&sig=XUWbcpuTLCrMQ1fZDvvDOj61g0w&hl=id&ei=fCw3So PVBJf6kAXfnaCcDQ&sa=X&oi=book_result&ct=result&resnum=6#P PA90,M1 http://books.google.co.id/books?id=UxM2iXiFqbMC&pg=PA23&lpg= PA23&dq=graphics+coordinate+user+device&source=bl&ots=hVj3O 0X5Ih&sig=XUWbcpuTLCrMQ1fZDvvDOj61g0w&hl=id&ei=fCw3So PVBJf6kAXfnaCcDQ&sa=X&oi=book_result&ct=result&resnum=6#P PA90,M1 Bina Nusantara

27. References Java Graphics Techniques. 2009. http://www.ssuet.edu.pk/taimoor/books/1-57521-148- 3/ch5.htm#TheGraphicsCoordinateSystem http://www.ssuet.edu.pk/taimoor/books/1-57521-148- 3/ch5.htm#TheGraphicsCoordinateSystem Sprite Animation. 2009. http://www.ssuet.edu.pk/taimoor/books/1- 57521-148-3/ch6.htmhttp://www.ssuet.edu.pk/taimoor/books/1- 57521-148-3/ch6.htm Double Buffering and Page Flipping. 2008. http://www.j2ee.me/docs/books/tutorial/extra/fullscreen/doublebuf.ht ml http://www.j2ee.me/docs/books/tutorial/extra/fullscreen/doublebuf.ht ml Morphing on Your PC. 2006. http://www-inf.int- evry.fr/~meunier/Morphing/DrDobbs3/printableArticle.jhtml.htmlhttp://www-inf.int- evry.fr/~meunier/Morphing/DrDobbs3/printableArticle.jhtml.html Fast Page Flipping Java code example. 2006. http://www.javafaq.nu/java-example-code-782.html http://www.javafaq.nu/java-example-code-782.html Reducing Flicker: Step 1 Override Update. 2009. http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/05B/ reduceFlicker1.html http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/05B/ reduceFlicker1.html Bina Nusantara

28. References Reducing Flicker: Step 2 Clipping. 2009. http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/05B/ reduceFlicker2.html http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/05B/ reduceFlicker2.html Reducing Flicker: Step 3 Double Buffer. http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/05B/ reduceFlicker3.html http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/05B/ reduceFlicker3.html Bina Nusantara