3D Math For Beginners

Converting Degrees to Radians

Radians are also the measurement used to rotate objects in vrml 2.0 . If you are going to animate an object using an orientation interpolator or just turn it on an axis to view it at a flattering angle by sitting the rotation field, you will need to use radians. Normally most people divide the circle into to degrees from 0 to 360. To convert your angles from degrees to radians use the formula below.

radians=(pi*degrees)/ 180

EXAMPLE:

pi = 3.141592654

NOTE:Discussion on Pi

45 degrees=(pi * 45)/180=
           141.3716694/180=
           0.785398163 radians

Now that you understand radians, here are some interesting formulas:

radius = arc/angle 

arc = radius * angle

angle = arc / radius

Okay, you ask, what does this all mean? Lets take the formula for radius first.

Radius is actually the diameter of a circle or it's width divided by 2. So in reality radius is just the distance from the center point of the circle to any point on the outside of the circle. You already now that angle is the angle in radians, but what is arc. The formula says that arc is radius times angle. Lets visualize arc.

Take a pie; a pumpkin pie cause I like pumpkin pie; and cut it into 8 equal pieces. Measure the distance between two of the cuts at it's widest end. That measurement is the width of the arc. The arc itself is the length of that segment of the curve. If you were to take one of the pieces of the pie and put it on a plate and measure along one side from the tip of the pie slice to the outside of the crust, that measurement would be the radius. If you were to take a protractor and center it on the tip of the slice and lay it's edge along one edge of the slice you could read the angle between one side of the slice and the other, then convert to radians. Finally, you could multiply those two measurements and that would give you the arc of the pie slice.

Which brings us to the last formula. Suppose we know the arc and we know the radius, but we don't know the angle. All we need to do is divide the arc by the radius, and we will have the angle in radians. This last formula for angle is probably one of the more useful formulas, but you really do need to understand the other two.

Tangent and Sine

X = the coordinates right to left from the center point 0.
So if an objects x coordinate is -5 and the viewer is at 0 0 0 the object will appear 5 units to his left.

Y = the coordinates up to down from the center point 0.
Most plug ins set 0 as eye level. If the viewer is standing at 0 0 0 then an the object y coordinates is -5, then that object will appear 5 units below his line of site.

Z= the coordinates front to back from the center point 0.
If the viewer is standing at 0 0 0 and an objects z coordinate is -5 then that object will appear 5 units in front of the viewer.

You are probably wondering what all this has to do with sine and tangent. Well for beginners if you look carefully at the cartesian coordinate system you will be able to determine that it defines 8 quadrants:

               y
               |    -z
               |   /
               |  /
               | /
      -x_______|/___________ x
               |
              /|
             / |
            /  |
           /   |
          z    | 
              -y

d= Des Cartes
f= fly

Back view
<----left hand
	xy plane <------x------>
	 4   -3 -2 -1  0  1  2  3  4  5
	   |  |  |  |  |  |  |  |  |  |
	 3_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	 2_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	 1_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
y	 0_|__|__|__|__d__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	-1_|__|__|__f__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	-2_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	-3_|__|__|__|__|__|__|__|__|__|_

Side view
<---forward
	zy plane <------z------->
 	 4   -3 -2 -1  0  1  2  3  4  5
	   |  |  |  |  |  |  |  |  |  |
	 3_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	 2_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	 1_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
y	 0_|__|__|__|__d__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	-1_|__f__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	-2_|__|__|__|__|__|__|__|__|__|_
	   |  |  |  |  |  |  |  |  |  |
	-3_|__|__|__|__|__|__|__|__|__|_

Using the grid

