Trigonometry and Multiple
Axes
Looking side to side is no problem at all. Moving
based on that view is a breeze. Great! Now it's
time to throw in another addition to functionality
- another rotation. Rotation here won't be around
one axis restricted to only one coordinate space
as was the case before. Now it's time to not only
rotate within x and z to turn left and right,
but also z and y to give the impression of being
able to look up! It's mostly just a matter of
going through the process of rotating along more
than one axis, which, at first, may seem simple
but this new rotation adds a whole new complication.
Sound scary? Good.

The good news: This completely plows the way
for the next section of discussion (and all that
follow) which is fully rotational rendered 3D
objects around their centers.

The bad news: We'll pretty much need to completely
restructure our current approach in rotation and
panning. New trig concepts will be introduced
here and they will replace some of the already
established infrastructure we've been so used
to using thus far. Hopefully, though, it should
be no big deal. If you've kept up pretty well
so far, what's coming up shouldn't be too difficult.
And getting past this next step will make everything
else a breeze.

More Trigonometry - Rotating Around Multiple
Axes
With 2D rotation around a point, whether it be
in a fully 2D space or just within a single plane
in a 3D space, you deal primarily with those three
principal factors used previously, origin, angle
and radius. This origin represents offset or the
coordinates of the center of rotation. Angle is
the angle from 0 which your rotation is based,
somewhere within a 2 PI radian range (360 degrees).
And lastly, there's that hypotenuse line length
or the radius - the span between the position
of the origin and the final rotated point. With
those, we got:

x
= originx + Math.cos(angle)*radius;
y = originy + Math.sin(angle)*radius;

Rotation using multiple axes is very similar
only it needs the same operation above performed
more than one time, one for each additional axis
being rotated around. Each axis requires their
own rotation calculations for the rotation in
their own 2D space. The y axis, for example, when
rotated around, maintains a position within the
x and z 2D plane. If you wanted to rotated an
object in complete 3D, you would need to rotate
around all 3 axes which would require rotation
in each of the planes existing within x, y and
z; those being: x and y, x and z, and y and z
- each representing a rotation around each axis
x y or z.

//
rotation around x axis
y = Math.cos(angleAroundXAxis)*radius;
z = Math.sin(angleAroundXAxis)*radius;

//
rotation around y axis
x = Math.cos(angleAroundYAxis)*radius;
z = Math.sin(angleAroundYAxis)*radius;

//
rotation around z axis
x = Math.cos(angleAroundZAxis)*radius;
y = Math.sin(angleAroundZAxis)*radius;

The tricky part here, however, is making them
work together. It's not as easy as just placing
them in successive order one after the other and
just having it work. Don't think that complex
3D would be THAT easy! Just think about what would
happen if you wanted to rotate an line around
2 axes, say for example, first around the z, moving
in x and y space, and then the y, in x and z space.
We start with a line of 0 rotation and a radius
of 10. The offset can just be kept at 0,0 since
that's not important here and it will make things
easier to think about. So let's first rotate around
the z and do so at about, oh, 89 degrees. 89 degrees
is almost 90 degrees which is straight up. This
puts you almost right against, or at least really
close, to the y axis itself. And it's the y axis
which we'll want to rotate around next. To the
y axis, now, however, your radius is no longer
10. Its much, much lower because we've rotated
so close to it in rotating around the z axis.

[
change in radius size after rotation ]

Because of this, you would need to have to re-calculate
your radius for each new axis rotation to be able
to perform a proper rotation for the next axis.
If you think about it, the only time the radius
would remain 10 for the above example is when
there was no rotation around the z in the first
place. Each angle of movement in a rotation gets
you that much closer to the y axis. The same concept
applies to each axis as rotation around any other
axis changes the radius value from which you would
base your calculations. This kind of puts you
in a pickle for wanting to do 3D rotation. Recalculating
a radius for each axis rotation is a chore and
not something anyone should have to put up with
(as we did earlier with the moving camera with
panning example). Luckily for us, there is another
solution for this multi-dimensional rotation dilemma.
There is actually a way to base a rotation off
of, not the radius, but rather existing coordinate
values for your position in the plane rotated
in.

