Exercise 7: Backbuffers

Home/Java - Tutorial/Java - Applet/Exercise 7: Backbuffers
Exercise 7: Backbuffers 2015-12-04T17:49:19+00:00

[ Home | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 ]

Up to this point, the graphics drawn by our applets have been relatively simple. With more complex graphics however, whether in animations or interactive programs, flicker can become a problem. (You may have already noticed subtle flickering in some of the previous applets.)

This example demonstrate the problem. It uses a pseudo-random number generator to produce a big, hairy tangle of lines. The lines follow the mouse cursor.

(Download the below file: NoBackbuffer1.java)

The output:

 

You probably see flickering when you move the mouse over the applet. The lines take a significant amount of time to draw, and since the canvas is cleared before each redraw, the image on the canvas is actually incomplete most of the time.

This second example makes the problem even more pronounced by rendering a bitmap image in the background.

(Download the below file: NoBackbuffer2.java)

The output:

 

The flickering you see now should be especially bad.

The solution is to use double-buffering : rather than perform drawing operations directly to screen, we draw onto an image buffer (the “backbuffer”) in memory, and only after completing this image do we copy it onto the screen. There is no need to erase or clear the contents of the screen before copying (or “swapping”, as it’s called) the backbuffer onto the screen. During the swap, we simply overwrite the image on the screen. Hence the screen never displays a partial image: even in the middle of swapping, the screen will contain 50 % of the old image and 50 % of the new image. As long as the swap is not too slow, the eye is fooled into seeing a continuous, smooth flow of images.

This example uses a backbuffer.

(Download the below file: Backbuffer1.java)

The output:

 

Why do we still see flicker ? Whenever the applet is supposed to redraw itself, the applet’s update() function gets called. The java.awt.Component class (which is a base class of Applet) defines a default version of update() which does the following: (1) clears the applet by filling it with the background color, (2) sets the color of the graphics context to be the applet’s foreground color, (3) calls the applet’spaint() function. We see flickering because the canvas is still cleared before each redraw. To prevent this, we need to define our own update() function, to override the base class’ behavior.

(Download the below file: Backbuffer2.java)

Now there should be no apparent flicker:


Update (January 2008): I received the following email message that might be useful to some readers.

Hello,I recently read your Java Applet Tutorial, it really helped me to understand basics of java applets, especially backbuffers. Although i had a problem with smooth animating – quickly moving objects weren’t rendered smoothly. I thought I’ve made a mistake implementing backbuffer stuff, but (after a few hours) i realized that it’s everything fine with this applet when it’s ran on Windows. The strange behaviour was that when I was moving mouse cursor over the applet, the animation became smooth. After another few hours i found getToolkit.sync() method which forces refreshing applet in window system. The tricky part is that you can’t see any difference using Windows, but the difference is clear in Xorg window system. maybe you could consider adding a line in your tutorial, maybe someone will save some time, next time ­čÖé

anyways
thank you for your work

Artur Wielog├│rski
(student @Poznan University of Technology)