Win a copy of Practical SVG this week in the HTML/CSS/JavaScript forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic

Animation of shapes

 
Vani Sweety
Ranch Hand
Posts: 87
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
i have a class drawingPanel where i draw all my shapes(irregular polygon) and i can perform
some action like translating the polygon and rotating it according to degree input by user
when the rotation occurs a rotated polygon is drawn on the panel very quickly
i have used link list to implement the polygon in another call with i call in my drawingPanel
the problem is that i have to show the animation of how the polygon has been rotated
but it doesnt display the animation

in my drawingPanel i have put these codes:

and at the end i have inserted this
 
Les Morgan
Rancher
Posts: 717
17
C++ Java MySQL Database Netbeans IDE Oracle Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
if you are sleeping for only 1 millisecond, you are taxing your animation loop too much.

Make a reasonable animation loop with say 40 fps... which would be 25 ms delay. I think you are just not giving the effect time to propagate properly into your animation.

I prefer using a javax.swing.Timer object to work with the Swing GUI that I make for the display, it works very nicely and does not have the problem of starting multiple thread for different times.

Here is a very simple example from a previous post: moving oval
 
Vani Sweety
Ranch Hand
Posts: 87
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
well even if i increase the sleep by 100ms it remains same
for example if i want to do a rotation about 180 degree
it should animate tp 90 degree first then coming to 180 degree
 
Les Morgan
Rancher
Posts: 717
17
C++ Java MySQL Database Netbeans IDE Oracle Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Are you doing sprite animation? If so, you are not allowing your sequence to be processed properly.
Vani Sweety wrote:well even if i increase the sleep by 100ms it remains same
for example if i want to do a rotation about 180 degree
it should animate tp 90 degree first then coming to 180 degree
 
Les Morgan
Rancher
Posts: 717
17
C++ Java MySQL Database Netbeans IDE Oracle Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Vani Sweety wrote:
... a rotated polygon is drawn on the panel very quickly...

That little portion of your description is the most perplexing to me. Are you trying to draw between animation cycles? If your display element has not been fully rendered when you hit the animation cycle, then it will not show and will either go with a previous state, blank--which will look like a flicker or just a glitch. You have to accommodate the the animation loop, by inserting the rotation animation into the loop as part of the normal process, or stop the animation loop and do rotation--probably in a phased series to fit inside the natural progression of the animation loop.

In any case, you have two competing actions and they are not interacting well together. Without more information, and a small working code example showing your problem, it is difficult to tell you more.
 
Paul Clapham
Sheriff
Posts: 21892
36
Eclipse IDE Firefox Browser MySQL Database
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You can't write an animation loop that way in a Swing application. Running a never-ending loop on the EDT thread simply delays the screen updating forever. You should use a Swing Timer if you want to do something on a regular schedule -- which is what your posted code does.

Please read one or more tutorials about Swing Timers before you post back with code with a Swing Timer which doesn't work correctly, as it seems to be hard work to get from the standard beginner idea to the proper way to do things. In particular your code which uses Swing Timers should not contain never-ending loops and it should not call Thread.sleep(). If I sound grouchy it's not your fault, it's just you are the third person today with this question and the other two had a lot of trouble letting go of their beginner idea.
 
Vani Sweety
Ranch Hand
Posts: 87
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
this is my method rotate:



and this is my matrix class


in my mian DrawingPanel
i have call the method rotate to perform rotation
and i have use a linklist to draw the polygon
How can i add the rotation in a loop for animation
 
Les Morgan
Rancher
Posts: 717
17
C++ Java MySQL Database Netbeans IDE Oracle Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Vani,
Here is my best answer in short: don't.

Now, if you haven't just freaked out and want the long answer, then read on:

Let the object do the work. In a game you have a basic animation loop, there are two ways to do that in Java and they are mutually exclusive: 1--you take control of the video hardware and do everything manually (complex and not very forgiving) 2--do an animation loop in Swing and let the language do what it does best and you do the creativity (very nice and forgiving)

I've done method 1 a long time ago, it used to be the recommended way to do animation, but back about Java 5 I found Java was able to handle method 2 a lot better than it did back in Java 2. I've gone with that method ever since. An animation loop is very simple, you get a javax.swing.Timer object and tell it to fire about ever 25 milliseconds for a 40fps animation loop, or do the Math and figure your own loop delay. Your animation entry point then is your ActionListener--actionPerformed along with your ActionEvent. And there you go, simple animation loop.

