CIS-257 Home: http://www.c-jump.com/bcc/c257c/c257syllabus.html

Custom 2D rendering animation

1. Introduction
2. Animation, step-by step

Introduction

• In previous tutorial we discussed custom 2D drawing with overridden

  
      JPanel.paintComponent( Graphics graph )
  
  

  method. This tutorial adds basic animation to the original 2D drawing program.

   

Animation, step-by step

1. Add new class to the project:

   
   package drawingDemo;
   
   public class BackgroundThread implements Runnable {
   
       public static final int SLEEP_TIMEOUT = 1000 / 24; // 24 fps
       FrameDemo2D mainWindow;
   
       // constructors
       public BackgroundThread( FrameDemo2D mainWindow )
       {
           this.mainWindow = mainWindow;
       }
   
       @Override
       public void run() {
           for(;;) {
               // forever...
               try {
                   // ask EDT thread to repaint itself
                   java.awt.EventQueue.invokeLater(new Runnable() {
                       public void run() {
                           mainWindow.update();
                       }
                   });
                   // go to sleep for a period of time
                   Thread.sleep(SLEEP_TIMEOUT);
               } catch (InterruptedException ie) {
               }
           }
       }
   }//class BackgroundThread
   
   

2. Add degrees data attribute to the DrawingBox2D class:

   
   public class DrawingBox2D extends javax.swing.JPanel {
       private int degrees = 0;
       //...
   
   

3. Add update method to the DrawingBox2D class:

   
       public void update() {
           degrees = ( ++degrees%360 == 0 ) ? 0 : degrees;
       }
   
   

4. Modify paintComponent method in DrawingBox2D class as follows:

   
       @Override
       public void paintComponent(Graphics graph) {
           super.paintComponent(graph);
   
           // Our own 2D rendering starts here:
           graph.setColor(Color.RED);
           graph.fillRect(10, 20, 20, 40);
           graph.setColor(Color.BLUE);
           graph.drawString( "degrees=" + degrees , 35, 45);
           graph.drawLine(100, 100, 80, 80);
   
           int oldx = 0;
           int oldy = 0;
           for (int x = 0; x < 360; ++x) {
               int y = (int) (-sin(Math.toRadians( x + degrees )) * 50) + 100;
               graph.drawLine(oldx, oldy, x, y);
               oldx = x;
               oldy = y;
           }
       }//paintComponent
   
   

5. Modify main method in FrameDemo2D class as follows:

   
       public static void main(String args[]) {
           //...
           /* Create and display the form */
           java.awt.EventQueue.invokeLater(new Runnable() {
               public void run() {
                   FrameDemo2D mainWindow = new FrameDemo2D();
                   mainWindow.setVisible(true);
                   BackgroundThread thp = new BackgroundThread( mainWindow );
                   Thread th = new Thread( thp );
                   th.start();            }
           });
           //...
   
   

6. Add update method to the FrameDemo2D class:

   
       public void update() {
           DrawingBox2D drawingBox = (DrawingBox2D)pnlDrawingBoard;
           drawingBox.update();
           pnlDrawingBoard.repaint();
       }
   
   

7. Compie and run the application. You should see animated sine graphic on the form.