JApplet example with a back buffer.

Dev Shed Forums Sponsor:

October 31st, 2012, 07:02 AM

Shaun_B

Contributing User

Join Date: Sep 2012

Posts: 61

Time spent in forums: 1 Day 42 m 57 sec
Reputation Power: 2

Swing - JApplet example with a back buffer.

I started a course of study under a University in the Manchester area in 2009 after a long time in Health and Social Care and hadn't done any real programming since the mid 1990s, and after learning some programming principles, our first assignment involved computer graphics with Java's APIs.

My first assignment was to draw a picture, and some examples from the previous year had been demonstrated to us to give us something to aim at. I noticed that all of these that had animations that flickered like a Sinclair ZX80. When I suggested to the lecturer that some sort of buffering should be used to stop this, he said words to the effect that buffering is a little complicated and perhaps beyond what was expected. This is not true: buffering is really quite simple to implement, and so I thought that I'd provide a simple example for you.

Firstly, we want to draw a 5-point star, like this:

Java Code:

Original - Java Code
import java.awt.*; import java.applet.Applet; public class star extends Applet { public void paint(Graphics g) { g.drawLine( 0, 28, 30, 28); g.drawLine(30, 28, 39, 0); g.drawLine(39, 0, 50, 28); g.drawLine(50, 28, 79, 28); g.drawLine(79, 28, 55, 46); g.drawLine(55, 46, 64, 73); g.drawLine(64, 73, 40, 57); g.drawLine(39, 57, 15, 73); g.drawLine(15, 73, 23, 45); g.drawLine(23, 45, 0, 28); } }

import java.awt.*;
import java.applet.Applet;
public class star extends Applet
{
    public void paint(Graphics g)
    {
        g.drawLine( 0, 28, 30, 28);
        g.drawLine(30, 28, 39,  0);
        g.drawLine(39,  0, 50, 28);
        g.drawLine(50, 28, 79, 28);
        g.drawLine(79, 28, 55, 46);
        g.drawLine(55, 46, 64, 73);
        g.drawLine(64, 73, 40, 57);
        g.drawLine(39, 57, 15, 73);
        g.drawLine(15, 73, 23, 45);
        g.drawLine(23, 45,  0, 28);
    }
}

Okay, so we can draw a static image. Great, so how do we make it move? Well, you can go into the code and alter each point, which draws a line from x0 and y0 (the first two numbers) to x1 and y1. But if we can make things dynamic, then all the better. My personal feeling is that it's usually better to separate out the data from the code; as soon as this is data then we can manipulate it more easily. So we should now put these points into an array of type integer at the top of the code, and then loop through them. You'll get something like this:

Java Code:

Original - Java Code

import java.awt.*;
import java.applet.Applet;
public class star extends Applet
{
    // This array will draw a simple house:
    private static int star[] = 
    {
        /** co-ordinates in array read as
         * x0, y0 to x1, y1. -1 terminates */
         0, 28, 30, 28,
        30, 28, 39,  0,
        39,  0, 50, 28,
        50, 28, 79, 28,
        79, 28, 55, 46,
        55, 46, 64, 73,
        64, 73, 40, 57,
        39, 57, 15, 73,
        15, 73, 23, 45,
        23, 45,  0, 28,
        -1
    };
    // This will be used to loop through our array above:
    private static int index = 0;
    public void paint(Graphics g)
    {
        while(star[index]>=0)
        {
            int x0 = (star[index+0]);
            int y0 = (star[index+1]);
            int x1 = (star[index+2]);
            int y1 = (star[index+3]);
            g.drawLine( x0, y0, x1, y1 );
            index += 4;
        }
        index = 0;
    }
}

Now all of those repeating lines of code from the first example have disappeared, and it makes the star easier to move around the canvas, at least in theory. Actually, we want to draw the star in its own method, but we need to understand some more stuff about an Applet: basically, there are several methods that need to be included in the code, and over-ride each of them. This is to do with the Applet life-cycle, so you should read through this documentation, and other good examples elsewhere. Have a look through now...

