Java:Animation

Chris North

cs3724: HCI

Animation?

• Changing graphics over time

• Examples:• cartoons

• Clippy, agents/assistants

• Hour glass

• Save dohicky

• Progress bar

• Copy file

• Amit’s pulsating plot

Purvi

• Algorithm Animation

Java Graphics Review

• Extend JPanel• Override paintComponent( ) method

public class MyPanel extends JPanel {

public void paintComponent(Graphics g){

super.paintComponent(g);

Graphics2D g2 = (Graphics2D)g;

// my graphics here:

g2.drawString("Hello World", 10, 10);

}

}

Ticker

Animating the ticker text

• Keep repainting graphics using different x

public class MyPanel extends JPanel {

int x;

public void paintComponent(Graphics g){

super.paintComponent(g);

Graphics2D g2 = (Graphics2D)g;

// my graphics here:

g2.drawString("Hello World", x, 10);

}

}

Animation Loop

• Update x location (member variable)

• Repaint

While(true){ //infinite loop

x = x – 1;

repaint(); //calls paintComponent()

Thread.sleep(10); //slow down animation

}

• Problem?

Multi-Threading

• Loop prevents other parts of code from executing

• User events pile up

• Multiple threads let multiple methods execute simultaneously (multi-tasking)

• Threads = lightweight processes, shared memory

Main thread

User interaction

Anim thread

Update graphics

Java Threads

• implement Runnable interface

• Override run( ) method• Put animation loop here

• new Thread(runnable)

• Thread.start( )• Calls runnable.run( )

in new thread

Runnablerun( )

Threadstart( )

MyPanel

Simplifying

• MyPanel implements Runnable

Runnablerun( )

Threadstart( )

MyPanel

Threadstart( )

MyPanel

Runnable

run( )

Threaded Tickerpublic class MyPanel extends JPanel implements Runnable {

int x = 100;Thread mythread;

public MyPanel(){ // constructormythread = new Thread(this);mythread.start();

}public void run(){

while(true){ // animation loopx = x – 5;repaint(); Thread.sleep(100);

}}public void paintComponent(Graphics g){

super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; g2.drawString("Hello World", x, 10); // my graphics }}

or in button code that starts animation

Stopping a Thread

• Stop animation loop with a flag• mythread = null; will cleanup thread object

Boolean runMyAnimation;

While(runMyAnimation){ //flag stops loop

x = x – 5;

repaint(); //calls paintComponent()

Thread.sleep(100); //slow down animation

}

Controlling Animation Speed

While(true){

x = x – 5; //animation step size

repaint();

Thread.sleep(100); //delay between steps

}

Milliseconds1000 = 1 second

Animation Summary

• In a secondary thread:

1. Make changes to global state

2. Repaint

3. Sleep delay

4. Repeat

• Use double buffering as needed

JBuilder Example