color fade animation for grid cells in swing Pin

Question

I'm doing a path-finding project as part of my 4th year software engineering degree. We're suppose to give visual representation to a bunch of multi-agent pathfinding algorithm. The simplest one is A* adapted for multiagents.

Anyway our environment is a grid map where every cell can be either blocked or used as part of an agent's path. What I want to do is use animation to give a good representation of the final movement of the agent, but animating color change in my grid. I.E paint every step in the path for a second or so with some color to show how the agent moves.

And the other thing I want to do is to represent the way the algorithm works by painting the changes in the open list and closed list of the A* algorithm while its doing its calculation.

I'm using an adapted version of the observer design pattern to send events from my algorithm layer to my controller and GUI layer. What I want to do in the GUI layer is every time a tile is added to the open list, I want to have that cell painted in some color and then have it fade away according to a predefined timer or maybe later add a slider to control this timer.

I looked at the code here. It seems pretty simple, the problem is that every tile animation has to be independent of the others to allow the algorithm and everything to keep running and different animations to start.

So what's the best way to achieve the results I'm looking for? Should I just open a different thread for each animation or have a pre-made thread for each cell? Would that be an overkill for the application, since there can be up to 1000 cells and therefore close to 1000 threads performing animation.

Another issue I think I might encounter is the fact that it might happen that a cell will start its color fading animation and then will have to restart and I don't want the two animations to go at the same time (only one thread performing animation for the same cell at the same time).

I hope I was clear enough with what I'm trying to achieve, if someone has any ideas or thought it could really help me with my project.

Answer 1

You can find Trident animation library useful. More information at http://kenai.com/projects/trident/pages/Home

Answer 2

I would consider a scenario with a single animation thread only. You might e.g. try the following strategy:

• standard event thread for swing events
• one worker thread for your logic
• only one additional for all animations

This third thread manages all animation within your gui. Therefore it maintains a list of animation actions to perform together with their timestamp. Such an action can be e.g. "set color of cell [1,2] to CF0000 @ 17:01:00" in an approriate data structure. This list of actions is then filled by the worker thread with the animation actions (e.g. you may add several actions at once for a fading cell - 1) set to 100% @ now; 2) set to 75% @ now+10s; 3) set to 50% @ now+20s ...). Make sure that this list is properly synchronized since it will be accessed from both threads.

If you keep this list sorted by timestamp it is quite easy to determine the which actions this thread has to do at any time. This thread has then a quite simple loop, e.g. something like

while(true) {
    AnimationAction action = list.get(0);
    if(action!=null && action.timestamp <= now()) {
            action.perform(); // <= be sure that paint events occur in the edt
        list.remove(0);
        continue;
    }
    sleep(...);
}

Note that you can determine the time to sleep from the timestamp of the next action but consider that a new animation event arriving might have to interrupt this. Otherwise you can also sleep for some short amount of time.

Regarding your second question this thread might remove any actions from this list on demand for a special cell if a new action arrives. Therefore you might also maintain a secondary data structure in order to do this efficiently.

Answer 3

I'd use javax.swing.Timer and AlphaComposite, as demonstrated here.