4

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.

House
  • 73,224
  • 17
  • 184
  • 273
PhotonStorm
  • 521
  • 3
  • 9
  • 2
    The center is always halfway between all the corners. – House 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! – House Jun 11 '13 at 14:14

3 Answers3

3

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.

William
  • 2,724
  • 1
  • 22
  • 24
3

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.

Kelly Thomas
  • 3,882
  • 1
  • 23
  • 35
1

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).

PhotonStorm
  • 521
  • 3
  • 9
  • 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 08:53