TRIGONOMETRY FOR
ANIMATION
What is Trigonometry?
¨
¨
¨
¨
¨
Trigonometry is basically the study of triangles and the
relationship of their sides and angles.
For example, if you take any triangle and make one of the
angles larger, the side opposite of that angle will get longer
(assuming the other two sides stay the same length).
Also, the other two angles will get smaller.
A specific type of triangle has one of its angles equal to
exactly 90 degrees. This is called a right triangle and is
indicated by a little square in the corner of that angle.
It happens that in a right triangle, the various relationships are
far simpler and quite easy to figure out with some basic
formulas.
Angles
¨
¨
An angle is simply the shape formed by two
intersecting lines, or the space in between those
lines.
Two intersecting lines will form four angles.
Radians and Degrees
¨
¨
¨
¨
¨
The two major systems for measuring angles are degrees and
radians.
You are probably familiar with degrees.
The system of 360 degrees in a circle has become a part of
our culture.
But it turns out that computers have a lot more affinity for
radians when it comes to talking about angles.
So, like it or not, you need to know about radians.
Radians and Degrees
¨
¨
¨
A radian is equal to approximately 57.2958 degrees.
A full circle, or 360 degrees, works out to 6.2832 radians. Still
not making any sense? Well, remember pi - that symbol, π?
That is equal to about 3.1416, meaning that a circle (6.2832
radians) measures exactly 2 pi.
You’ll get used to thinking of
¤
¤
¤
¤
360 degrees as 2 pi,
180 degrees as pi,
90 degrees as pi/2
and so on.
Radians and Degrees
Radians and Degrees
¨
¨
¨
¨
you’ll be using radians from here on out then get used to it and
live happily ever after.
But you’re going to encounter many situations where you’ll
need to use degrees with radians.
For example, say you have a vehicle that needs to turn in the
direction of its motion. If you figure out the motion using trig,
the angle you get will be in radians, but to rotate the vehicle,
you need degrees.
Here are the formulas:
Flash’s Coordinate System
¨
The most common 2D coordinate systems signify horizontal
measurements with x and vertical measurements with y.
Flash’s Coordinate System
¨
Flash, however, is based on a video screen coordinate system,
where 0, 0 is at the top left
Flash’s Coordinate System
¨
Let’s talk about measuring angles. In most systems, angles are
measured counterclockwise, with 0 degrees being shown as a
line extending into the positive x axis.
Flash’s Coordinate System
¨
Again, Flash has it backward.
Triangle Sides
¨
¨
¨
¨
Now talking about right triangles, where one of the angles is
90 degrees.
The two sides that touch the 90-degree angle are called legs.
The opposite side is called the hypotenuse.
The hypotenuse is always the longest side.
Trig Functions
¨
¨
The interesting thing about triangles is the relationships
between the measurements of the sides and the measurements
of the angles.
ActionScript has trig functions for calculating the various
triangle relationships
¤
¤
¤
¤
¤
¤
Sine
Cosine
Tangent
Arcsine
Arccosine
Arctangent
Sine
¨
¨
¨
The sine of an angle is the ratio of the angle’s opposite leg to
the hypotenuse.
In ActionScript, you can use the function Math.sin(angle).
For example, the sine of 30 degrees. The opposite leg has a
measurement of 1, and the hypotenuse has a measurement of
2. The ratio is thus ½ or 0.5.
Sine
¨
You can test this in Flash like so:
¨
That trace out
which is not even close to 0.5
¨
Can you spot the error?
Sine
¨
We forgot to convert to radians.
Here’s the corrected code, with the conversion:
¨
Now let’s move it into the world of the Flash coordinate system.
¨
So, we say that the sine of –30 degrees is –0.5.
¨
Cosine
¨
You can access cosine in Flash with Math.cos(angle).
Cosine is defined as the ratio of the adjacent leg of an angle
to the hypotenuse.
¨
The cosine of -30 degrees is thus 1.73/2, or 0.865.
¨
Cosine
¨
¨
¨
¨
Everything has been taken from the lower-left angle.
What if you looked at things from the viewpoint of the topright angle?
You’d need to reorient the triangle so
that the angle in question aligns with
the coordinate system
the sine of 60 degree is its opposite
leg over the hypotenuse, or 1.73/2
(0.865). And the cosine is the adjacent
over the hypotenuse, 1/2, or 0.5.
Tangent
¨
This is the relationship of the opposite leg to the adjacent leg.
¨
The ratio works out to –1/1.73, or –0.578. For more accuracy,
check it directly in Flash:
Arcsine and Arccosine
¨
¨
¨
¨
¨
All these do is the reverse of sine and cosine.
In other words, you feed in a ratio, and you get back an angle
(in radians).
The ActionScript functions are Math.asin(ratio) and
Math.acos(ratio).
OK, you learned that the sine of 30 degrees is 0.5. Thus, the
arcsine of 0.5 should be 30 degrees and the cosine of 30
degrees is roughly 0.865.
Try these
Arctangent
¨
Arctangent is the opposite of tangent.
For example, the tangent of 30 degrees is 0.577. Try this
¨
you have another function to check arctangent. But why?
¨
Arctangent
¨
¨
¨
Four different triangles: A, B, C, and D.
Triangles A and B have a positive x value
Triangles C and D extend into negative x dimensions.
Arctangent
¨
¨
triangles A and D are in the negative y space, while triangles
B and C have positive y measurements.
So, for the ratios of the four inner angles, you get this:
¤
¤
¤
¤
¨
¨
¨
A: –1/2
B: 1/2
C: 1/ –2
D: –1/ –2
or
or
or
or
–0.5
0.5
–0.5
0.5
So, say you divide your opposite leg by your adjacent leg and
come up with a ratio of 0.5.
You feed that in with Math.atan(0.5), convert it to degrees,
and you get approximately 26.57.
But which triangle are you talking about now: B or D?
Arctangent
¨
¨
¨
¨
Welcome Math.atan2(y, x).
This function takes two values: the measurement of the opposite
side and the measurement of the adjacent side.
Go ahead and try this
This should give you the angle, 26.565051177078, which is
correct for triangle B
Arctangent
¨
Try another
¨
This gives you the result of -153.434948822922.
Rotation
¨
¨
¨
¨
Here is the challenge: You want to rotate a sprite or movie clip
so that it always points to the mouse.
Rotation is a very useful tool. It can be used in games, mouse
trailers, those eyes that follow the mouse around the screen,
interface elements, and so on.
First, you need a something to rotate. This will be a sprite with
an arrow drawn in it.
In fact, since you might use this arrow sprite again, you’ll make
it in a class that extends the Sprite class:
Rotation
Rotation
¨
¨
¨
Now, whenever you need an arrow, you just say new Arrow()
The most important thing to remember when drawing any
content made to rotate like this is to make sure that it is
“pointing” to the right, or positive x axis. because this is how it
will look when rotated to 0 degrees.
You’ll be creating an instance of the Arrow class, placing it in
the center of the stage and having it point at the mouse.
Rotation
¨
¨
¨
¨
¨
The mouse position can always be read with the mouseX and
mouseY properties.
You can get the location of the arrow with x and y properties.
Subtracting these, you get the length of the two triangle legs.
Now, you need to use Math.atan2(dy, dx) to find the angle.
Then convert it to degrees and set the arrow’s rotation
property to the result.
Rotation
Of course, to get
animation, you need to
set up a loop.
¨ Make sure that you
have the Arrow.as file
in the same directory
as RotateToMouse.as
file and build the SWF
with RotateToMouse as
the document class.
¨
Rotation
¨
¨
¨
Now, suppose that you didn’t have Math.atan2.
You could get the ratio of opposite to adjacent angle by
dividing dy by dx and pass that in to Math.atan.
All you need to dois change the Math.atan2 line as follow
Rotation
¨
Try that one, and you’ll see the problem.
¨
If the mouse is to the left of the arrow, the arrow will not point
to it, but directly away from it.
¨
Can you figure out what is going on?
Sine Wave
¨
Have you ever heard the term sine wave before?
¨
It is the graph of the results of the sine function, when fed in all
the angles from 0 to 360 (or 0 to 2 pi in radians).
Smooth Up and Down Motion
¨
So what can you use Math.sin(angle) for?
¨
Have you ever needed to move something up and down or
back and forth smoothly?
¨
Instead of just going from 0 to 1 and –1 and back to 0, and
stopping there, multiply those values by some higher value, say
100, you have a stream of values that goes from 100 to -100,
back and forth.
Smooth Up and Down Motion
¨
The next document class, Ball.as
¨
You can pass in a radius and a color if you want. If not, it will
use the default arguments of 40 for the radius and red for the
color.
Smooth Up and Down Motion
¨
The Bobbing.as creates an instance of the Ball class, adds it to
the stage, and sets up an enterFrame listener that causes the
ball to bob up and down:
Smooth Up and Down Motion
Smooth Up and Down Motion
¨
¨
¨
¨
¨
¨
First, create an angle property and initialize it to 0.
In the onEnterFrame method, you take the sine of that angle
and multiply it by 50. This will give you a range of values from
50 to -50. Add that to the y position of the ball.
Then add 0.1 to the angle for the next time around. You get a
nice smooth up and down motion.
You’ll notice that changing the 0.1 to another value changes
the speed of the motion.
Changing the 50 changes how far the ball moves.
changing the stage.stageHeight / 2 to some other value
changes the point that it oscillates around.
Smooth Up and Down Motion
¨
You could abstract the values into variables like so
¨
By keeping the numbers out of the code, preferably up at the
top of the listing, you know exactly where all your variables
are.
Linear Vertical Motion
¨
In the Wave1.as file,
I added linear vertical
motion, just to give you
some inspiration for
your own animation.
Pulsing Motion
In the Pulse.as file,
We used the values
to affect the scale of
the ball instead.
¨
Waves with Two Angles
In the Random.as class,
it takes two angles and
applies one to the ball’s
x position and the other
to the y position.
¨
Waves with the Drawing API
Cosine Wave
¨
Sine and cosine basically end up being the inverse of each
other.
Circular Movement
¨
¨
you can use cosine in place of sine where all you need is an
oscillating motion.
But cosine actually has a much more common and useful
function in coordination with sine.
Circular Movement
¨
¨
¨
If you were to take the circle in Figure 3-20 and turn it so you
were looking straight at its edge from the right, you would just
see the object going up and down.
In this case, sine would be the appropriate function to use,
because if you look at the triangle formed, you are calculating
the length of y.
If you are looking at the circle from its bottom edge instead. In
this view, you see the object moving back and forth, left to
right. This time, you are calculating the length of x, so you
should be using cosine.
Circular Movement
Elliptical Movement
¨
¨
¨
¨
sometimes a perfect circle isn’t exactly what you need.
What you might be looking for is more of an oval or ellipse.
To make a more oval shape, all you need to do is use different
values for the radius when you calculate the x and y positions.
I call them radiusX and radiusY.
Elliptical Movement
Pythagorean Theorem
The theorem says A squared + B squared = C squared.
¨ The sum of the squares of the two legs of a right triangle is
equal to the square of the hypotenuse.
¨ The most common situation is
where you know the lengths of
the two legs and you want to
know the hypotenuse.
Specifically, you want to find
the distance between two points.
¨
Distance Between Two Points
¨
¨
Say you have two sprites on stage and you want to find out
how far apart they are.
You have the x and y positions of each of sprite. Let’s call the
position of one x1, y1, and the other x2, y2.
Distance Between Two Points
¨
Turn it into right triangle
Distance Between Two Points
¨
¨
¨
¨
dx is the distance between the two sprites on the x axis, and
dy is the distance on the y axis.
If you square both of these and add them together, you’ll get
the square of the distance.
In other words –62 + 82 = dist2.
And from that, you can easily figure out that the distance
between the two clips is 10.
Distance Between Two Points
Distance Between Two Points
¨
¨
Compile the movie, and you’ll get the distance between the
two sprites.
Each time you run it, the two sprites will be in different
positions.
Distance Between Two Points
Distance Between Two Points
¨
¨
dx and dy are calculated by subtracting the current mouse
position from sprite1’s position.
Test the file and move your mouse around.
Important Formulas in This Chapter
Important Formulas in This Chapter
Important Formulas in This Chapter
Summary
¨
for now, you know about sine, cosine, and tangent and their
opposites: arcsine, arccosine, and arctangent, as well as the
ActionScript methods to calculate each one.
¨
The next chapter covers some of the more common rendering
techniques for getting graphics on the screen, including the allimportant drawing API.