Des Cartes eyes are located at x=0 y=0 z=0 so his coordinates are: 0 0 0
The fly is loacted at x=-1 y=-1 z=-3 so his coordinates are: -1 -1 -3 
Since The above example of a Cartesian Grid uses Des Cartes eyes as the starting point
it follows that the coordinates to the left and above Des' eyes are in one quadrant,
coordinates to the right and above his eyes are in the 2nd quadrant,
coordinates to the left and below his eyes are in the 3rd quadrant,
coordinates to the right and above his eyes are in the 4th quadrants, and
all four of these quadrants are in split by the xy axis. 
The z plane is constructed pretty much the same except that "left" and "right" become 
"in front of" and "behind".

This brings us to a very important set of formulas using those 4 trigonometry functions. You will use these functions for almost everything from matrix rotations to moving an object through world coordinates.

There are some pretty cool things you can do with trigonometry. Suppose you wanted to determine how tall a building is and had no way to reach the top with a tape measure. You could measure off a distance far enough away from the building, and using a transit or some device similar you could site the top of the building and determine what angle you were siting at. Then you could take both these measurements, and use this formula to determine the height of the building:

EXAMPLE:
x=distance from building
hg=height from ground to line of sight
angle= angle in degrees not radians

height= (x * tan angle)+hg

JavaScript function for tan is Math.tan(angle in radians)

EXAMPLE JAVASCRIPT:

height= (x * Math.tan(angle in radians)) + hg;

C function tan(angle in radians). No example given.

radians=(pi * angle in degrees)/180

So if we want to convert radians to degrees we would use the reverse of this formula:

angle in degrees=(angle in radians / pi)*180

Rotations

EXAMPLE ROTATION ABOUT Z AXIS:

x= objects x position relative to world coordinates
y= objects y position relative to world coordinates

new_x_coordinate=x * cosine angle - y * sine angle
new_y_coordinate=y * cosine angle + x * sine angle

note java script functions are Math.cos(angle in radians) and Math.sin(angle in radians)

EXAMPLE JAVASCRIPT:
new_x_coordinate=x* Math.cos(angle) - y * Math.sin(angle);
new_y_coordinate=y * Math.cos(angle) + x * Math.sin(angle);

note: c functions are cos(angle in radians) and sin (angle in radians) no example will be provided

Translations

EXAMPLE:

xd= objects x coordinates
zd= objects z coordinates
dx= the distance you want to move the object's x coordinate
dz= the distance you want to move it's z coordinate

xd = xd + dx
zd = zd + dz

Too easy or what? Yes, for instance, lets say an object moves from location 0 0 0 and continues along a straight path at a 12 degree angle. Clearly dx and dz are not going to remain the same. We need to use an algorithm that can determine the value of dx and dz relative to the angle of translation:

EXAMPLE:
viewer_angle = angle of viewer relative to world coordinates
STEP_LENGTH= units for each step
xd = viewers current x position
zd = viewers current z position
dx = new x coordinate
dz = new z coordinate

NOTE: When using c and java functions the angle is in radians

dx = Math.cos(-viewer_angle)*STEP_LENGTH ;
dz = Math.sin(-viewer_angle)*STEP_LENGTH ;

NOW YOU CAN

xd=xd + dx;
zd=zd + dz;

Of course the script is a little more complicated than the example above. And as you know, this could also be done using an orientation interpolator. However, if you notice, with an interpolator you would not be as sure of the location of your projectile. Also with an interpolator it is a little harder to apply some principals of physics like gravity to the motion. I have not applied gravity to the ball because I wanted you to be able to read the script easily. One other cool thing is that, like I mentioned above, you can move the cannon while the ball is still in motion, and not alter the course of the cannon ball.

You see how easy it is to turn an object using cosine and sin. Suppose you want to do something a little fancier. Suppose you want to make an object spiral. Cosine and sine are perfect for doing this too provided you use them properly. Here is a little formula,,, I believe it is called Archmeides Spiral,,, at least it's someones spiral. I will write it in c and as an excercise, you can try to write it in java. It goes like this:

for(n=1.1; n > 0; n--)
for(ang=0; ang < 6.28; ang++)
{
r=n*ang;
x=r*cos(ang);
y=r*sin(ang);
}