Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I need help working out the centre coordinate of a rotated rectangle regardless of the point of rotation (i.e. the rectangle doesn't rotate around its center). I do not know the coordinates of the corners, so it's not a simple case of dividing those.

It's easier to show than tell, so here's example 1:

http://gametest.mobi/rotate/index.php?f=point1.js&d=tests

Click to start/stop the rotation.

In this example I've got my sprite with the rotation point set to the bottom-right corner of it. If you click you'll see it rotate around that. I need to find a way to work out the coordinates of the center of the rectangle (represented by the middle red cross-hairs.)

Here is another example, this one is set to rotate at 0.3 x 0.8 into the rectangle:

http://gametest.mobi/rotate/index.php?f=point3.js&d=tests

You can see I added the circle into each demo, this is positioned on the sprites x/y coordinate and the radius was calculated from the distance of the center of the rectangle to the rotation origin.

I can visually see the correlation between the point of rotation and the circle, and I can see it tracks the centre of the rectangle beautifully on the circles perimeter! But I'm falling at the last hurdle in trying to calculate the actual value, so desperately need a fresh set of eyes on it please.

share|improve this question
2  
The center is always halfway between all the corners. –  Byte56 Jun 11 '13 at 13:08
    
Hey PhotonStorm. I've removed the answer from the question. You should certainly post that once you can. It'll be in the edit history if you want to copy/paste it. However, it's best just to wait until you can post it as an answer instead of mixing it in with the question. Glad you solved it! –  Byte56 Jun 11 '13 at 14:14
add comment

3 Answers

Let (X0, Y0) be the coordinates of the rectangle’s center at rotation zero, while (X1, Y1) is the coordinates of the rectangle’s center at rotation of angle theta (both coordinate pairs relative to pivot point).

X1 = (X0 * cos(theta)) - (Y0 * sin(theta))
Y1 = (X0 * sin(theta)) + (Y0 * cos(theta))

Here is a short video explaining why these work.

share|improve this answer
add comment
up vote 1 down vote accepted

Ok, that thing where you post a question up here and then solve it 10 mins later? Sorry, that was me just now. To help anyone else trying to achieve the same thing here is how I did it:

Get the angle between the point of the rotation and the center of the rectangle (i.e. the value of the width and height / 2):

var originAngle = Math.atan2(centerY - originY, centerX - originX);

Then add this as a constant to the rotation of the sprite (where sprite.rotation is in radians):

var px = sprite.x + distance * Math.cos(sprite.rotation + originAngle);
var py = sprite.y + distance * Math.sin(sprite.rotation + originAngle);

The distance value is the distance from the point of rotation to the center (as used to draw the circle in the demo in my original post).

share|improve this answer
    
It feels kinda lame, I know, but don't forget to accept your answer. –  D. Hayes Jun 14 '13 at 2:03
    
I will, it just wouldn't let me for 18 hours (or something along those lines). StackExchange rules are sensible, but strange - wish it would email me a reminder or something. –  PhotonStorm Jun 14 '13 at 8:53
add comment

If you know the points of all the corners, it's simply a matter of taking the average of each point component.

center_x = (p1_x + p2_x + p3_x + p4_x) / 4
center_y = (p1_y + p2_y + p3_y + p4_y) / 4

That should give you the center no matter how it's rotated.

share|improve this answer
    
If I knew the points of the corners the center would be no issue at all :) –  PhotonStorm Jun 11 '13 at 13:23
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.