MICROGOODIES - Rotating Your Children

Rotating Your Children

The first installment of the series on the Transform node talked about using it to create new coordinate systems. Using the node, you could then add children to the system, and manipulate their position in the overall world as you pleased.

This tutorial takes that one step further, covering another way to manipulate your objects: by rotating them. Rotation comes in lots of different varieties, including pivoting and rotation around a center point.

Rotating things still falls within the same guidelines. You're still going to create a new coordinate system by using the highly-famed Transform node, put some objects in it with the help of the children field, and finally use another field, rotation, to do the desired task.

So let's get right into it.

Rotation Axes, Right Hands, and Radians

First off, let's take another look at the Transform node, without the fields we won't be using when rotating:

Transform {
   children   []   # We'll be putting the objects we want to rotate in here
   rotation   0.0 0.0 0.0 0.0   # Where the main action happens
   center     0.0 0.0 0.0   # Used in situations where you want to pivot
}

A good place to start is with the rotation axis, the imaginary line about which a coordinate system is rotated. For example, the earth rotates around its own axis. Go a step further and you could call it the earth's rotation axis. Let's say for just a moment that the earth's rotation axis is perfectly vertical (implying that in real life it's tilted, far from vertical, in fact). Now we need to apply this to the Transform node's rotation field.

The first three values are coordinates--that's right, your basic X, Y, Z coordinates. Those define to which direction the rotation axis will be pointing. Imagine that there is a point at the very center of that newly-created coordinate system. Now imagine another point at the coordinates that you'll put into the rotation field. The resulting line between the two is your rotation axis.

Since the earth's rotation axis is pointing perfectly upwards, the axis that deals with vertical measurements has to be changed (hint: Y). So, all that's need is the second coordinate from above: insert 0.0 1.0 0.0. That will result in a straight line upwards. A little catch about this process is that your value for the Y axis doesn't matter. That is, you could insert 1, 365, or 0.8751 and the result would be the same.

The fourth value of the rotation field is a measure in radians. Radians are comparable to degrees, with the exception that they are measured in decimal numbers, hastening computer computations. (View a Javascript degree/radian converter.) This radian measure is used to define how much to rotate around the rotation axis. But which way is positive and which is negative?

A common way to remember this is the right-hand rule. To use it, imagine wrapping your right hand around a particular axis so that your thumb points in the positive direction. If you wrap your hand around the Y axis, for example, your thumb would be pointing upwards. The direction in which your fingers wrap around the axis is the positive direction, and the radian measure would rotate the coordinate system a certain distance in that direction.

You could also insert negative radian measures, where the coordinate system would be rotated in the opposite direction as with a positive radian measure.

Let's Rotate Some Stuff!

Here's a relatively simple example to show off rotation:


#VRML V2.0 utf8

Transform {
   children [   # Rotate a cylinder
      Shape {
         appearance Appearance {
	    material Material {} # Default grey
	 }
         geometry Cylinder {
	    radius 0.35
         }
      }
   ]
   rotation   0.0 0.0 1.0 0.785   # Rotate around the Z axis by 0.785 radian (45 degrees)
}

The resulting world displays a cylinder tilted to the left by forty-five degrees. If you put in a different value for the Z axis, you'll get the same result, as explained before:


#VRML V2.0 utf8

Transform {
   children [   # Rotate a cylinder
      Shape {
         appearance Appearance {
            material Material {} # Default grey
         }
	 geometry Cylinder {
	    radius 0.35
	 }
      }
   ]
   rotation   0.0 0.0 365.0 0.785   # The second point is 365 units towards you instead of 1
}

Pivoting

You can also accomplish pivoting by using the Transform node's center field. When you define a point as a value for the center field, all rotation will be directed from that point alone, and the rotation will no longer be performed from the center of the object, like we were doing. It's useful for manipulating fixed shapes.

The code below generates a world where two cylinders are centered around a single point. Because of that, they intersect:


#VRML V2.0 utf8

Transform {
   children [
      Shape {
         appearance Appearance {
            material Material {}
	 }
         geometry Cylinder {
            radius 0.35
         }
      }
   ]
   rotation   1.0 0.0 0.0 0.785   # Rotate around the X axis by 45 degrees
   center   0.0 -1.0 0.0   # One unit below the origin
}

Transform {
   children [   # Rotate that same cylinder
      Shape {
         appearance Appearance {
            material Material {}
         }
         geometry Cylinder {
            radius 0.35
         }
      }
   ]
   rotation   0.0 0.0 1.0 0.785   # Rotate around the Z axis by 45 degrees 
   center   0.0 -1.0 0.0   # One unit below the origin
}

And there you have it. Yet another mystery of the Transform node has been revealed.

back to the basics page

This site and all contents herein are Copyright Š1998-2006 Johnnie Rose, Jr. and may not be copied or reposted without written permission from the founder.
View the Microgoodies Privacy Policy. Fight Spam!