5
$\begingroup$

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

Rotation Problem

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.

  • 1
    It's good to try to develop your math skills and understanding, but... doesn't this recipe help ? http://www.lorenzgames.com/blog/how-to-easily-rotate-a-movieclip-on-a-different-registration-point-with-as32011-03-03
  • 0
    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.2011-03-03

1 Answers 1

5

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

orbit 1

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.

orbit 2

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.

  • 0
    Hi Isaac! Thanks for answering. Wow, quite a formula, LOL ::- ). I've tried it but it doesn't work yet. Probably I'm messing something up. I set the X of the Rectangle as: a * Math.cos(Rct.rotation) + b * Math.sin(Rct.rotation) - a (where a and b are the original X/Y of the Rectangle - that is, it's 0 rotation position). BTW, what if a & b are 0. Then the result would always be 0, 0 because 0 * anything is 0.2011-03-03
  • 1
    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?2011-03-03
  • 0
    Yes, this may be where I'm messing up. My Rectangle is on a "Stage", at 250, 150. The Circle is inside the Rectangle at 15, 65. So the Origin would be 250+15, 150+65. That is what I set my A and B to. Then, I do Rectangle.X = `a * Math.cos(Rct.rotation) + b * Math.sin(Rct.rotation) - a;` and the result is: http://www.axonnsd.org/MathSandBox2.swf . And I do this AFTER doing Rectangle.Rotation += 1.2011-03-03
  • 1
    @Axonn: try setting A and B to 15 and 65, respectively.2011-03-03
  • 0
    Nope, it still flickers very annoyingly, just like you see in the 2nd Flash I linked. If you didn't open it: the rectangle just jumps around the stage like a rabid kangaroo ::- D. However, if I set A and B like you said, it does so around the upper area of the Stage, while if I set A and B to 265, 215 (which is the absolute coordinate of the Circle on the Stage), the Rectangle DOES tend to rotate a bit closer to the Red Circle but it does so in the same crazy manner. Maybe this helps: For rotation 27 got -466.45 | -432.9, For rotation 54 got -373.5 | -134.652011-03-03
  • 1
    @Axonn: oh! if Rct.rotation is in degrees, try using (Rct.rotation*2*pi/180) inside sine and cosine.2011-03-03
  • 1
    @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.2011-03-03
  • 0
    Whoops. Sorry if I forgot that little detail. Yes, the angle is in 360 degrees. Apparently you're converting the degree to radians? I've looked on Wiki to refresh my memory about Radians and saw that the conversion formula is deg * (pi/180) but yours has a *2 in it. Anyway, it doesn't work in either way ::- (. Sorry for taking so much of your time ::- (. The rectangle now flies away up up... For rotation 1 got 3.7 | -4.65, For rotation 32 got 73.65 | -173.05, For rotation 41 got 76.05 | -226.55. It stopped flickering though, it just lifts off in a very wide circle LOL, sorry ::- (.2011-03-03
  • 0
    Saw your second comment. That seemed to work better but of course += can't work because then the Rectangle just speeds away faster and faster. Hold on, I'm trying, I'm trying really hard LOL.2011-03-03
  • 1
    @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?2011-03-03
  • 1
    @Axonn: Also, if that's still not working, it may be that the coordinate system in Flash is oriented differently than the one in my head, in which case some +/- might need to change in the formulae.2011-03-03
  • 0
    The += was partially right. This is what I did instead: A = 15, but then Rectangle.X = OriginalRectangleXCoord + (your formula for A). Same for Y, with B = 65. The result is... funny ::- D. http://www.axonnsd.org/MathSandBox3.swf2011-03-03
  • 1
    @Axonn: Okay, I've edited my answer to try to clarify what I'd meant originally (which I think is what you implemented) and to provide an alternate to try. Is the first what you're using in MathSandBox3.swf? Does the second work any better?2011-03-03
  • 0
    Damn, still doesn't work ::- (. I updated my code to match your new formulas and tried some cowboy programming (changing signs and values for A/B and X/Y) but nothing worked. Right now A and B are still 15 and 65, which is where the Circle is located inside the Rectangle, while the X and Y of the Rectangle are set like so (assuming that your X prime and Y prime are meant to be the final result and X and Y are the original coordinates of the Rectangle at 0 rotation): Rect.X = `250 - a + a * Math.cos(angle) + b * Math.sin(angle);` Rect.Y = `150 - b - b * Math.cos(angle) + a * Math.sin(angle)`2011-03-03
  • 0
    This is how it looks now http://axonnsd.org/MathSandBox4.swf2011-03-03
  • 1
    @Axonn: Hmm... at least now it's rotating in a clear circle about *some* point, even though it's not the right point... Can you get the values of Rectangle.X and Rectangle.Y for 3 different rotation angles?2011-03-03
  • 0
    Sure thing. Hold on. For rotation 4 got 254.45 | 21.2, For rotation 79 got 301.65 | 87.3, For rotation 177 got 223.4 | 150.65 **and now comes the interesting part** For rotation -151 got 190.35 | 134.55, For rotation -96 got 168.75 | 76.85 [after 180, it starts counting down with minus. I suppose this is the way it's done right with degree angles ::- D. Just thought I'd let you know of that too. BTW, the values represent the final X and Y coordinates, computed via the above formula.2011-03-03
  • 1
    @Axonn: Given that data, it seems to be rotating about the point (235,85), which is (250-15,150-65), so what happens if you take out the a and b that are not multiplied by trig functions? (see my newly-edited answer in about a minute)2011-03-03
  • 0
    Taking them out just makes it rotate a bit lower, but still wrong ::- (. The best way I made it work is by putting + A and + B instead of - A and - B. That way, it does rotate around the Red circle, but at a constant distance... of... For rotation 2 got 282.25 | 150.55, For rotation 57 got 327.65 | 192.15, For rotation 172 got 259.15 | 281.452011-03-03
  • 1
    @Axonn: Can I see that one? Those most recent 3 data points should indicate rotating about (265,215), which is correct, and at a distance of about 66.71, which is about how far the red circle should be from the upper-left corner of the rectangle...2011-03-03
  • 0
    Sure thing: http://axonnsd.org/MathSandBox6.swf - this is for: `Rct.x = 250 + a + a * Math.cos(angle) + b * Math.sin(angle)`. P.S.: Thanks for the excellent Diagrams. I'm starting to wrap my mind around them now.2011-03-03
  • 0
    If I do `250 - a ...` and `150 + b...` it actually touches the correct point at 0 degrees. Then goes to describe a circle to the left, and touches the correct point again at 0 degrees.2011-03-03
  • 1
    @Axonn: Try changing the sign (+/-) on the sine terms (leave the cosine terms alone) on either MathSandBox6 or on the change you just described and see if that works on either of them.2011-03-03
  • 0
    Is this rectangle on crack or what? http://axonnsd.org/MathSandBox7.swf this time I used `Rct.x = 250 + a + a * Math.cos(angle) + b * Math.sin(angle); Rct.y = 150 + b - b * Math.cos(angle) - a * Math.sin(angle);` We're gonna go down in Stack history for most comments in a post LOL. Sorry Isaac ::- ( and thank you so much for getting me this far.2011-03-03
  • 1
    @Axonn: Oh, I bet we're *far* from the record. Now I'm at the point where my own curiosity is compelling me to get to an actual working answer. Let's try this (completely different logic behind it):$$\begin{align}x&= 265+66.71\sin(\theta-0.2268)\\ y&=215-66.71\cos(\theta-0.2268)\end{align}$$ (where $\theta$ is in radians)2011-03-03
  • 0
    LOL, this works best ::- D. http://axonnsd.org/MathSandBox8.swf obviously I haven't the SLIGHTEST idea where you came from with those values =)).2011-03-03
  • 1
    @Axonn: That's bizarrely different... in about 2-3 minutes, I'll have another edit to my answer with an explanation of this method and maybe it'll become clear what's not quite right that's causing the slightly-off-ness.2011-03-03
  • 0
    What if, when doing Rotation, somehow the local (rectangle's) coordinate space changes dinamically at runtime? That could be because of Flash Player drawing system. Do you see evidence of that happening? Such a change would influence the position of the inner circle, the one in the rectangle. However, I notice no change in the X/Y of that circle. It stays put. Of course, because the rectangle is moving, its absolute coordinates (relative to the stage) ARE changing, but that's ok given what we see. Of course, what I want is to STOP those coordinates from changing. That is what I'm after.2011-03-03
  • 1
    @Axonn: That's one possibility, but one I'm not sure how to deal with, and one I'd expect would produce something far less close to the goal. The two more likely possibilities, I think, are (1) the rounded values 66.71 and 0.2268 aren't precise enough (use `sqrt(15^2+65^2)` and `arctan(15/65)` instead); or (2) the coordinates (15,65) are not of the center of the circle, but the upper-left corner of its bounding rectangle.2011-03-03
  • 0
    Actually it's the other way around 15, 65 IS the center of the circle, and the upper left is 10, 60. And Float numbers in Flash players do have issues. But only from the 8th decimal or something like that. And I wouldn't expect that to affect us so badly, would it? --- I'm going to try your new formulas.2011-03-03
  • 1
    @Axonn: I wouldn't expect the rounding I did in using those decimals to make enough of a difference to cause what we were seeing, but I'm not entirely sure. On closer inspection of MathSandBox8.swf, the position appears to be correct for an angle of 0°, offset left by the diameter of the small circle for 90°, offset left and up each by the diameter of the small circle for 180°, and offset up by the diameter of the small circle for 270° (or –90°). That is, the rectangle is rotating about the upper-left corner of the bounding rectangle of the red circle. Are you sure the center is (15,65)?2011-03-03
  • 0
    Let the SWF speak for itself: http://axonnsd.org/MathSandBoxA.swf2011-03-03
  • 1
    @Axonn: What finally fixed it?2011-03-03
  • 0
    You did! ::- D. Your new formulas worked + , indeed, you were correct that A and B should have been 20 and 70, instead of 15 and 65! I am now going to test some of the older formulas against that discovery. Just out of curiosity. BIG, BIG, THANK YOU. Would give you all my little reputation if I could ::- D.2011-03-03
  • 0
    Job very well done!2011-03-03
  • 0
    Yes, Isaac 190% ::- D hehe. The initial formulas don't seem to work with the 20/70 coordinate adjustment. It isn't such a big difference anyway. They wobble too much around the point. I admit that I still don't understand why ATAN worked and the previous approach didn't ::- /2011-03-03
  • 1
    @Axonn: You're welcome. I'm just glad to have gotten to an actual working solution. I've edited down my answer to just the final working one, but the older versions can be seen in the revision history. @Américo: Thanks.2011-03-03
  • 1
    @Axonn: The two methods *should* be equivalent, through expanding $\sin(\theta+\arctan(15/65))$ using the identity for $\sin(A+B)$ and likewise for the cosine term... my guess is that it's an issue of orientation of the coordinate system—since the flash coordinate system is positive to the right and *down* whereas a mathematical system is usually positive to the right and *up*, which also affects the orientation/directionality of the angles, all of which is to say that it's harder for me to think in Flash coordinates, so I probably screwed up the earlier formulas.2011-03-03
  • 1
    @Axonn: ... and the arctan term is the measure (in radians) of the small angle between the line from the center of the circle to the upper-left corner of the rectangle and a vertical line through the center of the circle.2011-03-03
  • 0
    Ok, I understood the coordinate system explanation ::- ). The rest, is all a blur *laugh*. I'm simply not well prepared enough for this. Luckily, this was the only "complex" problem I had. The other stuff I have in my game relates to lines, co-linearity, speed, acceleration and simple angle calculations which, thanks God, at least those, I can do ::- D. Isaac, I'd be happy to show you where you work went into when my game is finished. If you want to, shoot an e-mail the4xonn at gmail dot com where in 4xonn instead of 4 you write 'a'. LOL, eat that, spam bots *grin*.2011-03-03