CS 101 (Spring 1999)
Lab 2: Craf-ta-Graf Design

Lab Assigned Design Due
(Mondays 2 PM)
Lab Due
(Fridays 2 PM)
22 Jan 25 Jan 29 Jan


Programs that manipulate or process data are more user-friendly when the data can be visualized. In this lab, you design and implement a segment display---a graphics tool that can show a sequence of segments. When shown together, the segments comprise a picture---for example, the growth of an NASDAQ stock, the components of an airplane engine, or a freehand drawing.

Such a display could be driven directly by keypresses or mouse actions, but then the display's use would be restricted to those input devices. Instead, we abstract the display's input so that it can be driven by a variety of sources, including a mouse-click pad that you implement in this lab. In later labs, the display might be driven by other objects that you create.

As will be the case in most of our labs, you will build upon code that is provided to you. Ideally, the API (Application Programming Interface) tells you all you need to know to use this code. In this lab, the segment display and the mouse-click pad are each based on (separate instances of) the CS101.canvas object, whose relevant features are described in this handout.

The system you design and build will contain at least the following kinds of objects (classes):

Objects of this type are constructed to hold a pair of ints. The object represents relative horizontal and vertical displacement. In Physics, direction vectors appear in free-body diagrams to show components of a two-dimensional force.
An object of this type displays a canvas for the mouse to click in. For our purposes, a mouse gesture consists of two clicks. The MousePad should have a method that return the relative displacement between the two clicks. This displacement is ideally encoded as a DirectionVector.
An object of this type can display segments. The object should contain a method that accepts a DirectionVector. The specified vector is then drawn, starting at the location of the previous gesture.

Like its toy analog, the display for Craf-ta-Graf must contain code to keep the drawing from going off the screen.


So far, three objects have surfaced in our design. Even in this simple system, there are design questions whose answers significantly affect the implementation at-hand as well as the possibility of reuse of the classes you develop. For example, how do the MousePad and SegmentDisplay objects communicate? With respect to object containment, there are three possibilities:
  1. The MousePad contains the SegmentDisplay. Thus, the MousePad is in control. When a click is registered, the MousePad object synthesizes a DirectionVector, passing it to the appropriate method in the SegmentDisplay to update the display.
  2. The SegmentDisplay contains the MousePad. In this design, the display is in control, calling the MousePad for the next click. A DirectionVector is synthesized, and the display is updated.
  3. Neither contains the other. Instead, the interaction between the MousePad and the SegmentDisplay is managed by a third party.

Before starting:

What to turn in:

  1. Explain how the MousePad and SegmentDisplay will interact. Think about the three possibilities described above, and pick the one that promotes the cleanest design and greatest possibility of code reuse.
  2. Provide a description of the extra classes present in your design. As you design the API, you may discover the need for new types.
  3. Choose names and type signatures (that is, the API) for the methods in the classes of your design. Pay attention to
  4. Be sure to submit your design with the design cover sheet properly filled out, including your primary TA's name.
  5. Be sure to submit the design by 2 PM on the Design Due Date at the top of this handout.

CS101 Canvas ( API)

You can construct graphics objects as in the following examples:

Keeping in mind that coordinate (0,0) is at the upper left of the canvas, read the testCanvas and predict what the picture will look like. Then execute the program to confirm your ideas. If things look different than you expected, try to find out why. Remember to ask for help as needed.

Note that all coordinates are in pixels, (a word whose origin is "picture elements"). Think of a pixel as the smallest possible dot on the screen. A typical television picture is 640 pixels wide and 480 pixels in height.

DirectionVector API

As an example of an API, and to assist you in developing your solution in Lab, the API for the DirectionVector class is as follows.
Public Accessors
Other Public Methods
Public Fields
Private Methods
Private Fields
Exceptional behavior

Last modified 15:51:39 CST 21 January 1999 by Ron K. Cytron