Have you read it? Good, I'll continue.

Okay, so we're going to need another import and also to implement the applet as runnable. Therefore, we have some methods to over-ride. So, let's look at the whole example, and read through the comments as hopefully they're providing some explanations to you as well. Please feel free to ask any questions.

Java Code:

Original - Java Code

import java.awt.*;
import javax.swing.*;
import java.awt.Graphics;
/**
 * This will draw a five-point star in an Applet and then
 * bounce it around the canvas.
 * 
 * @author Shaun B 
 * @version 2012-10-31
 */
public class starAnimation extends JApplet implements Runnable
{
    // This array will draw a simple house:
    private static int star[] = 
    {
        /** co-ordinates in array read as
         * x0, y0 to x1, y1. -1 terminates */
         0, 28, 30, 28,
        30, 28, 39,  0,
        39,  0, 50, 28,
        50, 28, 79, 28,
        79, 28, 55, 46,
        55, 46, 64, 73,
        64, 73, 40, 57,
        39, 57, 15, 73,
        15, 73, 23, 45,
        23, 45,  0, 28,
        -1
    };
    // Starting position of star:
    private int xAxis = 0;
    private int yAxis = 0;
    // Sets the height and width of the image:
    private int widthOfStar = 80;
    private int heightOfStar = 73;
    // Sets the direction of the animation
    // positive to move right/down and negative
    // to move left/up:
    private int xDirection = 1;
    private int yDirection = 1;
    // This will be used to get the width and height of the Applet
    private int width=0;
    private int height=0;
    // This will be used to index through the array above:
    private int index=0;
    // Read up about back buffering, as it's important ;-)
    private Image backBuffer = null;
    private Graphics backg = null;
    // This will be our thread, you need to know about threads too:
    private Thread runner = null;
     /**
     * Called by the browser or applet viewer to inform this JApplet that it
     * has been loaded into the system. It is always called before the first 
     * time that the start method is called.
     */
    @Override
    public void init()
    {
        // This is a workaround for a security conflict with some browsers
        // including some versions of Netscape & Internet Explorer which do 
        // not allow access to the AWT system event queue which JApplets do 
        // on startup to check access. May not be necessary with your browser. 
        JRootPane rootPane = this.getRootPane();    
        rootPane.putClientProperty("defeatSystemEventQueueCheck", Boolean.TRUE);
        // Gets the current width and height and creates a back buffer
        // to that height:
        width = getSize().width;
        height = getSize().height;
        backBuffer = createImage(width, height);
        // Creates instance of the back buffer:
        backg = backBuffer.getGraphics();
        // Sets default behaviour as focusable:
        setFocusable(true);
        setVisible(true);
    }
    public void animate(int x, int y)
    {
        // Calls drawImage method:
        drawImage(xAxis, yAxis, star);
    }
    public void drawImage(int x, int y, int img[])
    {
        // Sets the default foreground colour:
        backg.setColor(Color.black);
        // This will step through the array points to draw
        // the star object. There is probably also a fillPolygon
        // or drawPolygon method that could also be used:
        while(star[index]>=0)
        {
            int x0 = x+(star[index+0]);
            int y0 = y+(star[index+1]);
            int x1 = x+(star[index+2]);
            int y1 = y+(star[index+3]);
            backg.drawLine( x0, y0, x1, y1 );
            index += 4;
        }
        // Resets index to zero, incase the JApplet is reloaded or something:
        index = 0;
    }
    public void clearBackBuffer()
    {
        // This will clear the canvas so that there is no trail left by the star
        // by setting the default background colour and then filling it to the
        // width and height of the canvas:
        backg.setColor(Color.white);
        backg.fillRect(0, 0, width, height);
    }
    /**
     * Called by the browser or applet viewer to inform this JApplet that it 
     * should start its execution. It is called after the init method and 
     * each time the JApplet is revisited in a Web page. 
     */
    @Override
    public void start()
    {
       // Sets up the thread:
       if(runner == null)
       {
           runner = new Thread(this);
           runner.start();
       }
       // Call to parent (not needed):
       // super.start();
    }
    /** 
     * Called by the browser or applet viewer to inform this JApplet that
     * it should stop its execution. It is called when the Web page that
     * contains this JApplet has been replaced by another page, and also
     * just before the JApplet is to be destroyed. 
     */
    @Override
    public void stop()
    {
        // Call to parent:
        super.stop();
    }
    @Override
    public void run()
    {
        // Checks if this thread has been set to runnable in the start method:
        Thread thisThread = Thread.currentThread();
        while (runner == thisThread)
        {
            // Calls our method to draw the star:
            animate(xAxis, yAxis);
            try
            {
                // This is the time that it will pause in milliseconds
                // 1000 = 1 second:
                Thread.sleep(20);
            }
            catch (InterruptedException e)
            {
            }
            repaint();
            // This will move the x and y co-ordinates of our object:
            xAxis += xDirection;
            yAxis += yDirection;
            // This will check the boundries of the current applet canvas:
            if(xAxis >= (width-widthOfStar))
            {
                xDirection =-1;
            }
            if(xAxis <=0)
            {
                xDirection = 1;
            }
            if(yAxis >= (height-heightOfStar))
            {
                yDirection =-1;
            }
            if(yAxis <=0)
            {
                yDirection = 1;
            }
            // Clears the canvas, so there is no 'trail'
            // left by the moving star:
            clearBackBuffer();
        }
    }
    // Main paint method (called on repaint(); I think):
    @Override
    public void paint(Graphics g)
    {
        // Calls to the update method:
        update(g);
    }
    public void update(Graphics g)
    {
        // Gets the backBuffer and draws it to the canvas:
        g.drawImage(backBuffer,0,0,this);
        // the sync toolkit is used for animations as it stops flicker:
        getToolkit().sync();
    }
    /**
     * Called by the browser or applet viewer to inform this JApplet that it
     * is being reclaimed and that it should destroy any resources that it
     * has allocated. The stop method will always be called before destroy. 
     */
    @Override
    public void destroy()
    {
        // Calls the garbage collector before calling parent:
        runner = null;
        System.gc();
        super.destroy();
    }
}

