simple animation help

[kezzie]

looking to build a very simple animation where you have 8 basic counters i.e. drawOval(50,50,40,40);

I would like for counter 1 to move to another position i.e 100,100 then stop

Once the counter stopped I'd like to move counter 2 to a new position i.e from 80,80 to 150,120 then stop b4 doing the same with counters 3 and 4. The other counters do not need to move

I would like to do this in slow motion in order to illustrate a problem.


I have seen a few animation source codes where graphics continually move accross the screen but none to do as I wish.

Any help source code grately appreciated


Kezzie

newbie with a sore head

[cjard]

sorry.. im really lost.. what's a counter? a graphics of a clock? or are you moving simple ovals round, using a Timer to update their positions so that they move for X iterations of the timer, then stop?

[kezzie]

Sorry no good at explaining

I am just referring to a circle drawn on screen, as part of applet I have users dragging circles about the screen.

I would like however to show an animation of some of the graphical circles (to reference them I named them counters) moving by themselves. i.e counter1 to point a, counter 2 then to point b.

Each counter is represented as drawOval(50,50,20,20);

basically just need "ovals" to move from one point to another slowly and stop before next one moves.



Kezzie

[cjard]

oh.. you mean counter as in tiddly-winks! (its a game involving flicking plastic discs/counters into a cup)...

to me counter is something that you counter++ in a loop.
lol

the concept youre talking about is sprites, used often in games.

sprites know:
where they are
where they are going
what they look like
what time it is


at time T, a sprite will be in position X, and will draw himself there
at time T+1, a sprite will be in position Y (determined from previous X, combined with known direction and speed. if direction is 1,1 and speed is 5, and previous position was 10,10, then he might well be at 15,15 (1,1 * speed) plus X)
at time T+100, he might have set his speed to 0, and hence be no longer moving....

at all times, when handed a canvas to draw himself on, he draws

so make that class.. call it sprite, give it a position, speed and direction.
make it an observer too, so it can watch a clock
and give it a drawYourself(Graphics g) method

make a Timer object.. java comes with one:
http://java.sun.com/j2se/1.4.2/docs/...til/Timer.html
do not confuse it with javax.swing.Timer, which emits ActionEvents (button presses etc) at a set rate..
You create a timertask that loops through an array of sprites telling each one of them to draw themselves on a certain Graphics object (put a JPanel on a gui, then call its getGraphics() method.. when each sprite draws on the given graphics, it will appear in the panel..)

once you have your structure in place, you can program the sprites.. extend them further (perhaps) to take an array of ints; what direction and what they should set their speed to at a particular time.. and how long they should spend in that motion.
naturally, youre free to implement the path storage however you would like - i just recommend vectors (not Vectors) vector = a direction, speed and time to spend at that

[kezzie]

very new to java and having real trouble with this. Have looked up timers. Have the following code to have one of the counters moving randomly. Only problem is I want several on screen at same time moving within set coordinates, I struggle to understand how to write java from scratch however I seem to understand examples of similar scripts better and am able to build up from there however this time Ihave a real block everything I try throws up dozens errors. The code I have working is below,

import java.util.*;
import java.awt.*;
import java.applet.*;

public class time4 extends Applet
implements Runnable
{
Thread timer = null;
int x=100,y=100;//put counter in middle of
//screen

public void paint(Graphics g)
{
g.setColor(getBackground());
counter(g);

x+=(Math.random()*10)-5;
y+=(Math.random()*10)-5;

if ( x>200) x=200; if ( y>200) y=200;
if ( x<0 ) x=0; if ( y<0 ) y=0;//stops counter going off screen

g.setColor(Color.blue);
counter(g);
}

public void counter(Graphics g)
{
g.fillOval(x,y,50,50);
}

public void start()
{
if(timer == null)
{
timer = new Thread(this);
timer.start();
}
}

public void stop()
{
timer = null;
}
public void run()
{
while (timer != null)
{
delay(20); // wait 100 ms
repaint();
}
timer = null;
}

public void delay(int ms)
{
try {timer.sleep(ms);}
catch (InterruptedException e){}
}
}

[soup]

