Modeling Transforms in 2D

About this demo...

The demo shows an original object as a gray shape near the center of the coordinate grid on the left. On the right, there is a list of transforms. The results of transforming the original shape are shown as colored shapes on the coordinate grid. The red shape is the result of transforming the original shape by the first transform in the list. The green shape is the result of applying the second transform to the red shape; that is, it is the result of applying the first two transforms to the original shape. The blue shape is the result of applying the first three transforms to the original shape. Note that the transforms accumulate! If you find the colors hard to follow, turn on the "Animate" option. You will see a looping animation in which the shapes are added to the picture in the order in which they are created.

One of the transforms in the list can be "selected." The selected transform has a light blue background. You can select a transform by clicking it. Use the "Move up" and "Move down" buttons to move the selected transform up or down in the list. This will change the order in which the transforms are applied, and so will change the sequence of shapes that is generated.

The tree small input panels on the bottom can be used to add transforms to the list. To add a rotation, enter the number of degrees, and click the "Add" button that is next to the input box. For translation and scale, enter two numbers, and click the corresponding "Add" button. Be careful! The coordinate grid only shows coordinates in the range -5 to 5, so it's easy to get a shape that lies outside the visible grid. The demo doesn't stop you from doing that.

You might start by moving transforms around in the original list. Make sure that you understand how the shapes are produced. Then clear the list and make up your own transform. Try comparing rotate-then-translate to translate-then-rotate. Try rotating the object about a point other than the origin. Try some negative scale factors. Try arranging eight objects in a circle around the origin. (There is a limit of eight transforms.) Try to make a shear transformation from rotations and scalings. (Hint: Start with a 45-degree rotation, followed by a non-uniform scaling.)

Note by the way that transforms are applied to the object in the order that they occur in the list. Remember that if you want to achieve the same effect in your code, you would have to specify the transforms in the opposite order, and you would have to do that before drawing the object.