HTML5 Canvas 3D WebGL (TM) javaScript Library

Simple Rotation - taccGL Tutorial

Rotation around the Center of an Element"testimg") .rotateMiddle(0,0,1).start();
RUN"testimg") .rotateMiddle(0,0,1) .rotatePart(0,Math.PI/2) .start();

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"testimg") .rotateMiddle(0,1,0) .start();
RUN"testimg") .rotateMiddle(0,1,0) .rotatePart(0,Math.PI/2) .start();
RUN"testimg") .rotateMiddle(1,0,0) .start();
RUN"testimg") .rotateMiddle(1,0,0) .rotatePart(0,Math.PI/2) .start();

Note that the axis must be a normalized vector, i.e. a vector of length 1."Layout") .rotateMiddle(1,1,0).start();
RUN"Layout") .rotateMiddle(1/Math.sqrt(2),1/Math.sqrt(2),0) .start();

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:"Layout") .rotate(100,100,0,0,0,1) .start();
RUN"Layout") .rotate(1000,100,0,0,0,1) .rotatePart(0,Math.PI/2).start();
RUN"Layout") .rotate(100,100,0,0,1,0) .start();
RUN"Layout") .rotate(100,100,0,0,1,0) .rotatePart(0,Math.PI/2).start();
RUN"Layout") .rotate(100,100,0,1,0,0) .start();
RUN"Layout") .rotate(100,100,0,1,0,0) .rotatePart(0,Math.PI/2).start();

WebGL™ is a trademark of the Khronos Group Inc.

Next Page:Accelerated Motion
Previous Page: Basic Animations