TRIGONOMETRY FOR ANIMATION

Transcription

1 TRIGONOMETRY FOR ANIMATION

2 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.

3 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.

4 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.

5 Radians and Degrees A radian is equal to approximately degrees. A full circle, or 360 degrees, works out to radians. Still not making any sense? Well, remember pi - that symbol, π? That is equal to about , meaning that a circle ( 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.

6 Radians and Degrees

7 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:

8 Flash s Coordinate System The most common 2D coordinate systems signify horizontal measurements with x and vertical measurements with y.

9 Flash s Coordinate System Flash, however, is based on a video screen coordinate system, where 0, 0 is at the top left

10 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.

11 Flash s Coordinate System Again, Flash has it backward.

12 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.

13 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

14 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.

15 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?

16 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.

17 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

18 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.

19 Tangent This is the relationship of the opposite leg to the adjacent leg. The ratio works out to 1/1.73, or For more accuracy, check it directly in Flash:

20 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 Try these

21 Arctangent Arctangent is the opposite of tangent. For example, the tangent of 30 degrees is Try this you have another function to check arctangent. But why?

22 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.

23 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 or 0.5 B: 1/2 or 0.5 C: 1/ 2 or 0.5 D: 1/ 2 or 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 But which triangle are you talking about now: B or D?

24 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, , which is correct for triangle B

25 Arctangent Try another This gives you the result of

26 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:

27 Rotation

28 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.

29 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.

30 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.

31 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

32 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?

33 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).

34 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.

35 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.

36 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:

37 Smooth Up and Down Motion

38 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.

39 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.

40 Linear Vertical Motion In the Wave1.as file, I added linear vertical motion, just to give you some inspiration for your own animation.

41 Pulsing Motion In the Pulse.as file, We used the values to affect the scale of the ball instead.

42 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.

43 Waves with the Drawing API

44 Cosine Wave Sine and cosine basically end up being the inverse of each other.

45 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.

46 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.

47 Circular Movement

48 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.

49 Elliptical Movement

50 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.

51 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.

52 Distance Between Two Points Turn it into right triangle

53 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 = dist 2. And from that, you can easily figure out that the distance between the two clips is 10.

54 Distance Between Two Points

55 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.

56 Distance Between Two Points

57 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.

58 Important Formulas in This Chapter

59 Important Formulas in This Chapter

60 Important Formulas in This Chapter

61 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.