HOMEWORK 5: Animation in the Interface

This is an INDIVIDUAL assignment.


In this assignment you'll learn how to do animation in Swing-based GUIs, by adding some animated sorting and searching features to the Photo Album application.

The assignment is to augment the Browser mode view of your Light Table component to add "magnets" that attract photos with certain tags on them. Different magnets attract different tags, so by placing magnets in the Light Table you can "pull out" photos of interest. Thumbnails should smoothly move toward the magnets that attract them.

The learning goals for this assignment are:


In this homework we'll add some basic animation functions to the Browser mode view of the Light Table, to provide the user with a novel way of finding photos that have certain tags. The basic idea is that we'll introduce the concept of "magnets" to the interface. Magnets are simply on-screen objects that are set to attract thumbnails with certain tags.

For example, if you drop a "Vacation" magnet on the Light Table, it will pull to it all photo thumbnails that have that tag. If you then drop a "Family" magnet elsewhere on the Light Table, thumbnails that have both tags will move halfway between the magnets, while thumbnails that have only one will move to that magnet. You should be able to drag magnets around the screen to have the thumbnails follow appropriately.

This behavior only has to work in the Browser-type view (two dimensional matrix of thumbnails), not in the Photo or Split view modes.

IMPORTANT NOTE: My intention with this assignment is just to have people focus on doing animation in Swing, so I don't want to break the existing behavior of folks' Light Tables. Obviously, things may start to get complicated if you try to integrate the magnet-related functionality into your existing Browser view functionality, especially since the Layout Manager you're likely using in Browser view may conflict with the animation (since Layout Managers will want to "control" the position of the thumbnails).

So, for this assignment, you're allowed to separate the magnet and animation functionality from your existing Browser view. Any of the strategies below can be followed to make sure your animation doesn't conflict with the basic Light Table functionality:

The basic gist of the above is that the original LightTable Browser functionality has to keep working, but that you can add modes or separate windows if you choose, to make it easier to keep the existing browser functionality from conflicting with the magnet functionality. Let us know if there's another strategy that you think may work well given your implementation.

Implementing the Magnets

You'll need to create some basic magnet-related controls before working on the animation itself: Once this is working, you'll need to implement the code that moves thumbnails around in response to the placement of magnets. See below for some details on how you might go about doing this.

Implementing the Animation

This section provides some implementation tips for implementing the animation. Please also check the slides for tips on Swing threading, etc.

Here's the way I'd suggest doing the animation itself:

Remember that updates to Swing components--like changing their locations--must be done on the event dispatch thread. So you'll most likely be using a javax.swing.Timer to do the updates.

A Random Aside...

As an aside, this interaction technique basically gives you a physical model for simple basic boolean searches. Placing multiple magnets near each other represents an OR operation: photos that have either of the magnets' tags are attracted to that spot. Likewise, placing magnets apart from each other lets you do AND operations: thumbnails that have both tags move to the center between the two magnets, as they're attracted equally to both.

You could easily imagine extensions to this such as NOT operations implemented as magnets that repel certain tags, or magnets that have variable attracting power.

Although our tags are simple booleans (the tag is either there or it isn't) rather than scalars (which would mean they have some value), you could do some cool things with scalar tags. For example, thumbnails that have "more" of a certain property might be attracted more strongly (and move more quickly) toward a magnet that attracts that property.

Extra Credit

As usual, there are a lot of ways to make this fancier than described.

As usual, if you do something else that's above and beyond the call of duty, let us know in your README file and we may assign some extra credit for it.


See here for instructions on how to submit your homework. These instructions will be the same for each assignment.