Center Demo

Both center ships are rotating 360 degrees in radius of 100 pixels from the rotation center. The rotation differs between the two. In one, the ship is always facing the way it is flying. In the second, it doesn't change its front/back position while rotating.

See the code and try to understand the rotations by experimenting with the left side ships.

To Do

On the left page side you can experiment various rotations combined with the translation.
In all the cases, both translation and rotation are combined into smooth movement, See the difference on the final position:

• On top, the planet final position on hover is as the planet was first rotated by 90 degrees and after that translated by 50 pixels. Pay attention that rotation rotate also the axis. Thus, translation is done on the rotated axis.
• In the middle, the two first stages are as in the previous top example. Then, the planet is rotated back by 90 degrees. Thus, the final position is as at the beginning, but shifted down by 50 pixels.
• On the bottom, the planet final position on hover is as the planet was first translated by 50 pixels (no axis change) and then rotated by 90 degrees.