Back to 111 Main Page

Mobius strip

Assignment 10


Use wheels to make a simple application that displays a picture composed of multiple shapes. This picture will then move to wherever the user clicks within the frame.


An AnimationFrame (feel free to rename this) will display your picture in a Frame. It will use a Background to collect clicks from the user.

A Background is simply a kind of Rectangle that does something when it is clicked. (It does this by overriding Rectangle's mouseClicked method.) Specifically, it tells the AnimationFrame to move the picture. A Background is an integral part of an AnimationFrame and could be allowed access to AnimationFrame's details. This makes it an excellent candidate for an inner class.

Use the latest version of wheels.

It proved easiest to describe the code you need as a class outline:

public class AnimationFrame {

  //instance variables (feel free to rename); should be private or protected
  Frame window;   //provides the pop-up window
  Background bg;  // the Background class is shown below
  RectangularShape[] pictureParts;  //array to contain picture's component shapes
  int pictureX;   //the x position of the picture (upper left corner)
  int pictureY;   //the y position of the picture

  public AnimationFrame() {
    //initialize all instance variables
    //Create all the shapes needed to form your picture, as positioned at (0,0)
    //(Your picture should have at least 5 shapes,
    //  and at least 2 different kinds of shape.)

   * Moves this AnimationFrame's picture to the given location (x, y).
  public void movePicture(int x, int y) {
    //calculate the difference between the picture's current (x, y)
    // and the target location.
    //loop through all the shapes in the picture.  For each one:
    //  add the difference in x to its current x position
    //  and add the difference in y to its current y position
    //finally, update the picture's current position to the given x, y

  public static void main(String[] args) {
    //creates an instance of AnimationFrame for a user to play with
    AnimationFrame popup = new AnimationFrame();

   * Collects clicks from the user, passing the location to
   * its containing AnimationFrame so the picture can be moved.
  protected class Background extends Rectangle {

    public Background() {
      //draws itself so as to take up the whole contents of the Frame
      //(Hint: Frame._dp.getWidth(), Frame._dp.getHeight())

    //overrides this method from Rectangle
    public void mouseClicked(MouseEvent me) {
      //passes the location of the mouse click to AnimationFrame
      movePicture(me.getX(), me.getY());



How to write your code

All these classes calling each other can get confusing. I'd write this program in the following order:

  1. AnimationFrame's instance variables
  2. AnimationFrame's constructor (part): initialize the Frame
  3. AnimationFrame's main method, which simply creates an instance of AnimationFrame [Output: you'll get an empty pop-up window.]
  4. Background class and its constructor.
  5. AnimationFrame's constructor (part): initialize the Background. [Output: you'll get a pop-up window with the background in it.]
  6. Background's mouseClicked method (test): at first, just print out x and y. [Output: you'll get output in the console of the location you click within the frame.]
  7. AnimationFrame's constructor (finish): finally draw your picture. [Output: your picture shows up in the upper-left corner of the Frame.]
  8. Background's mouseClicked method (finish): pass the click's (x, y) to AnimationFrame's movePicture method.
  9. AnimationFrame's movePicture method: move all the parts of your pictures to the new (x, y). [Output: a picture that moves to wherever the user clicks.]

What to Submit

Attach your file to an email.


Where's the sample code from lab?

Also, though less illustrative, there's a running version of the game:

What do I import to get the MouseEvent to work?
import java.awt.event.MouseEvent;
I have no idea how to start the "Move Picture" method. Any hints?
public void movePicture(int x, int y) { ... }

The x and y parameters above specify the location you need to move the picture to. (It's usually the point the user just clicked.) But each part of the picture needs to be moved a different amount, because if you moved all the parts to point (x,y), they would overlap and you'd lose your picture's layout.

So, if the top-left of your whole picture is at (pictureX, pictureY), and you want to move that picture to (x, y), then you need to move each part of the picture the same distance. We can call this distance (changeX, changeY)--that is, how much to change the X position and how much to change the Y position. changeX is equal to (x - pictureX); similarly for Y.

Once you've calculated changeX and changeY, you can loop over each shape in your picture, find it's current x and y, add changeX and changeY to these, and set the shape to its new location. This will move your whole picture to the new location by moving each part of the picture the same distance.

Once you're done, you need to end your method by setting pictureX and pictureY to the new location of the picture so that the math will be correct for the next click.

How do I get a picture part's current x and y?
With the getXLocation method, like this:
  int currentX = pictureParts[i].getXLocation();
Similarly for y.


Out of 10 points:

1 - Submission
Follows required submission policies.
1 - Coding standards
4 - Picture
Contains at least 5 shapes, and uses at least 2 different kinds of shapes (such as Ellipse and Rectangle).
4 - Picture moves to where the user clicks in the Frame
A picture may be positioned in terms of its upper-left corner.

~ztomasze Index : TA Details: ICS111: Assignment 10
Last Edited: 19 Nov 2007
©2007 by Z. Tomaszewski.