JSimpleAnimationComponent

One of the other things that I do from time to time is some Java programming, typically in the areas of user interface development and visualization. In particular, I'm often writing editors and visualization tools for knowledge engineering and AI systems.

This is not my full time job, so I should be considered more of a hobbyist than a professional, but I'm effective enough to develop prototype systems for demonstration or limited use.

Recently, for my semantic soccer wiki, I've been exploring the concept of developing little animated applets to visualize soccer tactics. Longer term, I'm interested in developing a soccer simulation that's (at least partly) driven by the semantic content of the wiki. In the near term, I'd just like to get some dots moving around on soccer field background image.

I've always had a bit of trouble with getting my Java applications to repaint properly, especially when I want things to move around. I spent an evening researching it and was more confused than ever. Finally, this morning I talked to a friend of mine who is more experienced in such things and he showed me that it is fairly simple after all.

Essentially, you need to do the following things:

1. Create a subclass of a JComponent,
2. Create a swing Timer to trigger an update message on a periodic basis,
3. In the update message, move your sprites around and call the repaint() method, and
   
4. Override paintComponent() to draw your sprites in the updated location.
   

It's so simple, but it took me a long time to work through it (and maybe never would have without my buddy). Therefore, I created a simple example that I thought I would share with the world called JSimpleAnimationComponent.

Here's the code:

---

import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.Timer;

/**
* A very simple panel that demonstrates
* how to create a Swing component that updates
* and repaints itself with a Timer.
*
* @author Keith Knudsen
*/
public class JSimpleAnimationComponent extends JComponent
 implements ActionListener {

 /**
  * @param args
  */
 public static void main(String[] args) {
  JFrame frame = new JFrame("AnimationPanel");
  frame.setDefaultCloseOperation(
    JFrame.EXIT_ON_CLOSE);
  frame.getContentPane().add(
    new JSimpleAnimationComponent(),
    BorderLayout.CENTER);
  frame.setSize(200,200);
  frame.setVisible(true); 
 } 
 
 public JSimpleAnimationComponent () {
  Timer timer = new Timer(50, this);
  timer.start();
 }
 
 /* position of our little moving square */
 int x = 10;
 int y = 10;

 /**
  * Called by the timer.  Update the position of
  * our little moving square and then call repaint.
  */
 public void actionPerformed(ActionEvent e) {
  x++;
  // keep the little square from running off the edge
  if(x > this.getWidth()) {
   x = 10;
  }
  repaint();
 }
 
 /*
  * Paint the background and the little square
  * at it's current position.
  */
 public void  paintComponent ( Graphics  g )
 { 
  // clean up the background from the previous draw
  super.paintComponent(g);
 
  // draw sprite
  g.setColor(Color.RED);
  g.drawRect(x, y, 10, 10);
 }
}