BTW: listen to what Paul Clapham has to say, when you pause that Event Dispatch Thread, nothing is good.

Now you say, it's all going blah blah blah... but focus up because the next piece is the real kick in the head.

Let your objects render themselves onto the graphics context of your screen according to the triggering of the ActionListener. where you basically call repaint, Object Oriented Programming (OOP) is the scheme whereby you let each object do a task and let it do it well--you make little tools and add them all into a project. So your objects to display should be "smart enough" to render themselves onto the graphics context of the display. So what does that mean? Well, in your animation loop, in your paintComponent method, you put a hook that will look something like this:

There you have it, the animation loop connected to your objects.

Now what do your objects have to do with things--Oh, now comes the meat of all this hullabaloo:

Now you make each of your object animate in sequence--no pausing anything, no calling repaint, nothing but calculating it's position and shape and orientation, then rendering that to the graphics context that was passed in, g, now that will mean you may have to have some statefull portions of some objects, so at each move, maybe it rotates a certain amount of the total rotation according to angular velocity of the spin... oh, physics and some dynamics in there. That means, you have to plan movement, choreograph how each object is supposed to interact in real time segments, and then program that into your object. The affect is quit dazzling to see when done right, but you have to understand OOP, and time segment animation techniques. Otherwise you go back to that old hardware control way and try to be god of the system--in a system that is made to run under it's own control.

BTW: using the animation loop in Swing, I have had up to 20,000 objects being controlled at one time. Yes, there was degradation, but find some other fool that was crazy enough to put 20,000 objects on one computer screen and see them interact in real time. 1,200 object interacted in a simple manner without degradation in that same project--the 20,000 was just so I could say I did it.

So if you got this far, then congratulations, I have given you a few things to think about--and yes, I and many others will help you make it work. Ask away--but first, think about what has been said, look up the Swing animation, and play with it a little.

Have fun,
Les

Vani Sweety wrote:
in my mian DrawingPanel
i have call the method rotate to perform rotation
and i have use a linklist to draw the polygon
How can i add the rotation in a loop for animation
 
Piet Souris
Rancher
Posts: 1641
36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hmm... are we helping Vani, I wonder?

In another topic by OP, about reflecting a Polygon, I advised OP to use a Shape and that it would greatly simplify his work.
In effect, what Les is talking about. I did not get any reply to that.

However, that does no justice whatsoever to the work that Vani has done so far. Setting up a complete Matrix system is not
something for the faintharted. Now, what should we do? Tell OP to throw away all of the work done, as is suggested?
Or should we help OP doing it "all manually", i.e. creating the matrices involved and for each point of the Polygon, calculate its image, draw that polygon and fill it?

Well, my vision is to go as much as possible the way of OP, for I think that there is no better reward and encouragement than getting your original ideas into something working.
Style, OOP, functional aspects, easier ways to achieve the same results, well, I assume, like in my own case, that will come with time, increasing knowledge and increasing experience.

Many other around here are much more into style, OOP et cetera right from the start. Also fine.

So, back to my question: do we follow OP in his/her very long and complicated way (but one that will give OP quite some experience and knowledge), or do we suggest to throw all the work away, by using shapes, g.rotate(), use Timers in stead of complicates Threads, and the like?

Let's ask OP, I'd say, and, what I am curious to know: is this Matrix-system well tested?
 
Vani Sweety
Ranch Hand
Posts: 87
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
infact when after i draw my polygon
i click on a button which allow me to enter the degree i want to rotate my image
after entering lets say 180 degree i click on a point on the panel and my rotated polygon appear instantly on the panel
instead i would like to animate this rotation
that is it shows the path that the rotated polygon has been rotated
i am unable to figure a simple way how to do that


 
Piet Souris
Rancher
Posts: 1641
36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Well,

you have the old middle point Mold, and you have your new middlepoint Mnew. Calculate the distance between the two. Then, decide how many "frames" you wnt to use for the animation. Then your movement "per frame" is the quotient of the two. Next, you know by how many degrees to rotate. Then, you can calculate buy how many degrees to rotate in each frame.

