CSE 131 Module 5: Modular Design


Warning: We are now counting off for style, and it is possible you will fail a lab because of style problems. You have two lab rewrite coupons, but it is strongly suggested that you check over your lab and make sure it is clean, nicely formated, documented sufficiently (don't document the obvious), and has well chosen variable names.
There was no studio for this lab, but you are encouraged to work on this lab with at most one other person. If you do that:


Update your repository as usual to get the lab5 package.
If you are working as a 2-person team, be sure to do all your work in a studio repository so you can both share the code.

One of you will have to contribute code for Vector and Point to the repository.

After you download the provided files

Project: Roving Eyes

You will implement an program with the following features.
  1. Each eyeball consists of two circles drawn on the screen, the pupil (which should be filled black) and the outline (which should be a black circle that is filled white). The pupil's radius should be about 1/4 that of the outline. However, once you have everything working, feel free to change the colors and sizes.
  2. The pupil must always be entirely within its eyeball's outline.
  3. When the user presses the mouse button, the tool creates an eyeball centered at the mouse location.
  4. As the user drags the mouse, the newly created eyeball moves around with the mouse so the user can position it.
  5. When the user releases the mouse button, the newly created eyeball just stays where it is.
  6. In addition, as the mouse cursor moves around the screen, all pupils move as close as possible to the cursor, while remaining entirely within their eyeball outlines. This will create the effect of eyes "looking at" the cursor as it moves around. (The effect is best if you place the eyeballs over the eyes on a portrait image. You may want to change the sizes of the outline and pupil to match the image you are working with.)

Reacting to mouse events: Before you begin the implementation, it is important to understand that when you write a tool for NIP, you can provide methods that react to the user's mouse events. In particular, a tool can provide methods called mousePressed, mouseReleased, mouseMoved, and mouseDragged, as well as others (but these four are the most used). Note that these methods override methods in the parent Tool class. Each of these methods must be public, have a void return type, and take a single parameter, an instance of MouseEvent. For example, to react to a mouse press, you would write a method of the form

public void mousePressed(MouseEvent e) {
   // In here, you would put whatever computation needs to be performed
   // when the mouse was pressed.  The x and y coordinates of the mouse press
   // can be found by calling e.getX() and e.getY().  
Classes that are not NIP tools can also react to mouse events. Take a look at the GraphicsDemo code and see how it uses MouseMotionListener methods to react to the mouse moving on the panel. Notice that GrahpicsDemo added itself as a MouseMotionListener in its constructor.

For further details, see the NIP documentation.


  1. Open the provided file Eyeball.java for editing. Fill in your name and other information in the header comment. You need to figure out the details, but here's an overview of what you need to do.

    The Eyeball constructor should take three parameters: a GraphicsPanel and x and y integer coordinates. It should create the graphics components of the eyeball (outline and pupil), centered at the given location on the panel. The constructor should also add the eyeball as a MouseMotionListener for mouse events on the panel, as done in the GraphicsDemo constructor.

    Create a moveTo method that takes as parameters x and y coordinates. It should move the eyeball and the pupil so that they are both centered at the given location. (The Ellipse class has a setCenter method you can use.)

    Create a lookAt method to make the pupil look toward the given point. That is, it should move the pupil as close as possible to that point without letting the pupil go outside the outline of the eyeball. (See hints below.)

    In Eyeball, have the mouseMoved method call lookAt, passing as parameter values the coordinates of the mouse cursor. That way, whenever the user moves the mouse, the eyeball will look toward the mouse. When using NIP, remember that the mouse methods always take a single MouseEvent parameter. (You can see the provided GraphicsDemo.java class for an example of a mouseMoved method.)

    The toString method should return a textual description of the eyeball, including its size and center location. You may want to use this for testing purposes.

  2. You will have to modify the Lab5 file so that it instantiates EyeballTool, passing in the GraphicsPanel on which the work should be done. For an example of that, look at how GraphicsDemoTool is instantiated from its main method.
    To run this lab, you should right click Lab5, and pick Run as...Java Application.

  3. Open the EyeballTool.java file. Add the constructor that takes in a GraphicsPanel. Add a mousePressed method, so that each time the user presses the mouse button, your Eyeball constructor is called to instantiate an eyeball at the specified location. Test this by running Lab5.java and selecting the eyeball tool from the list at the left of the NIP window. Do the eyeballs look at the mouse correctly?

  4. Now modify your program so that after the user presses (but does not release) the mouse button to create an eyeball, the user can continue to hold down the mouse button and "drag" the newly created eyeball into the desired position. You'll write a mouseDragged method for this.

Implementation hints:

Submitting your work (read carefully)

Last modified 22:14:02 CST 11 November 2009 by Ron K. Cytron