Exercise 1: Applying Transforms

The program Transforms2D.java draws an image, shuttle.jpg, in a display panel. The panel is 600-by-600 pixels, and the image is 400-by-300. The drawing is done in a paintComponent() method near the beginning of the file. The method already applies the 2D transformation g2.translate(300,300), which effectively moves (0,0) to the middle of the panel, so that the coordinate system on the panel extends from -300 on the left to 300 on the right and from -300 at the top to 300 at the bottom. The image is drawn with its top-left corner at (-200,-150), which puts the center of the image at (0,0).

The page also contains a pop-up menu labeled "Transform:". The options in the menu are "None" and the numbers 1 through 9. In the program as given, the pop-up menu has no effect. Your job is to apply different transforms to the image, depending on the setting of the pop-up menu. You can do this by adding code to the paintComponent() method. (The location where you have to worked is marked with a TODO.) You don't have to do anything outside of this method. The method already has a variable, whichSelection, which contains a value from 0 to 9 giving the index of the selected item in the pop-up menu. When whichSelection is 0, the page should display the untransformed image. For the other possible values, you have to apply some transforms. You will need a different transform -- and in some cases, a combination of transforms -- for each of the values 1 through 9.

Here are the nine images that should be shown for the nine setting of the pop-up menu. The images in your program should be exactly the same as these:

1.	2.	3.
4.	5.	6.
7.	8.	9.

The only methods that you will need are g2.translate(dx,dy), g2.scale(sx,sy), g2.rotate(angle), and g2.rotate(angle,x,y). Remember that the angle of rotation is measured in radians, not degrees. So, for example, Math.PI is 180 degrees, Math.PI/2 is 90 degrees, Math.PI/4 is 45 degrees, and Math.PI/6 is 30 degrees.

Exercise 2: Drawing With Transforms

For the second exercise of the lab, you should draw the following picture by applying transformations to just three basic shapes:

Start with the program TransformedShapes.java. The point where you have to work is in the paintComponent() method and is marked with a TODO.

This program defines three methods that draw basic shapes: circle(), square(), and triangle(). For example, square() draws a 100-by-100 square centered at the point (0,0). Of course, the drawing is subject to any transforms that have been applied to the drawing context, so that the position, scale, and orientation of the figure that appears on the screen can be changed by those transforms. The picture that you draw must be made up entirely of transformed versions of the three basic shapes produced by calling circle(), square(), and triangle(). You can use g2.setColor() to change the color, but do not use drawing commands such as g.fillRect().

The full picture is made up of four smaller pictures. Work on each smaller picture separately. It is easiest to build the picture with its center at (0,0), at whatever size seems natural. Then scale the picture and translate it to the position where you want it in the final image. Remember that transforms are specified before the drawing to which they apply. For example, if you want to double the size of a drawing and move it to (150,150), then you would say

g2.translate(150,150);
g2.scale(2,2);

before the code that does the drawing. Note that the translation is specified before the scaling, but the drawing is first scaled then translated. For a full example, the following code draws a big, black "X" with center at (150,150). You might copy it into the program to see what it does.

// The next two line scale the X to be twice the original size
// and then moves the center of the X from (0,0) to (150,150).

g2.translate(150,150);
g2.scale(2,2);

// The next three lines draw a tilted rectangle.

g2.rotate(Math.PI/4);
g2.scale(1,0.25);
square();

// The next two lines undo the previous scale and rotation.

g2.scale(1,4);
g2.rotate(-Math.PI/4);

// The next three lines draw a rectangle tilted in the opposite direction.

g2.rotate(-Math.PI/4);
g2.scale(1,0.25);
square();