So if there's a 2d matrix:

[a][c][e]

[b][d][f]

[0][0][1]

With assignment to a method.

transformation(a, b, c, d, e, f);

Now we have two types of transform:

1. Translation: transformation(1, 0 , 0, 1, 150, 10);

2. Rotation: transformation(0.4, 0.9, -0.9, 0.4, 0, 0);

What will keep the rotation from changing the ratio and size of a square transformed like this?

I have not done much matrix multiplication so be easy on me.

If A is the translation and B is the rotation:

A*B = C

Where C is the product of both full transformations.

The math is:

[][][]

[][][]

[][][]

Well that's where I ended up at.

I know columns are multiplied by rows. I'm just getting a huge brain melt from thinking about it.

As you probably guessed the main problem isn't how to keep the ratio and scale while doing the transform, but I have an intuition that the matrix multiplication will help solve that.

Though I don't know how radians relate to pixels as units in a transform.

I think that's one of my biggest issues.

I suppose it's the unit circle somehow.

Can't... think... brain... melting.

By the way I'm doing all this in javascript canvas.

I figure it's a general enough math topic so it goes in game development.

This post has been edited by **hiddenghost**: 03 March 2012 - 09:54 PM