AC21: Coordinate Transforms & Clipping

The purpose of this activity is to learn more about coordinate transformations and other output effects. You will need to download http://courses.csail.mit.edu/6.831/handouts/ac21/ac21.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 TiltingGraphics.java. You should see the window on the right, but without the words "graphics". Dig into the source code of TiltingGraphics.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 TiltingGraphics 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. Reflecting a Textbox

Run Reflections.java. You should see a textbox with a blue rectangle under it. Your goal for this exercise will be to display a reflection of the textbox where the blue rectangle is.

First, paint the textbox in place of the blue rectangle. Run your code to make sure it works. When you type in the textbox, do both images update? Why?

Next, paint a dimming gradient over the textbox. Recall that we did this last lecture, in case you need a reminder how to do it. Run your code to make sure it works.

Finally, apply coordinate transformations to display it as a reflection. Hint: you don't want to rotate; you want to scale with a negative value.

3. Panning

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

Find the method panBy of PanningAndZooming 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.

4. 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 PanningAndZooming 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.