2D Rotation Around Point

Question

D. My first post here ::- >. I got a rather simple question. But please, allow me to introduce myself a bit first. I think it's polite for a first post ::- D.

I'm a game developer (free Flash games) with a few ahem big holes in my math (read: I haven't done any math since high school - thanks to the school, I was totally repulsed by it in University). Even so, I always liked math, but only out of school ::- D. Unfortunately, I haven't kept touch with it (it wasn't necessary so far).

So, without further delay, I will get to my problem for a game I'm working on. Anybody helping me wins a free ticket to the game's credits grin. And it's going to be a nice game, much nicer than my previous: http://www.kongregate.com/games/Kyliathy/thunderbirdz (to see that I'm not a fraud, LOL).

What I'm trying to do (and failing miserably) is to rotate a Rectangle around a Point, in Adobe Flash. The problem is that Flash rotates an object relative to it's X=0, Y=0 coordinate, which they call a registration point. And I want to rotate the Rectangle around ANOTHER POINT inside that Rectangle.

This is a sample Flash which illustrates my problem:

http://www.axonnsd.org/W/P002/MathSandBox.swf

[LATER EDIT: all SWF samples we talked about in the comments below are now accessible at the same links, except that you have to add '/W/P002'after 'axonnsd.org' - see the above link.]

The BLUE circle should stay on top of the RED circle. Instead, the Rectangle rotates around its registration point.

For people without Flash or who hate Flash, here is an image of the same problem which also show the registration point via a BLACK Square

Now.......

My solution to this problem would be to find an equation to MOVE the Rectangle to an appropriate X/Y so that the BLUE circle stays on top of the RED circle.

Specifying the rotation in Flash is simple: object.rotation = X, where X can be any number. It will, however, always divide it by 360, of course.

But now I have to find SOME method by which I set my object.x and object.y so that the Rectangle appears to rotate around the BLUE/RED circles, NOT around its registration point.

And, for the life of me, I don't even know where to START finding that mysterious equation ::- D. I bet it involves a bit of Pi and some drops of trigonometry. But I don't even know where to begin... Pointers, anybody?

Thank you for reading my long first message! ::- D.

Answer 1

The upper-left corner of the rectangle is the point we want to locate. It travels along a circular path with radius $r=\sqrt{a^2+b^2}$ and center $(h,k)=$ $(x_r+a,y_r+b)$.

One possible parametric description of a circle with center $(h,k)$ and radius $r$ is $(x,y)=$ $(h+r\cos t,k+r\sin t)$, but this parameterization starts at $(h+r,k)$ when $t=0°$ and moves to $(h,k+r)$ when $t=90°$. Swapping the sine and cosine gives a parameterization $(x,y)=$ $(h+r\sin t,k+r\cos t)$ that starts at $(h,k+r)$ when $t=0°$ and moves to $(h+r,k)$ when $t=90°$. Reversing the sign of the cosine term in the $y$ coordinate gives a parameterization $(x,y)=$ $(h+r\sin t,k-r\cos t)$ that starts at $(h,k-r)$ when $t=0°$ and moves to $(h+r,k)$ when $t=90°$. In the coordinate system you describe, this is the circle below.

So we're fairly close, but $t$ is slightly off from $\theta$. Letting $t=\theta-\arctan(\frac{a}{b})$ shifts the parameter to match the desired values. $$\begin{align} x&=h+r\sin(\theta-\arctan\left(\frac{a}{b}\right)) \\ y&=k-r\cos(\theta-\arctan\left(\frac{a}{b}\right)) \end{align}$$

^{Some earlier failed attempts at thinking transformationally are in the revision history.}