Graphics 2D 2
Subject
Session
Tahun
Versi
:
:
:
:
T0934 / Multimedia Programming Foundation
7
2009
1/0
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
Bina Nusantara
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.
Frame-Based
Animation
Cast-Based
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)
Transparency
color
• Use transparency supported image format
– GIF
– PNG
Bina Nusantara
Z-Order
• the relative depth of objects on the screen
Bina Nusantara
Z-Order
Setting Control when dragged
Remove object
Bina Nusantara
Z-Order
Change Z-order
Bina Nusantara
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)
blitting
Bina Nusantara
http://www.j2ee.me/docs/books/tutorial/figures/extra/fullscreen/doubleBuffering.gif
Double Buffering
Bina Nusantara
Full code downloadedable in additional materi.
Double Buffering
Result
This animation didn’t have any flicker.
Bina Nusantara
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
Check whether the PC is support for Page Flipping or not
Create the back buffer
Bina Nusantara
Page Flipping
Draw something in back buffer
Bina Nusantara
Page Flipping
Flip the back buffer to screen
Result
Full code downloadable in Additional Materi
Bina Nusantara
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
Tweening
Warping
Dissolving
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=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
Bina Nusantara
References
• Java Graphics Techniques. 2009.
http://www.ssuet.edu.pk/taimoor/books/1-57521-1483/ch5.htm#TheGraphicsCoordinateSystem
• Sprite Animation. 2009. http://www.ssuet.edu.pk/taimoor/books/157521-148-3/ch6.htm
• Double Buffering and Page Flipping. 2008.
http://www.j2ee.me/docs/books/tutorial/extra/fullscreen/doublebuf.ht
ml
• Morphing on Your PC. 2006. http://www-inf.intevry.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