6.4 - Rotating

Rotating a model changes a model’s orientation. In addition, if the model is away from the origin, the model’s location changes. Mathematically, a rotation requires that all three components be involved in the calculation of each component’s transformed value. The component values are inner-connected for rotation. For example, for translation and scaling, the value of y does not affect the values of x or z. This is not true for rotation. The value of y can affect the rotated value of x and/or z. Each component of a rotated vertex is a combination of some fraction of the original vertex’s components. If we use f1, f2, f3, f4, f5, f6, f7, f8 and f9 to represent a set of fractions, then rotation is calculated as:

x' = x*f1 + y*f2 + z*f3;
y' = x*f4 + y*f5 + z*f6;
z' = x*f7 + y*f8 + z*f9;

The fractions f1, f2, f3, f4, f5, f6, f7, f8 and f9 must be specifically chosen to produce circular motion.

It is very important to understand that you are always rotating about something. That is, you always have a point and a line of reference about which you are creating a circular motion. A circle always has a center point. In addition, a circle always lies in a flat plane. A flat plane can be defined by a normal vector to the surface of the plane. Therefore, a rotation always has an axis of rotation, which is the normal vector to the plane that contains the circle. Since all translation and scaling are relative to a coordinate system, it makes sense that all rotations are relative to that same coordinate system. The following mathematics is developed assuming that rotations are always about the origin. We can develop the general equations for rotation by starting with simple cases and then work toward more complex cases.

Right-hand-rule for rotation

Angles have a direction. For example, you can rotate 45 degrees or -45 degrees. So which way is positive rotation and which way is negative? To be consistent with a right-handed coordinate system we use the “right hand rule” for determining direction of rotation. Using your right hand, extend your thumb away from your other fingers. Your thumb represents the axis of rotation. The curl of your fingers represents positive rotation, as shown in the image. (If you used a left-handed coordinate system you would do the same thing – except with your left hand.)

Angles always are relative to something. Angles must have a line of reference that defines an angle of zero. The axes of the coordinate system are natural reference lines. Therefore,

Using these conventions, notice that a 90 degree rotation about any of the coordinate axes will take one of the axes to the location of another axis.

These are all just conventions that we agree upon, but the conventions form a very nice, consistent, and uniform system for rotations.

Special Cases and Effects

Let’s look at three specific cases – rotation about each of the coordinate system axes. Then we will use those special cases to develop rotation about any axis. Please study and experiment with the following examples. Click and drag your mouse cursor inside a canvas to get various views of the 3D world.

  1. Rotation about the Z axis.

    First, notice that when you rotate a model about the z axis, the z component of every vertex remains unchanged; only the x and y components change. Also notice that when you rotate 90 degrees about the z axis, the x axis becomes the y axis. So at 90 degrees, the x component becomes the y component and the y component becomes the -x component. Because the rotation forms a circle, the sine and cosine of the angle of rotation provides us with the fractions we need in our combination of values. The calculations can easily be shown to be:

    x' = x * cos(angle) + y * -sin(angle);
y' = x * sin(angle) + y *  cos(angle);
z' = z;

    An example of rotation about the Z axis.

    Please use a browser that supports "canvas"
    Rotation angle about Z axis: 0.00 : -180.0 180.0

    Translate:
    X translation 0.00 : -2.0 2.0
    Y translation 0.00 : -2.0 2.0
    Z translation 0.00 : -2.0 2.0
    Animate

    Open this webgl demo program in a new tab or window

  2. Rotation about the X axis.

    This case is similar to the rotation about the z axis, but now the x component of every vertex remains unchanged; only the y and z components need to be changed. Again, because the rotation forms a circle, the sine and cosine of the angle of rotation provides us with the fractions we need:

    x' = x;