newbie here as well. cjard, could i use sprites to create gravity on an oval, where i could let it fall, then bounce it back up again and so on. If you could do this(i know you can somehow) using sprites, could you tell me how???? i forgot to mention how the oval would decellerate up, and accalerate down

[cjard]

the timer neednet be a thread,.. and actually i would avoid using one.. instead, use a java.util.Timer .. it stimulates one or more TimerTasks at a fixed interval

you could create a timertask for each of your ovals, that causes it to move just a little, but perhaps better, just one timer task should stimulate your drawing area. Your drawing area would be an extension of a JPanel, and it would hold a list of ovals.

Each oval is a sprite; an object that knows where it is, where it is going, and how fast it is going there. Sprites manage their own motion, when they are told time has passed..

so your jpanel is kicked by the timer, and every tiome it is kicked, it tells the ovals it knows about, that time has passed. Each oval updates its position etc, then after all is done.. the panel calls upon each oval to draw himself, and provides an area on which to draw.. the oval simply draws himself

so the oval class might look soemthing like:

class OvalSprite{

  int x, y, x_vect, y_vect;

  public OvalSprite(int ox, int oy, int xv, int yv){
    x=ox;
    y=oy;
    x_vect = xv;
    y_vect = yv;
  }

  public void timeHasPassed(){
    x += x_vect;
    y += y_vect;
  }

  public void drawYourself(Graphics g){
    g.fillOval(x,y,10,20);
  }
}

thats very simple.. you could add methods for setting the size of the oval etc..

then you have a custom JPanel:

class OvalSandpit extends JPanel{

  OvalSprite[] theSprites;

  public OvalSandpit(OvalSprite[] os){
    theSPrites = os;
  }

  public void paint(Graphics g){
    for(int i=0;i<theSprites.length; i++){
      theSprites[i].drawYourself(g);
    }
  }

then you create a timertask that stimulates the ovals. ive decided to make the TImerTask do this directly:

class OvalTimerTask extends TimerTask{

  OValSprites theSPrites;
  OvalSandpit thePit;

  OvalTimerTask(OvalSprites[] os, OvalSandpit sand)
    theSprites = os;
    thePit = sand;
  }

  run(){
    for(int i=0; i<theSprites.length; i++){
      theSprites[i].timeHasPassed();
    }

    thePit.repaint();// draw the sprites!
  }

now we stick em all togetehr ina frame:

class OvalBooger extends JFrame{

  OvalBOoger(){
    //make a new array of oval sprites
    //make a new sandpit
    //make a new timertask, add in the sprites and the pit
    //make a new timer and tell it to stimulate the task every X milliseconds

    //add the pit to the frame
    //show the frame
    //start the timer
  }
}

[cjard]

Originally posted by soup
newbie here as well. cjard, could i use sprites to create gravity on an oval, where i could let it fall, then bounce it back up again and so on. If you could do this(i know you can somehow) using sprites, could you tell me how???? i forgot to mention how the oval would decellerate up, and accalerate down

this is quite easy... just make the timeHasPassed more sophisticated... a sprite knows where it is, so to have it bounce:

if Y position is lower than the floor
yvect = -yvect //reverse the direction of travel

bear in mind that screens are coordinated from 0,0 being in the top left... so a +yvect will cause motion down the screen

we normally work the otehr way up... so you should start your sprite bouncing by giving it a large (e.g. -20) negative yvect.. then every time time passes, add 1 to it..
the first time that time passes it will move up 20, next, move up 19.. after 20 ticks, it will not move(y is 0) on tick 1 it will start moving down again

timeHasPassed()

if(y > 500) //if it is lower than 500 down the drawing area
  yvect = -yvect //bounce

y+= yvect 

yvect--;

but how do we start it bouncing? easy.. kick it:

new OvalSprite(100,500,0,-20)

//starts off painted at position 500, bouncing upwards with 20 pixels each tick, reducing by 1 each tick

if you want to kick it after you made it.. add some get and set methods
if you want to have it colliding, you need something to watch both of them, and change the vectors.. or... you can have sprites talk to each other, but some class who has access to all sprites should do the introductions