Your Names:

6.831 • User Interface Design and Implementation

Massachusetts Institute of Technology
Department of Electrical Engineering and Computer Science
Fall Semester, 2006

AC11: Coordinate Transforms

The purpose of this activity is to learn more about coordinate transformations. You will need to download http://courses.csail.mit.edu/6.831/handouts/ac11/ac11-code.zip, which contains the Java code you'll be using. If you use Eclipse, you can create a project directly from the ZIP file using File / Import / Existing Projects into Workspace / Select archive file.

1. Positioning by Transformations

Run AC11a.java. You should see the window on the right, but without the words "graphics". Dig into the source code of AC11a.java and find the paintComponent method. It contains two calls to paintText. Using coordinate transforms (translate, rotate, and scale) on the g2d graphics contexts that get passed into paintText, make AC11a display the two "graphics" in approximately the places shown. The gray lines serve as scaffolding; the pixel coordinates of the lines are shown in the screenshot. Don't change paintText itself; just change the Graphics2D object you're passing into it.

2. Panning

Now run AC11b.java. Since AC11b extends AC11a, you should get the same result as the last screenshot. However, AC11b also has registered for mouse, mousewheel, and keyboard events in order to support panning and zooming. Take a look at the method paintComponent of AC11b to see how it transforms its coordinate system before asking AC11a to paint.

Find the method panBy of AC11b and complete its implementation so that you can now pan the view with the mouse. HINT: Don't think too hard; two assignment statements are enough to implement this behavior.

3. Zooming

Now we want to support zooming using either the + and - keys or the mouse wheel (scrolling forward zooms in). Zooming should be centered around the point where the mouse pointer is. That is, putting the mouse pointer at the bottom corner of the triangle and hitting + 10 times would result in the screenshot on the right.

Find the method zoomAt of AC11b and complete its implementation so that you can now zoom the view with the mouse wheel or the + and - keys. HINT: The following illustration of zooming in by a factor of 2 might be useful.

Write down the formulas for translateX, translateY, and scale here:

translateX = ____________________________________________________________

translateY = ____________________________________________________________

scale      = ____________________________________________________________