That number of frames determines the speed of the animation. For each frame, calculate the appropriate matrix (or use some interpolation), and redraw the lot, whether by using a Timer or by using a dedicated thread.

The necessary calculations can be done either in the actionlistener, or in some update method, or even in a separate thread.
 
Campbell Ritchie
Marshal
Posts: 52632
119
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Piet Souris wrote:. . . you have the old middle point Mold, . . .
There is nothing like choosing good variable names, and that is nothing like a good variable name.
The necessary calculations can be done either in the actionlistener, or in some update method, or even in a separate thread.
If you use a separate thread make sure you have an object which can handle that separate thread. Look in the Java™ Tutorials.
 
Piet Souris
Rancher
Posts: 1641
36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Campbell Ritchie wrote:There is nothing like choosing good variable names, and that is nothing like a good variable name.

Hmm, I've always used 'M' to denote middle points. But are you saying that when you explain something about x and y axes, then you choose 'better' names than x and y?
 
Vani Sweety
Ranch Hand
Posts: 87
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
how do i get these Mold values and Mnew values
and how can i create a frame about the degree of rotation
 
Vani Sweety
Ranch Hand
Posts: 87
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
and how can i create these different frames
 
Les Morgan
Rancher
Posts: 717
17
C++ Java MySQL Database Netbeans IDE Oracle Tomcat Server
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
You have to choose how many movements you want your rotation to take--if you choose to have it take one move, then you have what you have now. So let's say you want to have the rotation happen over 5 moves and you want to rotate 15 degrees, that means you rotate 3 degrees on each frame of your animation--angular velocity is 3 degrees per cycle. So over the next 5 moves you need to rotate 3 degrees... That means you have to render an image to the screen or to a separate image and draw it to the screen once an animation cycle for 5 cycles--in this specific example.

Vani Sweety wrote:and how can i create these different frames
 
Piet Souris
Rancher
Posts: 1641
36
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Exactly, and there is one other aspect to take into account as well, namely: how long should the animation take?

For instance: let's say an object moves from the left of the screen to the right.
Now, the two questions to answer are:

1) what 'framerate' to use (i.e. how many repaints per second do I want to do)?
2) how long should the animation take place?

Let's say that the screen is 1200 pixels wide, that we want to use 50 frames per second and that we want to do the whole animation in 10 seconds.
That means that we have 500 frames to show, in which we have to travel 1200 pixels, or per frame 1200 / 500 = 2,4 pixels.

So, assume we have the variable: double 'deltaX' (equal to 2.4).
Then, at frame number N, we know that the x-coordinate is equal to 'originalX' + N * delta_X (which we round to the nearest integer).

As Les showed, this way you determine also a 'deltaRotation', and if the oribit isn't exactly horizontal, then we also have a deltaY.

The currentX and currentY position are probably those of the centre of your polygon. At each frame, you have to calculate the position of all
your Polygon-points taking this centre and the rotation into account. That means calculating the matrix at each frame, but from what you
wrote so far, I assume you got this part already working.

Succes!
 
Vani Sweety
Ranch Hand
Posts: 87
1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
yes
but the problem is how to i get these frames that for example if i have to rotate 180 degree
suppose i must be having a frame for 45 degree, 90 degree 13 degree n finally 180 degree
so how can i create these 3 additional frames
and it what class
 
Les Morgan
Rancher
Posts: 717
17
C++ Java MySQL Database Netbeans IDE Oracle Tomcat Server
  • Likes 1
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Now you have an animation that is going to extend over several animation cycles, so you have to add a statefull component to you project. This usually consists of a Boolean flag that indicates you are in an animation/rotation, you need a segment divisor (how many steps to you want to take--this is where you're angular velocity comes in--more steps slower, less steps faster), you also need a frame counter to keep track of what step you are on in your animation.

when you have a multi frame animation, rotation , then set your Boolean flag that you are in it--each cycle decrement your frame counter (start the same as the segment divisor) and calculate your frame normally--how you always have-- then when you get to 0 reset your Boolean flag so you don't do the multi step animation, rotation, any more.

Vani Sweety wrote:yes
but the problem is how to i get these frames that for example if i have to rotate 180 degree
suppose i must be having a frame for 45 degree, 90 degree 13 degree n finally 180 degree
so how can i create these 3 additional frames
and it what class
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!