Jump to content
  • Advertisement
Sign in to follow this  
xstreme2000

Matrix rotation problem in 2d

This topic is 2250 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I'm sure this is something really stupid but I'm drawing a blank on it. I'm just playing about with some basic 2d transformations in javascript. Translations and scaling are working perfectly but rotation has gone a bit weird. I'm sure many of you will probably be able to tell what's wrong just by seeing the rotation movement so I have uploaded a demo to here:

http://x2k.co.uk/canvastest/2d.html

All the code is obviously visible via view src but here are the relevant bits:

Matrix.init = function()
{
this.data = [ [1, 0, 0],
[0, 1, 0],
[0, 0, 1] ];
}


Matrix.setRotate = function(r)
{
this.init();
this.data[0][0] = Math.cos(r);
this.data[0][1] = Math.sin(r);
this.data[1][0] = -Math.sin(r);
this.data[1][1] = Math.cos(r);
return this;
}


Vector.transform = function(matrix)
{
this.x = (this.x * matrix.data[0][0] + this.y * matrix.data[1][0] + matrix.data[2][0]);
this.y = (this.x * matrix.data[0][1] + this.y * matrix.data[1][1] + matrix.data[2][1]);

return this;
}


Like I said I'm sure it's something really simple but I've been trying to work it out and failing so I'd very much appreciate it if one of you guys could point me in the right direction.

Many thanks!!!

Share this post


Link to post
Share on other sites
Advertisement
I cant see anything really wrong with the math so Im guessing its a javascript value passing/usage problem.
Try taking a single point say (1.0, 0.0) and apply a series of 45 or 90 degree rotations to it so it moves like the hands of a clock, print the values and make sure they are landing at (0.0, 1.0), (-1.0, 0.0), (0.0, -1..0), etc

Share this post


Link to post
Share on other sites
Got it, was a case of being a total idiot (as I suspected)

this is wrong because it changes the value of y before which causes the second calculation to be incorrect

Vector.transform = function(matrix)
{
this.x = (this.x * matrix.data[0][0] + this.y * matrix.data[1][0] + matrix.data[2][0]);
this.y = (this.x * matrix.data[0][1] + this.y * matrix.data[1][1] + matrix.data[2][1]);
return this;
}



changed it to
Vector.transform = function(matrix)
{
x = (this.x * matrix.data[0][0] + this.y * matrix.data[1][0] + matrix.data[2][0]);
y = (this.x * matrix.data[0][1] + this.y * matrix.data[1][1] + matrix.data[2][1]);

this.x = x;
this.y = y;
return this;
}

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!