The Power of Hexagons: How to animate the rotation of a block (Swift, iOS, Xcode, CAKeyframeAnimation)
A cube is an illusion, drawn in 2D to appear 3D. One consequence of this is that a two-dimensional rotation will not automagically make the cube appear naturally rotated on a three-dimensional plane. This is because no account is taken of perspective in two-dimensional transformations.
You might well have read explanations elsewhere of the X, Y, and Z axes and how transformations can be performed around them, but here I'm going to explain how to leverage hexagons and circles to create the illusion of 3D rotation.
How you roll with it
A cube rolling forwards onto its right face with the vertices numbered in the following way
repositions its vertices like so:
0 -> 5
1 -> origin
2 -> 1
3 -> 2
4 -> (rear) origin
5 -> 4
origin -> 3
rear origin -> 0
The question is how to realistically animate the changes.
Vertices that do not require repositioning from or to the origin simply move around the circle on which the hexagon's own origin is centred. For points moving to and from the origin positions (front and rear) two additional circles need to be drawn.
These added circles are centred on vertices 5 and 2 and all movement for the forward roll onto the front (right) face occurs in a clockwise direction. (An anticlockwise movement would see the cube rolling backwards onto rear left face.)
The (clockwise) movement follows the encompassing circle for points 0, 2, 3, 5 and the added circles for 1, 4, origin, rear origin. If we imagine the entire rotation of any one point from its starting position and back again then it would appear petal shaped from the side due to the intersection of the circles.
This is something worth noting because it provides us with the means to draw and describe something with a more organic form. It will also provide a good companion to discussion of quadratic curves in a later post.
Note: in the cube's original orientation the origin and the rear origin are in an identical position but as the cube rotates the origins move along two paths front and rear. We could give the origin itself a number, but I've used simply origin and rear origin as labels to remind us that the foremost top corner and the rearmost bottom corner both begin at the centre of the hexagon.
repositions its vertices like so:
0 -> 5
1 -> origin
2 -> 1
3 -> 2
4 -> (rear) origin
5 -> 4
origin -> 3
rear origin -> 0
The question is how to realistically animate the changes.
Vertices that do not require repositioning from or to the origin simply move around the circle on which the hexagon's own origin is centred. For points moving to and from the origin positions (front and rear) two additional circles need to be drawn.
These added circles are centred on vertices 5 and 2 and all movement for the forward roll onto the front (right) face occurs in a clockwise direction. (An anticlockwise movement would see the cube rolling backwards onto rear left face.)
The (clockwise) movement follows the encompassing circle for points 0, 2, 3, 5 and the added circles for 1, 4, origin, rear origin. If we imagine the entire rotation of any one point from its starting position and back again then it would appear petal shaped from the side due to the intersection of the circles.
This is something worth noting because it provides us with the means to draw and describe something with a more organic form. It will also provide a good companion to discussion of quadratic curves in a later post.
Note: in the cube's original orientation the origin and the rear origin are in an identical position but as the cube rotates the origins move along two paths front and rear. We could give the origin itself a number, but I've used simply origin and rear origin as labels to remind us that the foremost top corner and the rearmost bottom corner both begin at the centre of the hexagon.
Hidden faces
It is all too easy to ignore or neglect hidden faces when drawing 3D objects, but they are just as important, if we want to rotate a cube, as the visible faces. Although in the example rotation shown here
the cube is only making a turn of 60 degrees before looping from the beginning again. This means that to complete the illusion it is only necessary to include one hidden face (the rear of the cube).
Colour changes and moving along
The additional ingredients to be aware of are colour changes to add a little realism and also movement forwards. In the code and in the video I use a CABasicAnimation to fade the colour from light to dark depending on position. The moving is similarly a simple CABasicAnimation, whereas the cube rotation relies on the CAKeyframeAnimation class and changes the path property of CAShapeLayers to achieve its effect.
Conclusion
This post and the accompanying code could be expanded to rotate in different directions and there's plenty of other tricks that can be performed, but I'll leave things here for now.
Comments
Post a Comment