[hiddenghost]

Ok I'm not that good at math, but I'm getting better.

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

[MasterOfBinary]

I'm not completely sure what you're asking, but I'll give it a go. Suppose you want to rotate by the angle theta, and translate by tx and ty. Consider this matrix, call it R:

[cos(theta)] [-sin(theta)] [0]
[sin(theta)] [cos(theta)] [0]
[0] [0] [1]

This is what we need for a 2D rotation, it will rotate counter-clockwise by theta radians. Your translation matrix looks like this (T):

[1] [0] [tx]
[0] [1] [ty]
[0] [0] [1]

Each point looks like this (P):

[x]
[y]
[1]

So when we multiply R*P, we get (I'll start omitting the theta part):

[x*cos-y*sin]
[x*sin+y*cos]
[1]

Confusing, but try something else. When we multiply T*P, we'll call this N:

[tx+x]
[ty+y]
[1]

Exactly what we want. Now say we want to rotate and then translate (you need to do it in that order - think about it). If you treat x in (N) as (x*cos-y*sin) and y as (x*sin+y*cos) then you will see that when we multiply T*N:

[tx+(x*cos-y*sin)]
[ty+(x*sin+y*cos)]
[1]

So basically x (after the rotation) + tx, and y (after the rotation) + ty. So the trick is to make sure you do the matrix math in the right order. Convince yourself that if you multiply (T*P)*R you won't get what you want.

Now, you asked about multiplying matrices, so here goes. Take R*T (remember, rotate first), we'll call this new matrix A:

[cos] [-sin] [tx*cos-ty*sin]
[sin] [cos] [tx*sin+ty*cos]
[0] [0] [1]

Look familiar (sort of?)

Maybe this was long and boring and confusing... if it is, sorry. But if you get anything else, get this: matrix math will work perfectly if you do it in the right order. Otherwise you might (as you said) change your object in ways you aren't expecting.

Oh, and you mentioned about radians relating... theta is the angle of the rotation in radians.

[hiddenghost]

MasterOfBinary, on 04 March 2012 - 04:36 PM, said:

Maybe this was long and boring and confusing... if it is, sorry. But if you get anything else, get this: matrix math will work perfectly if you do it in the right order. Otherwise you might (as you said) change your object in ways you aren't expecting.

No way was it too long and boring.
I need help understanding this.
It is confusing though.

I'll have to reread it a few times to get the idea.

By the way you should see the long and boring posts I make.
I'll take lengthy replies with heavy technical details any day.
This topic takes a lot of words to talk about. I get that.

[hiddenghost]

MasterOfBinary, on 04 March 2012 - 04:36 PM, said:

Oh, and you mentioned about radians relating... theta is the angle of the rotation in radians.

But how is theta related to a pixel?

Is it the order you were talking about?
Rotation first.
Because the rotation can preserve the dimensions if it's not first translated in the multiplication?

It's still hard to get.
Pi radians is the radians inside a circumference or in this case half the circumference.
How do the radians have meaning in relationship to what pixel dimensions there are?

The four trig functions are used to rotate the shape, but the measure of a movement is by a far smaller unit for a larger movement than with a few pixels of movement.

1 radian of rotation is a large rotation compared to 1 pixel that hardly shows any movement in a translation or scale.

Help the clueless and get a virtual chocolate chip cookie.

This post has been edited by hiddenghost: 04 March 2012 - 04:01 PM

[ButchDean]

This isn't really something that can be fully explained in text for you to comprehend - you must code it up and be familiar with the graphics pipeline in order to realize that it isn't directly related to pixels, but actually the space (world or model, for example) that is currently being referenced.

You also need to get to know vectors.

[hiddenghost]

ButchDean, on 04 March 2012 - 05:04 PM, said:

This isn't really something that can be fully explained in text for you to comprehend - you must code it up and be familiar with the graphics pipeline in order to realize that it isn't directly related to pixels, but actually the space (world or model, for example) that is currently being referenced.

space being referenced?
Do you mean what the shape is supposed to be?
Like a graphics square looks like a real square, and a graphics person looks like a person?
And the graphics world they reside in looks like the environment they would exist in?

As far as the pipeline I'm working in javascript canvas right now with really simple 2d primitives.

This makes me wonder how the heck a 3d game like half-life can be programmed to have so many movements while maintaining perspective and ratio.

ButchDean, on 04 March 2012 - 05:04 PM, said:

You also need to get to know vectors.

Ah, yes. I don't know those so well.
I know they are used a ton in physics, and I see how they would apply.

Can you give me a project to work on that would elucidate this too me?
Think of it like a school assignment.
I have a book about vectors I can read while I'm working on it.

I know it seems far fetched, but I've learned a lot of things this way.

[ButchDean]

You have a great deal of independent study ahead of you to get your head around all this. Unfortunately there is no quick way.

[hiddenghost]

MasterOfBinary, on 04 March 2012 - 04:36 PM, said:

So basically x (after the rotation) + tx, and y (after the rotation) + ty. So the trick is to make sure you do the matrix math in the right order. Convince yourself that if you multiply (T*P)*R you won't get what you want.

Oh.

If the translation is first the origin is farther away from the shape being translated.
The shape rotates around the origin and moves wildly if the translation is done first.

So If I want to translate to just show the shape has moved to what ever spot then:

• I translate the shape.
  
• Leave that there for a bit.
  
• Clear the screen(canvas in this case)
  
• Rotate then translate to the same spot again.

I just realised this would be a whole lot easier if the origin was in the center of the shape.

Javascript comes with its own primitive methods for canvas.
Maybe I would have to draw my own primitives to get them to... Oh wait.
The beginning of the corner of the square is set and then the opposite corner is set. I can set the beginning corner negative to get it around the origin.

ButchDean, on 04 March 2012 - 05:45 PM, said:

You have a great deal of independent study ahead of you to get your head around all this. Unfortunately there is no quick way.

I know.
It seems that way with most programming and for that matter any technical subject.
I'm always asking questions that are hard to answer because they take background experience with some other sub topic that's needed to work out how things relate to each other.

I'm not giving up though.

Also it helps just to ask the questions.
Even if they can't be answered completely the question gets my brain flowing.

This post has been edited by hiddenghost: 04 March 2012 - 05:08 PM

[ButchDean]

Good, keep at it!

[hiddenghost]

ButchDean, on 04 March 2012 - 06:08 PM, said:

Good, keep at it!

Thanks.

These rotations are confounding me though.

If it's:
[a][c][e]
[b][d][f]
[0][0][1]
Where a = cos, b = sin, c = sin, d = cos.

The rotation is done with tranfsorm(a, b, c, d, e, f);

This is like moving the xy of the shape around the origin, but there is also some kind of scaling going on.

[ButchDean]

That's why you need to look into vectors and normalizing them. 'Normalizing' simply means to 'make a unit vector out of a non-unit vector' and perform the relevant math around that. It keeps calculations clean and a lot less error prone.

Good luck anyway. Get cracking with your study!

[hiddenghost]

The reason I started this whole topic was because I discovered that when you draw in canvas with javascript the stock transform methods move the whole canvas so to draw duplicate objects it's just easier to have more than one canvas.

I just realised that I may not have to do that.
The move method in javascript can be used to translate a shape before its drawn. This might work because the ratio of the shape is preserved with the stock rotation.

I might be able to:

move() // place drawing position
rotate() // rotate drawing position
rotate() // subtract previous rotation
move() // move back to origin
rotate() // rotate around origin
move() // move to new spot
// continue this until there's lots of shapes

Not sure why the first rotate preserves the ratio while they others need to be at the origin.
If they aren't returned the second rotation and so on will be subject to the first translation and rotation as they move.
Maybe its the un-rotation.
Unless I got it wrong. I'll be trying it soon.

I still want to learn how to do the manual matrix rotation. I know I'll probably be wanting to use it later.

This post has been edited by hiddenghost: 04 March 2012 - 08:53 PM

[hiddenghost]

ButchDean, on 04 March 2012 - 06:25 PM, said:

That's why you need to look into vectors and normalizing them. 'Normalizing' simply means to 'make a unit vector out of a non-unit vector' and perform the relevant math around that.

Ha! I knew that's what it was I just didn't know what it was called or how to use it.

Just looked it up. I see what you mean by "less error prone".

It's so weird that graphics renderers don't just make the vectors unit vectors in the first place.
I'm sure I'll find out why as I work on this.
There's a lot I don't know.

Oh. I see. It's that we don't know what the vector's length is going to be until we make it.

This post has been edited by hiddenghost: 04 March 2012 - 05:53 PM

[hiddenghost]

ButchDean, on 04 March 2012 - 06:25 PM, said:

That's why you need to look into vectors and normalizing them. 'Normalizing' simply means to 'make a unit vector out of a non-unit vector' and perform the relevant math around that. It keeps calculations clean and a lot less error prone.

Good luck anyway. Get cracking with your study!

I see you have stated here that you are planning on making tutorials for this specific topic.
http://www.dreaminco...es-as-a-career/

Can't wait to see those.
I know it can be a lot to do because of life in general being the focus, but I have a lot of patience.

[MasterOfBinary]

Apparently I missed a lot.

Where should I start... I'm not sure which questions are answered and which aren't, but I'll try.

hiddenghost, on 04 March 2012 - 05:18 PM, said:

These rotations are confounding me though.

If it's:
[a][c][e]
[b][d][f]
[0][0][1]
Where a = cos, b = sin, c = sin, d = cos.

The rotation is done with tranfsorm(a, b, c, d, e, f);

This is like moving the xy of the shape around the origin, but there is also some kind of scaling going on.

Remember c = -sin.

It's kind of hard to explain and understand, but you will find that the rotation will not do any scaling. Your object will be the same shape as it was before.

And yes it is relative to the origin. I previously said rotate first, then translate, but like you seem to have figured out, to translate first (say, by 5) would cause it to rotate by a point that is 5 units away.