Let's revisit the basic 2D rotation equations
again for a second. What we have is an formula
used to calculate an x, y position based on the
angle and radius using sine and cosine.

x
= Math.cos(angle)*radius;
y = Math.sin(angle)*radius;

This position (the end point of the rotated line)
is based around a 0 angle from the x axis. Every
angle used in Math.sin and Math.cos start at 0
and extend from 0 to form the final angle and
ultimately the x, y position desired. With an
angle of 0, in our equations, where there is no
rotation at all, the value of x equals the radius
and y is 0 (cosine of 0 is 1 and sine of 0 is
0). At a 90 degree or Math.PI/2 angle, x is 0
and y is 1 (cosine of Math.PI/2 is 0 and sine
is 1).

For all events and purposes, this is fine, and
usually all you'll ever need to know, especially
for 2D work. But, there's another method of rotation
using trigonometry. It still involves sine and
cosine but, instead of rotating based on an angle
of 0 and a radius value, the rotation is based
on a change in angle and the current
x, y position of the point (line end point) being
rotated. So given any current x and y position
in a plane, you can rotate a point by
a desired angle getting a new x and y using the
following equation:

x
= Math.cos(angle)*x
- Math.sin(angle)*y;
y = Math.sin(angle)*x
+ Math.cos(angle)*y;

This angle isn't based on 0 degrees as with the
prior equations but, rather, the current angle
the x,y point would have at its current location.
The equations from before are actually derived
from these. The simplification comes with the
calculations resulting from that base angle of
0. At a 0 rotation, x is your radius and y is
0. Consider those values for x and y in the new
equation:

x
= Math.cos(angle)*radius
- Math.sin(angle)*0;
y = Math.sin(angle)*radius
+ Math.cos(angle)*0;

which gives you

x
= Math.cos(angle)*radius
- 0;
y = Math.sin(angle)*radius
+ 0;

or more simply just

x
= Math.cos(angle)*radius;
y = Math.sin(angle)*radius;

In using that base angle of 0 where x is your
radius, you can completely ignore those extra
portions of the equations as they are reduced
to 0 themselves. With 3D rotation however, we
will need those extra calculations because, as
I've said, and as you've seen before, we won't
always be basing rotation around a 0 angle. Once
you rotate around one axis, or are even just not
starting at a rotation of 0, you're no longer
at your radius value for your given coordinate
space. Using existing x and y values to base rotations
from, as these equations do, you can rotate despite
any prior rotations within any other axis.

[
sine and cosine to get x and y part 2 ]

Here are the corresponding equations for each
of the 3 axes:

//
rotation around x axis (a.k.a. pitch)
y = Math.cos(angleAroundXAxis)*y
- Math.sin(angleAroundXAxis)*z;
z = Math.sin(angleAroundXAxis)*y
+ Math.cos(angleAroundXAxis)*z;

//
rotation around y axis (a.k.a. yaw)
z = Math.cos(angleAroundYAxis)*z
- Math.sin(angleAroundYAxis)*x;
x = Math.sin(angleAroundYAxis)*z
+ Math.cos(angleAroundYAxis)*x;

//
rotation around z axis (a.k.a. roll)
x = Math.cos(angleAroundZAxis)*x
- Math.sin(angleAroundZAxis)*y;
y = Math.sin(angleAroundZAxis)*x
+ Math.cos(angleAroundZAxis)*y;

So, given any 3 angles of rotation around any
or all of the 3 axis, using these equations you
can properly rotate a point in 3D space. Simply
rotate around one axis, then using those resulting
values, plug them into the equation for the next
axis, and then put those resulting values in for
the final axis until you have your final rotated
x, y and z values. With that rotation, you have
the basis for forming a 3D rotating object in
Flash. Simply add the perspective scaling and
you're set!

Sound confusing? It can be a lot to take in,
especially if this is all completely new to you,
so don't worry if you're a little lost. To be
honest, you really don't have to know
why it works so much as rather just know that
it does work. There can be a lot of background
to this methodology and it's not so important
to know it all. It's good to know the immediate
understandings, such as basic rotation with trig
as you might use them later. But in the end, for
the examples given here, the equations above will
sit happily in one little 'make me rotate' function
and barely be addressed outside of that.