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

Graphics 2D 2

Subject : T0934 / Multimedia Programming FoundationSession : 7Tahun : 2009Versi : 1/0

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

Outline

• Java Coordinate System• Animation• Java 2D Graphics

Bina Nusantara

Java Coordinate System

• The origin is located in the upper-left corner of the window

• All values are positive integers.

Bina Nusantara

Animation in Java

• Animation is the sequencing of a series of static images to generate the illusion of movement.

Bina Nusantara

Frame Based Animation

• Displaying a sequence of static frames– Simpler– Often used in nongaming animations– Background and objects are inseparable

Bina Nusantara

Cast Based Animation

• Moving objects independently of the background– Also called sprite animation– Often used in games– Background and objects are separable

Bina Nusantara

Frame Rate

• 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

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

Z-Order

• the relative depth of objects on the screen

Bina Nusantara

Z-Order

Bina Nusantara

Setting Control when dragged

Remove object

Z-Order

Bina Nusantara

Change Z-order Add the object match with it’s Z-order

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

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

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

Double Buffering

Bina Nusantara Full code downloadedable in additional materi.

Double Buffering

Bina Nusantara

Result

This animation didn’t have any flicker.

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

Page Flipping

Bina Nusantara

Check whether the PC is support for Page Flipping or not

Create the back buffer

Page Flipping

Bina Nusantara

Draw something in back buffer

Page Flipping

Bina Nusantara

Flip the back buffer to screen

Result

Full code downloadable in Additional Materi

Animation Special Effects

• Tweening• Warping• Morphing

Bina Nusantara

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

Warping

• the mathematical trick of stretching and squashing an image

Bina Nusantara

Morphing

Bina Nusantara http://code.google.com/p/javamorph/

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=j4s4SvDXJabo6gPS05zQCw&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=hVj3O0X5Ih&sig=XUWbcpuTLCrMQ1fZDvvDOj61g0w&hl=id&ei=fCw3SoPVBJf6kAXfnaCcDQ&sa=X&oi=book_result&ct=result&resnum=6#PPA90,M1

Bina Nusantara

References

• Java Graphics Techniques. 2009. 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.htm

• Double Buffering and Page Flipping. 2008. http://www.j2ee.me/docs/books/tutorial/extra/fullscreen/doublebuf.html

• Morphing on Your PC. 2006. http://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

• Reducing Flicker: Step 1 Override Update. 2009. http://www.particle.kth.se/~fmi/kurs/PhysicsSimulation/Lectures/05B/reduceFlicker1.html

Bina Nusantara

References

• Reducing Flicker: Step 2 Clipping. 2009. 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

Bina Nusantara