• Contribute
• What's New
• Submit News

Visualizing data is an important part of the JDK and is simple and powerful to achieve. Visualization is achieved by ensuring your classes implement the Visualizable interface. Visualizable interfaces have to implement two functions, render and writeImage:

public abstract void render(Graphics g, int width, int height);

public abstract void writeImage(String s, int width, int height);

render takes three basic parameters: the graphics context along with its width and height. The implementation of render is solely up to the programmer, but there are a few considerations to remember:

• Background colours and borders will need to be specified.
• You will want to scale your graphics for the dimensions passed to render.
• If the data visualization is not suitable to scale, you should centre the data in the graphics context.

Rendering Flock

Flock implements a boids-type flocking algorithm. There are two important issues that make Flock an interesting case-study: firstly, centering the data within the graphics context and secondly, clipping the flocking agents within that world.

The Flock render functions looks like this:

public void render(java.awt.Graphics g, int width, int height) {
// Calculate start
int sx = (int)((width  - cols) / 2.0);
int sy = (int)((height - rows) / 2.0);
// Fill background and border
  g.setColor(clrBackground);
  g.fillRect(0,0,width,height);
  g.setColor(Color.BLACK);
  g.fillRect(sx,sy,cols,rows);
  g.setColor(Color.WHITE);
// Set up the clipping rectangle
  g.setClip(sx, sy, cols, rows);
        
  for (int b=0; b<numFlockingAgents; b++) {
    flock[b].render(g, sx, sy);
  }
}

A boids world consists of a certain number of columns and rows, but this is independent to the width and height of the graphics context. Remember that applets and images can be any size the user wants, it is up to the programmer to ensure the classes are correctly rendered.

Therefore, the first step is to calculate where our boids world starts within the graphics context. Next, the entire graphics context is filled with the background colour. Then the boid space is filled with a black background. Next a clipping area is set up.

A clipping area is required because although the flocking agents can only exist within the specified world, they are rendered with a tail which can project out of the world. To keep things clean and professional, the clipping area will ensure these tails are removed. The image below demonstrates this:

Finally, the boids are rendered by passing the graphics context and starting point.

Writing Images

Once the render code is in place, writing to images is incredibly easy. Although writeImage of course allows for specialized code, most implementations should simply call writeVisualizedImage. This static function is found in the ImageHelper class (org.generation5.util). A typical implementation of writeImage would therefore look like this:

public void writeImage(String s, int width, int height) {
try {
    ImageHelper.writeVisualizedImage(s, width, height, this);
  } catch (java.io.IOException e) {
    System.err.println(e);
  }
}

writeVisualizedImage simply takes the filename, width and height of the image and an instance of a Visualizable class. The function then creates a graphics context and calls the class' render function before writing the whole lot to an image. Currently the function only supports PNG, although this will hopefully change in a later release of the JDK.

Rendering in Applets

Rendering your classes in applets is just as easy once your render code is in place. VisualizationPanel in org.generation5.swing is a JPanel-derived panel that can be placed in applets and used to display your content within. Simply call setContent with your visualizable class, and everything is taken care of.