1. Introduction

	title page & other versions

1. Introduction

An affine transform changes the relationship between the coordinate system a program uses to draw and the coordinate system used to display. For example: the top image at left represents what a piece of code drew: a 24 point M at the location 0,0. (The green lines show you the axes and tic marks every 10 units.) The bottom image shows what that drawing looks like when drawn into Graphics2D after a 30 degree rotation has been applied.

The code to draw the bottom 'M' would look something like:

Graphics2D g = (Graphics2D)graphics;
...
g.rotate(30.0 * Math.PI / 180.0);
g.setFont(new Font("Serif", Font.BOLD, 24));
g.drawString("M", 0, 0);

Notice how the drawing operations (setFont() and drawString()) are written as if the transformation wasn't present: They just selected an ordinary font, and drew an ordinary character at 0,0. It is the transformation created by the rotate() method that causes the output on the display to be rotated.

There are several other common operations on coordinate systems:

Translate	Scale	Shear

`g.translate(25.0, 0.0);`	`g.scale(2.0, 2.0);`	`g.shear(0.0, 0.35);`

In each case, the drawing commands are the same. It is the affine transform - either a rotate, a translation, a scale, or a shear - that causes the output on the display to be pivoted, slid over, enlarged, or skewed.

These basic transform types can be combined in dizzying ways to produce transforms that produce truly weird results. For example, the image at right was drawn with the following code:

Graphics2D g = (Graphics2D)graphics;

g.scale(2.5, -1.5);
g.translate(-10.0, 0.0);
g.shear(0.5, 0.15);
g.rotate(10.0 * Math.PI / 180.0);

g.setFont(new Font("Serif", Font.BOLD, 24));
g.drawString("M", 0, 0);

Click on the image to see an animation of the transforms being combined. This animation is available on all the small applets in these pages.

Affine Transform Lesson

1. Introduction
2. Ordering
3. Ordering, Part II
4. Try It
5. Graphics2D
6. AffineTransform
7. Wiggly Text
8. Code Examples
9. Links & Credits

[ Next ]