y' = y * cos(angle) + z * -sin(angle);
z' = y * sin(angle) + z *  cos(angle);

    An example of rotation about the X axis.

    Please use a browser that supports "canvas"
    Rotation angle about X axis: 0.00 : -180.0 180.0

    Translate:
    X translation 0.00 : -2.0 2.0
    Y translation 0.00 : -2.0 2.0
    Z translation 0.00 : -2.0 2.0
    Animate

    Open this webgl demo program in a new tab or window

  3. Rotation about the Y axis.

    Hopefully you see the pattern! A rotation about the Y axis does not change the y components of the vertices, but the x and z components change according to the angle of rotation.

    x' = x *  cos(angle) + z * sin(angle);
y' = y;
z' = x * -sin(angle) + z * cos(angle);

    An example of rotation about the Y axis.

    Please use a browser that supports "canvas"
    Rotation angle about Y axis: 0.00 : -180.0 180.0

    Translate:
    X translation 0.00 : -2.0 2.0
    Y translation 0.00 : -2.0 2.0
    Z translation 0.00 : -2.0 2.0
    Animate

    Open this webgl demo program in a new tab or window

  4. Un-doing rotations.

    A rotation can be “un-done” by rotating about the same axis but in the negative direction. For example, if you rotate a model 34 degrees about the X axis, then to put the model back where it was, rotate -34 degrees about the X axis.

Rotation about any axis

We can use the three rotations above to calculate the rotation about any arbitrary axis. Given an axis of rotation, <ux, uy, uz>, the logic goes like this:

  • Rotate about Z to place <ux, uy, uz> in the Z-X plane. Let’s call this new vector <ux’, uy’, uz’>.
  • Then rotate about Y to place <ux’, uy’, uz’> along the Z axis.
  • Then rotate about Z the desired angle.
  • Then undo the rotation about Y that places <ux’, uy’, uz’> back to its original location.
  • Then undo the rotation about Z that places <ux, uy, uz> back in its original location.

This series of rotations will appear to a user as circular rotation about the axis <ux, uy, uz>. Pretty cool!

Combining the 5 rotations into a single set of equations is straightforward but tedious. Giving you the exact equations without the development behind them would be more confusing than helpful. So we will skip the rotation equations for now. More details can be found on this Wikipedia page on rotations.

An example of rotation about any arbitrary axis.

Note: Sometimes your eyes play tricks on you and the rotation will look wrong. To verify that the model is indeed rotating about the axis, rotate your view so that you are looking straight down the axis of rotation and then vary the rotation angle.

Please use a browser that supports "canvas"
Rotation angle about the axis: 0.00 : -180.0 180.0

Axis of rotation vector: <1.00, 0.00, 0.00>
dx 0.00 : -1.0 1.0
dy 0.00 : -1.0 1.0
dz 0.00 : -1.0 1.0

Translate:
X translation 0.00 : -2.0 2.0
Y translation 0.00 : -2.0 2.0
Z translation 0.00 : -2.0 2.0
Animate

Open this webgl demo program in a new tab or window

Glossary

rotate
Change the orientation of a model. If the model is not centered at the origin, rotation also changes location.

Self Assessment

    Q-129: Rotating a model that is not centered at the origin modifies which properties of the model? (Select all that apply.)
  • orientation
  • Correct. Rotation fundamentally changes a model's orientation.
  • location
  • Correct. Rotation that is not centered at the origin will move the location of a model.
  • size
  • Incorrect.
  • color
  • Incorrect.
    Q-130: Rotating a model about the X axis leaves which model vertex components unchanged?
  • x component
  • Correct. Only the Y and Z components change.
  • y component
  • Incorrect.
  • z component
  • Incorrect.
  • w component
  • Incorrect.
    Q-131: By convention, we use the “right-hand-rule” for determining which direction is positive rotation. Therefore, rotating -90 degrees about the Y axis moves the Z axis where?
  • in the direction of the global -X axis.
  • Correct. Put your thumb along the Y axis and your fingers curl toward the X axis. Going -90 degrees goes in the opposite direction of the X axis.
  • in the direction of the global +X axis.
  • Incorrect.
  • in the direction of the global -Y axis.
  • Incorrect.
  • in the direction of the global +Z axis.
  • Incorrect.
Next Section - 6.5 - Transformation Matrices