Animation

[John Spindler]

Ok everybody I need some help. I am trying to do graphic animation. I read through all 4 of the HelloAnimThread exaples as you'll see in a min =), anyway my project involves having two text fields for the user to input a X and a Y coordinate then once they hit the "Move" button, the small image should as smoothly as possible move to that X,Y coordinate. If you can guess I am having a bit of trouble. In my code I've made use of the double buffering technique (and I don't know if this is a good idea or not) but I'm drawing the "onsite" image 50 pixels from the top of the Y axis to give me room for the text fields and the button. (One of the previous requirements was to add an image to a label and have that move around the screen, is that even possible?), Can anyone think of a better way of doing this? I would greatly appreciate it! Thanks!<br><br>

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;
/**
 * CursorMove.java 
 *
 */
public class CursorMove extends java.applet.Applet implements Runnable {
    private Image cursor;
    private int currX, currY, maxWidth, maxHeight;
    private int imageHeight, imageWidth;
    private int velocityX, velocityY;
    private TextField tfX,tfY;
    private Button bt;
    private String button_Text;
    
    
    
    //db-l Buffering stuff
    Graphics offscreen;
    Image imageOffScreen;
    
    
    
    public void init() { 
    
    //setBackground(Color.gray);
    maxWidth = getSize().width;
    maxHeight = getSize().height;   
    velocityX = Integer.parseInt(getParameter("velocity")); 
    velocityY = velocityX;
    cursor = getImage(getCodeBase(),getParameter("cursor_Image"));
    imageHeight = cursor.getHeight(this);
    imageWidth = cursor.getWidth(this);
    currX = (int) ((Math.random()*80) + 1);
    currY = (int) ((Math.random()*80) + 50);
    
    tfX = new TextField();
    //tfX.setSize(new Dimension(70,20));
    //tfX.setLocation(new Point(110,40));
    tfX.setVisible(true);
    
    tfY = new TextField();
    //tfY.setSize(new Dimension(30,20));
    //tfY.setLocation(new Point(150,40));
    tfY.setVisible(true);
    
    bt = new Button();
    button_Text = getParameter("button_Text");
    bt.setLabel(button_Text);
    bt.setSize(new Dimension(70,20));
    bt.setLocation(new Point(190,40));
    bt.setVisible(true);
    
    add(tfX);
    add(tfY);
    add(bt);
    
    // Create the image for db-l buffering
    imageOffScreen = createImage( maxWidth, maxHeight );
    offscreen = imageOffScreen.getGraphics();
    
    bt.addActionListener(new ActionListener()
    {
    public void actionPerformed(ActionEvent e) {
    move_em();
    }
    });
    
    // Here we start our thread
    Thread animator = new Thread(this);
    animator.start();    
       
    }
    
    
    public void stop() {
    }
    
    public void paint(Graphics g) {
    
    // first thing to do is update, erase background of
    // offscreen Graphics surface.
    offscreen.setColor(getBackground());
    offscreen.fillRect(0,50, maxWidth, maxHeight);
    
    offscreen.setColor(Color.black);
    offscreen.drawImage(cursor, currX, currY, this);
    
    // then send it to screen
    g.drawImage(imageOffScreen, 0, 50, this);
    }
    
    public void update(Graphics g) {
    paint(g);
    }
    
    public void run() {
    move_em();
    }
    
    public void move_em() {
        
    int user_inputX; 
    int user_inputY; 
    user_inputX = Integer.parseInt(tfX.getText());
    user_inputY = Integer.parseInt(tfY.getText());
 
 
    while(currY != user_inputY && currX != user_inputX) {
    
    
    currX = currX + velocityX;
    currY = currY + velocityY;
    
    if((currX + imageWidth) >= maxWidth) {
    velocityX = -3;
    }
    else if( currX <= 0) {
    velocityX = 3;
    }
    
    if((currY + imageHeight) >= maxHeight - 50) {
    velocityY = -3;
    }
    else if( currY <= 50) {
    velocityY = 3;
    }
    
    repaint();
    }
    }
    
}  

[Peter Gragert]

I think, the starting point is good. I think that the smooth animation is to be done by
letting the thread 'sleep' for some time.
I tried to adjust your code, but succeeded (until now) only for the very first loading where a
'cursor' moved very smooth from one place to another. (now for me holydays start will be back in three weeks)

[Peter Gragert]

Maybe this is nearby the solution you look for!
It moves the cursor rather smootly nearby the desired posistion.
Use the sleep time to adjust speed too?!
//I tried to obey the Cattledrive Styleguide

// CursorMove.java, John Spindler, adjusted by PKHG, 020713
import java.applet.Applet ;
import java.awt.Button ;
import java.awt.Color ;
import java.awt.Dimension ;
import java.awt.Graphics ;
import java.awt.Image ;
import java.awt.Point ;
import java.awt.TextField ;
import java.awt.event.ActionEvent ;
import java.awt.event.ActionListener ;
public class CursorMove extends java.applet.Applet implements Runnable 
{    
    Image cursor ;
    int currX = 10 ;
    int currY = 50 ;
    int maxWidth ; 
    int maxHeight ;
    int imageHeight ; 
    int imageWidth ;
    int velocityX ;
    int velocityY ;
    TextField tfX ;
    TextField tfY ;
    int user_inputX ;
    int user_inputY = 50; //neccessary!
    Button bt ;
    String button_Text ;
    //db-l Buffering stuff    
    Thread animator ;
    Graphics offscreen ;
    Image imageOffScreen ;
    public void init() 
    {         
//setBackground( Color.gray );
    maxWidth = getSize().width ;
    maxHeight = getSize().height ;
//       velocityX = Integer.parseInt( getParameter( "velocity" ) );
velocityX = 1 ;
     velocityY = velocityX ;
    cursor = getImage( getCodeBase() , getParameter( "cursor_Image" ) );
    imageHeight = cursor.getHeight( this );
    imageWidth = cursor.getWidth( this );
    currX = (int)( ( Math.random() * 80 ) + 1 );
    currY = (int)( ( Math.random() * 80 ) + 51 );
tfX = new TextField( "10" );   //initial value!    
//tfX.setSize( new Dimension(70,20) );
//tfX.setLocation( new Point(110,40) );
    tfX.setVisible( true );
tfY = new TextField( "100" );   //initial value!
    
//tfY.setSize( new Dimension(30,20) );
//tfY.setLocation( new Point(150,40) );
    tfY.setVisible( true );
bt = new Button();
    button_Text = getParameter( "button_Text" );
    bt.setLabel( button_Text );
    bt.setSize( new Dimension( 70 , 20 ) );
    bt.setLocation( new Point( 190 , 40 ) );
    bt.setVisible( true );
add( tfX );
    add( tfY );
    add( bt );
        
// Create the image for db-l buffering    
imageOffScreen = createImage( maxWidth , maxHeight );
    offscreen = imageOffScreen.getGraphics();
bt.addActionListener
    ( 
     new ActionListener()    
{        
    public void actionPerformed( ActionEvent e ) 
    {    
user_inputX = Integer.parseInt( tfX.getText() );
user_inputY = Integer.parseInt( tfY.getText() );
System.out.println( "clicked" );
    }    
}
     );

// Here we start our thread    
animator = new Thread( this );
    animator.start();
    }            
    public void paint( Graphics g ) 
    {    
// first thing to do is update, erase background of    
// offscreen Graphics surface.
offscreen.setColor( getBackground() );
    offscreen.fillRect( 0 , 50 , maxWidth, maxHeight );
offscreen.setColor( Color.black );
    offscreen.drawImage( cursor , currX , currY , this );        
// then send it to screen    
g.drawImage( imageOffScreen , 0 , 50 , this );
    }
    public void update( Graphics g ) 
    {    
paint( g );
    }
    public void run() 
    {    
        Thread me = Thread.currentThread();
        while ( animator == me ) 
{    
            try 
    {
                Thread.currentThread().sleep( 1000 );
            } 
    catch ( InterruptedException e ) 
    {
System.out.println( e );
            }
    move_em();
            repaint();
        }
    }
    public void move_em() 
    {    
//while(currY != user_inputY && currX != user_inputX)//nearly impossible!
while ( ( Math.abs( currX - user_inputX ) >15 ) ||
( Math.abs( currY - user_inputY ) >15 ) )
{    
    repaint();
    try {
animator.sleep( 10 );
    }
    catch ( InterruptedException e )
    {
    }
    currX = currX + velocityX ;
    currY = currY + velocityY ;
    if( ( currX + imageWidth ) >= maxWidth ) 
    {    
velocityX = -3 ;
    }    
    else if( currX <= 0) 
    {    
velocityX = 3 ;
    }
    if( ( currY + imageHeight ) >= maxHeight - 50) 
    {    
velocityY = -3 ;
    }
    else if( currY <= 50) 
    {    
velocityY = 3 ;
    }
}
System.out.println( "x = " + currX + " y = " + currY );
//maybe you force the pointer now to the asked place?!
    }    
}