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 Light Table 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 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 on the Light Table, thumbnails that have bothtags 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.

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.

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.

You'll have to extend your interface slightly to provide mechanisms for adding, removing, and moving the magnets:

You'll also have 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.

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, if you have magnets moving photos all over the place, it may not make sense to also use the Light Table for reordering photos at the same time. So, for this assignment, you're allowed to follow any of the strategies below for how to make sure the animation doesn't conflict with the basic Light Table functionality:

The basic gist of the above is that the original Light Table functionality has to keep working, but that you can add modes or separate windows if you choose, to make it easier to keep the basic sorting functionality from conflicting with the magnet functionality.

Implementing the Animation

This section provides some implementation tips for getting things working. Please also check the slides for tips on Swing threading, etc.

The basic UI controls for adding, moving, and removing magnets should hopefully be straightforward. Magnets should appear graphically on the Light Table window, although they can be simple labels or the like. If your Light Table/thumbnail code has assumptions that only thumbnails can be stored in the Light Table, you may have to tweak things a bit to remove this assumption, to allow for the magnets. The code to move the magnets should be very similar to the code you use to drag thumbnails in the Light Table.

Doing the animation itself will be slightly trickier, but hopefully not a lot of work. The way I'd suggest doing it is the following:

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.

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.


This is an INDIVIDUAL assignment; while you may ask others for help on Java or Swing details, please write the code on your own. While you can use any development environment you choose, you are not allowed to use "GUI builder" type tools (like JBuilder or Eclipse GUI Builder).

To turn in the assignment, please follow the same process as last time:

0. Make sure your program is runnable from the command line using the command "j ava PhotoAlbum". Use exactly this name (with no package) to make things easier on me and the TAs.

1. Create a new directory using your last name as the name of the directory.

2. Compile your application and place both the sources and classfiles into this directory (they can be at the top-level or in a subdirectory, whatever you want).

3. Put a README.txt file (described below) into the top level of the directory. This file should contain your name and email address, the version of Java you used (1.5.x or 1.6.x, please) as well as any special info I might need in order to run your code (command line arguments, etc.)

4. ZIP this directory and submit it via T-Square (instructions are here).

If you do any extra credit work, be sure to let us know about it in the README file so that we don't miss it!!

Please take care to remove any platform dependencies, such as hardcoded Windows path names or dependence on a particular look-and-feel that may not exist on all platforms. Also, if you use any images in your application, please make sure that you include these in your ZIP file and that your code will refer to them and load them properly when from from inside the directory that's created when I unZIP your code.

Grading for this assignment, and future assignments, will roughly follow this breakdown:

Please let the TA or me know if you have any questions.