import java.awt.*;
import javax.swing.*;
import java.awt.Graphics;
/**
 * This will draw a five-point star in an Applet and then
 * bounce it around the canvas.
 * 
 * @author Shaun B 
 * @version 2012-10-31
 */
public class starAnimation extends JApplet implements Runnable
{
    // This array will draw a simple house:
    private static int star[] = 
    {
        /** co-ordinates in array read as
         * x0, y0 to x1, y1. -1 terminates */
         0, 28, 30, 28,
        30, 28, 39,  0,
        39,  0, 50, 28,
        50, 28, 79, 28,
        79, 28, 55, 46,
        55, 46, 64, 73,
        64, 73, 40, 57,
        39, 57, 15, 73,
        15, 73, 23, 45,
        23, 45,  0, 28,
        -1
    };
    // Starting position of star:
    private int xAxis = 0;
    private int yAxis = 0;
    // Sets the height and width of the image:
    private int widthOfStar = 80;
    private int heightOfStar = 73;
    // Sets the direction of the animation
    // positive to move right/down and negative
    // to move left/up:
    private int xDirection = 1;
    private int yDirection = 1;
    // This will be used to get the width and height of the Applet
    private int width=0;
    private int height=0;
    // This will be used to index through the array above:
    private int index=0;
    // Read up about back buffering, as it's important ;-)
    private Image backBuffer = null;
    private Graphics backg = null;
    // This will be our thread, you need to know about threads too:
    private Thread runner = null;
     /**
     * Called by the browser or applet viewer to inform this JApplet that it
     * has been loaded into the system. It is always called before the first 
     * time that the start method is called.
     */
    @Override
    public void init()
    {
        // This is a workaround for a security conflict with some browsers
        // including some versions of Netscape & Internet Explorer which do 
        // not allow access to the AWT system event queue which JApplets do 
        // on startup to check access. May not be necessary with your browser. 
        JRootPane rootPane = this.getRootPane();    
        rootPane.putClientProperty("defeatSystemEventQueueCheck", Boolean.TRUE);
        // Gets the current width and height and creates a back buffer
        // to that height:
        width = getSize().width;
        height = getSize().height;
        backBuffer = createImage(width, height);
        // Creates instance of the back buffer:
        backg = backBuffer.getGraphics();
        // Sets default behaviour as focusable:
        setFocusable(true);
        setVisible(true);
    }
    public void animate(int x, int y)
    {
        // Calls drawImage method:
        drawImage(xAxis, yAxis, star);
    }
    public void drawImage(int x, int y, int img[])
    {
        // Sets the default foreground colour:
        backg.setColor(Color.black);
        // This will step through the array points to draw
        // the star object. There is probably also a fillPolygon
        // or drawPolygon method that could also be used:
        while(star[index]>=0)
        {
            int x0 = x+(star[index+0]);
            int y0 = y+(star[index+1]);
            int x1 = x+(star[index+2]);
            int y1 = y+(star[index+3]);
            backg.drawLine( x0, y0, x1, y1 );
            index += 4;
        }
        // Resets index to zero, incase the JApplet is reloaded or something:
        index = 0;
    }
    public void clearBackBuffer()
    {
        // This will clear the canvas so that there is no trail left by the star
        // by setting the default background colour and then filling it to the
        // width and height of the canvas:
        backg.setColor(Color.white);
        backg.fillRect(0, 0, width, height);
    }
    /**
     * Called by the browser or applet viewer to inform this JApplet that it 
     * should start its execution. It is called after the init method and 
     * each time the JApplet is revisited in a Web page. 
     */
    @Override
    public void start()
    {
       // Sets up the thread:
       if(runner == null)
       {
           runner = new Thread(this);
           runner.start();
       }
       // Call to parent (not needed):
       // super.start();
    }
    /** 
     * Called by the browser or applet viewer to inform this JApplet that
     * it should stop its execution. It is called when the Web page that
     * contains this JApplet has been replaced by another page, and also
     * just before the JApplet is to be destroyed. 
     */
    @Override
    public void stop()
    {
        // Call to parent:
        super.stop();
    }
    @Override
    public void run()
    {
        // Checks if this thread has been set to runnable in the start method:
        Thread thisThread = Thread.currentThread();
        while (runner == thisThread)
        {
            // Calls our method to draw the star:
            animate(xAxis, yAxis);
            try
            {
                // This is the time that it will pause in milliseconds
                // 1000 = 1 second:
                Thread.sleep(20);
            }
            catch (InterruptedException e)
            {
            }
            repaint();
            // This will move the x and y co-ordinates of our object:
            xAxis += xDirection;
            yAxis += yDirection;
            // This will check the boundries of the current applet canvas:
            if(xAxis >= (width-widthOfStar))
            {
                xDirection =-1;
            }
            if(xAxis <=0)
            {
                xDirection = 1;
            }
            if(yAxis >= (height-heightOfStar))
            {
                yDirection =-1;
            }
            if(yAxis <=0)
            {
                yDirection = 1;
            }
            // Clears the canvas, so there is no 'trail'
            // left by the moving star:
            clearBackBuffer();
        }
    }
    // Main paint method (called on repaint(); I think):
    @Override
    public void paint(Graphics g)
    {
        // Calls to the update method:
        update(g);
    }
    public void update(Graphics g)
    {
        // Gets the backBuffer and draws it to the canvas:
        g.drawImage(backBuffer,0,0,this);
        // the sync toolkit is used for animations as it stops flicker:
        getToolkit().sync();
    }
    /**
     * Called by the browser or applet viewer to inform this JApplet that it
     * is being reclaimed and that it should destroy any resources that it
     * has allocated. The stop method will always be called before destroy. 
     */
    @Override
    public void destroy()
    {
        // Calls the garbage collector before calling parent:
        runner = null;
        System.gc();
        super.destroy();
    }
}

Swing - JApplet example with a back buffer.

Developer Shed Advertisers and Affiliates