Trigonometric Animations - Page 4
       by kirupa  |  2 October 2009

In the previous page, you saw how a simple animation using a trigonometric function can be created. In this page, we'll extend our example slightly and wrap things up.

Amplitude
Right now, the range of your oscillations goes between -1 and 1. This is because our Sine function is not being amplified:

this.scaleX=Math.sin(angle);

this.scaleY=Math.sin(angle);

To amplify the effects of the Sine function, simply add a multiplier to the front:

this.scaleX=5*Math.sin(angle);

this.scaleY=5*Math.sin(angle);

In the above example, I have a multiplier of 5 set. This means that the range of my oscillation now goes between 5 and -5. The effects of this are very noticeable because our circles are now being scaled five times their original size.

Here is a screenshot of what it looks like:

What is really nice about the amplitude is that you do not have to resort to using a constant value. You can choose to be more creative and have a multiplier that changes based on what the value of your angle and speed are.

Here is a change I made that causes my circles to have a bounce as they approach a small size:

this.scaleX=5/(angle+.1)*Math.sin(angle);

this.scaleY=5/(angle+.1)*Math.sin(angle);

 

this.alpha = angle/5;

Notice that the multiplier is a constant that gets divided by our angle. Just for kicks, the alpha property is being changed to be a fraction of the angle as well. This effect, which is close to what you saw on the first page, provides the illusion of something being dropped and bouncing before it rests.

Adjusting the Speed
The last topic on our menu has to do with adjusting the speed of the oscillation. The rate of the oscillation is determined entirely by your frame rate and how quickly the angle value is being incremented. The second part, how quickly the angle value is being incremented, is what we will dive a bit into.

The larger the value of the angle incrementer at any given frame, the faster your oscillation will complete a full cycle from 0 to 2PI. The smaller the value of your angle incrementer at any given frame, the longer your oscillation will take to complete. Kind of makes sense because you are now going from 0 to 2PI in less time.

Here is an example where I adjust the angle's increment size using a random number:

package {

import flash.display.*;

import flash.events.*;

import flash.geom.*;

 

public class ColorfulCircle extends MovieClip {

 

var angle:Number=0;

var speed:Number=0;

var randomIncrement:Number = 0;

 

public function ColorfulCircle() {

speed=.1+Math.random();

randomIncrement = .2 + Math.random();

this.alpha= speed;

 

this.addEventListener(Event.ENTER_FRAME, flyCircleIn);

}

 

function flyCircleIn(e:Event) {

this.scaleX=5/(angle+.1)*Math.sin(angle);

this.scaleY=5/(angle+.1)*Math.sin(angle);

 

this.alpha = angle/5;

 

if (angle<=2*Math.PI) {

angle+= randomIncrement/5;

} else {

angle=0;

}

}

}

}

Once you make the three changes to your code, save the ColorfulCircle file, and test your application by pressing Ctrl + Enter. Notice now that the variation in how long your circles take to finish their cycles is more varied than it was before.

When fiddling with the angle, there is one thing you should avoid doing. Do not directly manipulate the value of the angle inside the trigonometric function as follows:

this.scaleX=5/(angle+.1)*Math.sin(2*angle);

this.scaleY=5/(angle+.1)*Math.sin(2*angle);

The reason is that you may have other code that relies on this value being untouched. For example, we have some code that resets the value of angle when it hits 2PI. If you manipulate the angle inside the trigonometric function, you need to make sure to adjust that value accordingly everywhere else. Otherwise, you will fall out of sync where your trigonometric function's value is out of touch with all other areas the angle is being used.

My preference is to make any tweaks to the area where you are actually incrementing your angle...such as what you see in my example. This ensures that you minimize any additional tweaks and fix-ups you need to make to ensure consistency.

Conclusion
I hope this tutorial helped unlock the mysteries of trigonometric functions and how easy they are to use in animations. If you have been following this site for a while, you will probably realize that almost all of the animation based tutorials I have written have either a Cosine or Sine at the center, so this tutorial is in many ways, very VERY late to the party.

If you are curious to see my implementation of the example you were working on, please download it below:

Download Flash CS4 Source

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

1 | 2 | 3 | 4