Simple Rotation - taccGL™ Tutorial
Rotation around the Center of an Element
taccgl.actor("testimg") .rotateMiddle(0,0,1).start(); | RUN |
taccgl.actor("testimg") .rotateMiddle(0,0,1) .rotatePart(0,Math.PI/2) .start(); | RUN |
rotateMiddle rotates an element around its mid-point.
rotatePart allows you to restrict the rotation from a selected angle
to another selected angle. In the second example the starting angle is 0 and the
final angle is 90 degrees. The angle needs to be given in radians so PI/2
was specified.
Parameter of rotateMiddle is the rotation axis. (0,0,1) specifies the Z-axis
which means a rotation in the X-Y-plane, i.e. in 2D on the screen. The following examples
show other axis
taccgl.actor("testimg") .rotateMiddle(0,1,0) .start(); | RUN |
taccgl.actor("testimg") .rotateMiddle(0,1,0) .rotatePart(0,Math.PI/2) .start(); | RUN |
taccgl.actor("testimg") .rotateMiddle(1,0,0) .start(); | RUN |
taccgl.actor("testimg") .rotateMiddle(1,0,0) .rotatePart(0,Math.PI/2) .start(); | RUN |
Note that the axis must be a normalized vector, i.e. a vector of length 1.
taccgl.actor("Layout") .rotateMiddle(1,1,0).start(); | RUN |
taccgl.actor("Layout") .rotateMiddle(1/Math.sqrt(2),1/Math.sqrt(2),0) .start(); | RUN |
So instead of passing (1,1,0) as axis, the coordinates must be divided by the length
of the vector to normalize. In this case the length of the vector is sqrt(1*1+1*1)=sqrt(2).
Specifying the Rotation Center
With rotate you can rotate around a given point and axis:
taccgl.actor("Layout") .rotate(100,100,0,0,0,1) .start(); | RUN |
taccgl.actor("Layout") .rotate(1000,100,0,0,0,1) .rotatePart(0,Math.PI/2).start(); | RUN |
taccgl.actor("Layout") .rotate(100,100,0,0,1,0) .start(); | RUN |
taccgl.actor("Layout") .rotate(100,100,0,0,1,0) .rotatePart(0,Math.PI/2).start(); | RUN |
taccgl.actor("Layout") .rotate(100,100,0,1,0,0) .start(); | RUN |
taccgl.actor("Layout") .rotate(100,100,0,1,0,0) .rotatePart(0,Math.PI/2).start(); | RUN |
WebGL™ is a trademark of the Khronos Group Inc.
|
3D Animation
