Question

I’m looking for a way to combine affine transforms in such a way so that the effect is equivalent to using each transform to manipulate a shape in succession. The problem is that if I simply concatenate the transforms, then each successive transform’s effect is interpreted in the existing transform’s co-ordinate space.

For example, consider a square around the origin (-50,-50, 100,100). I want to rotate it, and then translate it down 100px. If I take a transform and rotate and then translate, the translation gets interpreted in the rotated coordinates. Instead, if I transform the shape itself to rotate it, and then transform that shape again to translate it, both translations are interpreted in the “normal” un-translated plane, and it gives me what I want.

The problem is that for what I’m doing many transforms may take place, each of which needs to be interpreted in the normal coordinate plane, but I don’t want to store a stack of transforms, nor can I simply keep manipulating a shape, because I need to at any time be able to create the final transformed shape from the original starting shape.

I’m aware that for this simple example if I did the translate before the rotate I’d get the same result, but that’s missing the point. I’m dealing with an arbitrary set of successive scale, translate, and rotate transforms, so simply putting them in a certain order doesn’t cut it.

I have an inkling that there should be a way to concatenate transforms in such a way that you modify the new transform before you concatenate it, correcting for the existing transform so that the effect is that the new transform appears to have been applied as if it were referencing the un-transformed coordinate plane. For example, if you translate by (70.7, 70.7) in the above example instead of (0,100), the result becomes equivalent. I just can’t seem to figure out what the math is to figure out in general how to alter the new transform so it works out correctly.

Thanks for reading – hope this made sense. Heres the source of the example that created the screenshot:

public class TransformExample extends JPanel {

@Override
protected void paintComponent(Graphics _g) {
    super.paintComponent(_g);
    Graphics2D g = (Graphics2D) _g;
    g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

    g.translate(150, 100); // translate so we can see method 1 clearly
    paintConcatenate(g);
    g.translate(200, 0); // translate again so we can see method 2 to the right of method 1
    paintSuccessive(g);
}

private void paintConcatenate(Graphics2D g) {
    AffineTransform tx = new AffineTransform();
    Shape shape = new Rectangle(-50, -50, 100, 100);

    // Draw the 3 steps, altering the transform each time
    draw(g, shape, tx, Color.GRAY);
    tx.rotate(Math.PI / 4);
    draw(g, shape, tx, Color.GREEN);
    tx.translate(70.7, 70.7);
    draw(g, shape, tx, Color.PINK);
}

private void paintSuccessive(Graphics2D g) {
    Shape shape = new Rectangle(-50, -50, 100, 100);

    // Draw the 3 steps, altering the shape each time with a new transform
    draw(g, shape, null, Color.GRAY);
    shape = AffineTransform.getRotateInstance(Math.PI / 4).createTransformedShape(shape);
    draw(g, shape, null, Color.GREEN);
    shape = AffineTransform.getTranslateInstance(0, 100).createTransformedShape(shape);
    draw(g, shape, null, Color.PINK);
}

private void draw(Graphics2D g, Shape shape, AffineTransform tx, Color color) {
    if (tx != null) {
        shape = tx.createTransformedShape(shape);
    }
    g.setColor(color);
    g.fill(shape);
}

public static void main(String[] args) {
    JFrame f = new JFrame("Transform Example");
    f.setSize(500, 350);
    f.setContentPane(new TransformExample());
    f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    f.setVisible(true);
}

}

(I’m working with Java2D, although I don’t think the language or 2d library is all that pertinent here.)

Answer 1

I suggest you to keep track of some absolute values and then do less transformations as you can.

For example, store the translation matrix and the rotation angle around the origin.

int translate[2];
int rotate;

Now, suppose that you want to rotate around its center and then translate the object somewhere, and then rotate it again under its center.
Because with affine transformations, rotation matrix aren’t commutative, so if you apply a rotation,translation, rotation you’ll get an wrong result.

But you can simply sum the rotation angle of the first and third rotation, and apply a single rotation and then the translation.

Hope to be clear.