Circles and Ellipses

Now that youve mastered sine waves, lets move on to their lesser-known cousins, cosine waves. These are formed in the same way as sine waves, but use the cosine function instead of sine. If you recall from the earlier discussion about how sine and cosine basically end up being the inverse of each other, you wont be surprised to learn that the two waves form the same shape, but in a different position. Figure 3-19 shows a cosine wave.

Figure 3-19: A cosine wave

This shows that the cosine of 0 is 1, and as it moves through to 2 pi radians or 360 degrees, it goes to 0, ˆ 1, 0, and then back to 1. So, its essentially the same curve as produced by the sine wave, just shifted over a bit.

Circular movement

It goes without saying that you can use cosine in place of sine in just about any situation where all you need is an oscillating motion. But cosine actually has a much more common and useful function in coordination with sine: moving an object in a circle. Figure 3-20 shows an object at several points as it moves around a circle.

Figure 3-20: Positions of an object as it moves around a circle

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. Its center would be the center of the circle, and its range would be the radius of the circle. You would calculate its position just as you did in the first sine experiment: by taking the sine of the angle times the range. 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 ythe leg opposite the angle.

Now, imagine that 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 xthe leg adjacent to the angleso you should be using cosine.

The important thing to realize is that these calculations are operating off the same angle, unlike the random.fla example you saw earlier, which used two different angles to compute the x and y positions. You just use sine to calculate y and cosine to calculate x. Heres how it looks in ActionScript:

 angle = 0; centerX = 270; centerY = 200; radius = 100; speed = .1; onEnterFrame = function(){       ball._x = centerX + Math.cos(angle) * radius;       ball._y = centerY + Math.sin(angle) * radius;       angle += speed; } 

You can create this example yourself, or open circle.fla , which has all the work done for you. Test it and verify that you do indeed have a perfect circle.

Notice that the range in both cases is the hypotenuse of the triangle, and its equal to the radius of the circle. Thus, I changed range to radius , to reflect that fact.

All the code is doing is using cosine to get the x position and sine to get the y position. You should get very used to those relationships. In Flash, almost any time you are talking about x, you should immediately think cosine, and you should almost always connect y with sine. In fact, spend as much time as you need to fully understand that last bit of code. It is going to be one of the most useful tools in your ActionScript animation toolbox.

Elliptical movement

While circles are lovely, sometimes a perfect circle isnt exactly what you need. What you might be looking for is more of an oval or ellipse. The problem is with the radius. It makes the ranges of the x motion and y motion the same, which is why you get a circle.

To make a more oval shape, all you need to do is use different values for radius when you calculate the x and y positions. I call them radiusX and radiusY . This is probably a horrendous choice of terminology from a strict geometric viewpoint, but it is simple, straightforward, and easy to remember and visualize. So I stick by my variable names . And heres how they fit in, as Ive included in oval.fla :

 angle = 0; centerX = 270; centerY = 200; radiusX = 200; radiusY = 100; speed = .1; onEnterFrame = function(){       ball._x = centerX + Math.cos(angle) * radiusX;       ball._y = centerY + Math.sin(angle) * radiusY;       angle += speed; } 

Here, radiusX is 200, which means that ball is going to go back and forth 200 pixels from centerX as it circles around. radiusY is 100, which means it will go up and down only 100 pixels each way. So, now you have an uneven circle, which is not a circle at all anymore, but an ellipse.