Rotate Around a Point by Matrix Precisely

On December 2, 2011, in Flash Flex AIR, by James Liu

In early this year, I post a article about rotating a shape around a point. And there are many feedback on that post and many friends point out that my example doesn’t rotate precisely. Especially when we try to rotate the graphic with 1 degree each time, the result goes obviously wrong after rotating 360 which meaning rotating 360 times with 1 degree. I need to say “Thank you” to Dubey that he point it out to me.

Basing on Dubey’s scenario, I find out that there is a precision issue in the rotation calculation. In the flash rotation example, I just rotate the graphic 45 degree each time, which works perfectly. The reason is when we convert the degree to radian, there is no precision problem.

m.rotate(Math.PI * degree / 180);

The result will be rounded to 2 decimal places. Therefore, this adds a degree of error in the calculated value, which makes the rotation go in the wrong way. To verify my assumption, I make three tests, rotating 1 degree each time, rotating 3 degree each time, and rotating 9 degree each time. Something I need to make clear, all the testing result are generated by flash Actionscript 3. Because of the different precision of different language, the result will be quite different.

Rotating 1 Degree for 360 Times Test Result
Start Position: x=46, y=46;
After Rotate 360 times:
End Position: x=45.5, y=46.6;
After Rotate 720 times:
End Position: x=45.35, y=47;
After Rotate 1080 times:
End Position: x=45.35, y=47.35;

After Rotate 8280 times:
End Position: x=39.8, y=53.2;

After Rotate 44280 times:
End Position: x=35, y=60.65;
From now on, this result will repeat 4680 degree, 4680 times. But Compare with the original position (46, 46), the stable state is missing the ideal position (46, 46) too mush.

After rotate 8280 times with 1 degree, which means rotating 23 rounds, the graphic shape’s position has changed a lot.

Rotating 3 Degree for 120 Times Test Result
Start Position: x=46, y=46;
After Rotate 120 times:
End Position: x=46.35, y=45.95;
After Rotate 240 times:
End Position: x=46.05, y=46.1;
After Rotate 360 times:
End Position: x=46.25, y=46;

After Rotate 2760 times:
End Position: x=45.1, y=45.55;

After Rotate 4680 times:
End Position: x=44.75, y=45.3;
And this result starts to repeat per rotating 1800 degree, 600 times.

Rotating 9 Degree for 40 Times Test Result
Start Position: x=46, y=46;
After Rotate 40 times:
End Position: x=45.85, y=46.1;
After Rotate 80 times:
End Position: x=45.9, y=46.05;
After Rotate 120 times:
End Position: x=45.8, y=46.15;

After Rotate 280 times:
End Position: x=45.8, y=46.25;
After Rotate 320 times:
End Position: x=45.85, y=46.15;
After Rotate 360 times:
End Position: x=45.8, y=46.25;
And the result starts to repeat per rotating 720 degree, 80 times.

As a result, you can find out that rotating 9 degree each time will make the rotation more precisely. But if you want to implement some effect such as rotation with mouse, then rotating by 9 degree doesn’t make any sense. So one solution for precisely problem is to reset the graphic object to the right position per 360 degree rotation.

Updated 2011.12.6
I attach my testing source code there. Hopefully it will be helpful for you to further work.
Rotate Around a Point by Matrix Precisely Source Code

Tagged with:  

Leave a Reply

Weboy

WordPress Blog