Maths ? coordinates rotating around coordinates

Question

could you give me a tip please, a redirection to what is the "simple" math I need to learn and understand for the rotation of an object (its coordinate x, y) around an other object (an other x, y), I guess I could also describing my need as (x, y) moving coordinate orbiting around (x, y) fixed coordinates. It is for a little HTML5/Javascript game. Thank you.

Answer 1

You don't need matrices at all. Just take the rotation angle in radians, get its cosine and sine, multiply them by the distance you want between the two objects and add the x and y values of the fixed object:

rotatingObject.x = Math.cos(rotationAngle) * distance + fixedObject.x
rotatingObject.y = Math.sin(rotationAngle) * distance + fixedObject.y

Answer 2

Edit: Added the simplified form. user6245072's answer works great if distance is known, and the way below works with known coordinates.

Edit: Nevermind the matrices, look at what user6245072's answer instead. It's more simple. I was thinking too hard :p

That, would be matrices. There's a lot of websites that explains it for you.

This is a matrix i took from an util class i made my self a while back:

[Math.cos(ang), -Math.sin(ang), 0.0f, (-X * Math.cos(ang) + Y * Math.sin(ang) + X)]
[Math.sin(ang), Math.cos(ang) , 0.0f, (-X * Math.sin(ang) - Y * Math.cos(ang) + Y)]
[0.0f         , 0.0f          , 1.0f, 0.0f                                        ]
[0.0f         , 0.0f          , 0.0f, 1.0f                                        ]

With (X, Y) to be the point of rotation and ang to be the rotation degree in radians.

If you multiply that with a vector it will rotate the vector relative to (X, Y). This is the multiplied form:

rotatedX = x * (Math.cos(ang)) + y * (-Math.sin(ang)) + (-X * Math.cos(ang) + Y * Math.sin(ang) + X);
rotatedY = x * (Math.sin(ang)) + y * (Math.cos(ang)) + (-X * Math.sin(ang) - Y * Math.cos(ang) + Y);

Edit: Simplified form for anyone running to this thread again:

float dx = x - X, dy = y - Y; 
rotatedX = dx * (Math.cos(ang)) + dy * (-Math.sin(ang)) + X);
rotatedY = dx * (Math.sin(ang)) + dy * (Math.cos(ang)) + Y);

There should be some other approaches out there, but this work too.

The main idea:

1. Translate the point which you want the object to rotate to, to (0, 0)
2. Rotate normally (can be done with a normal rotation matrix)
3. Translate back to its original place