# 2D Rotation Around Point

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.

• It's good to try to develop your math skills and understanding, but... doesn't this recipe help ? lorenzgames.com/blog/… Mar 3, 2011 at 19:31
• LOL ::- D. Thanks leonbloy! ::- D. Yeah, that's a nice fast trick! I also found in the meantime that I can trick it by drawing my rectangle a bit OFFSET. Like this: Rct.graphics.drawRect(-20, -70, 30, 90);. But this somehow doesn't satisfy me. Any real game developer should get in touch with the Great Math Spirit, LOL, this is my first attempt in a looong,looooong time ::- D. Mar 3, 2011 at 19:35

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.

• Maybe your use of a and b doesn't match up to mine—in my usage, if a and b are both zero, then the point about which you're rotating is the upper-left corner of the rectangle, so no movement is needed. Are your a and b relative to the rectangle or in another coordinate system? Mar 3, 2011 at 19:06
• @Axonn: try setting A and B to 15 and 65, respectively. Mar 3, 2011 at 19:16
• @Axonn: oh! if Rct.rotation is in degrees, try using (Rct.rotation*2*pi/180) inside sine and cosine. Mar 3, 2011 at 19:20
• @Axonn: also, instead of setting Rectangle.X and using 265,215 for A and B, try doing Rectangle.X += ... with A and B set to 15 and 65. Mar 3, 2011 at 19:28
• @Axonn: Yes, I meant to convert to radians and the 2 was a typo—should just be Rct.rotation*pi/180. Did you make the change in my subsequent comment, using += and the relative values for A and B? edit saw your second comment—can you post the updated SWF so I can see what it's doing? Mar 3, 2011 at 19:33