These two classes create a wave form made up of one or more sine waves. The waves are all added together and dawn as a single composite wave.
The example below shows one SineWave. Clicking the mouse on the example adds another. Notice how the wave changes with each click. The effect is caused by adding waves. This is similar to audio waves or water.
[kml_flashembed movie=”http://webdevils.com/examples/SinWave/DrawSine_Example.swf” height=”200″ width=”400″ /]
The two classes are SineWave and DrawSine.
The SineWave class defines a sine wave. The class defines properties of a single sine wave. The SineWave class has properties for phase, cycles, radius and increment.
To make a new SineWave use the following syntax:
my_sine = new SineWave( phase:Number, cycles:Number, radius:Number, increment:Number );
Sinwave defines the following properties:
- phase:Determines where along the cycle the wave begins.
- cycles: Sets the number complete Sine waves that are drawn within the width.
- radius: Sets the height of the wave in pixels. The wave extends this amount above and below it’s center.
- inc: Use this value to increment the phase of a wave.
The second Class is the DrawSine class. This class draws a composite wave form made of any number of SineWaves. The constructor defines the width and height of the wave and the number points used to draw the wave. It also has a draw_waves() method that takes an array of SineWaves as a parameter. DrawSine draws a single wave form made from a composite of all the SineWave objects in the array. DrawSine can draw a filled shape or only a stroke.
Use the following syntax to make a new DrawSine object:
draw_sine = new DrawSine( _mc:MovieClip, width:Number, height:Number, steps:Number )
- _mc: Set the movie clip instance the wave will be drawn in.
- width: Set the width of the drawn wave.
- height: Set the height of the wave.
- steps: Set the number of points used to draw the wave.
The following would create new DrawSine object that will draw it’s wave in the movie clip sin_mc. The wave would be 550 pixels wide and have a height of 400. The wave would be drawn using 200 points.
var wave = new DrawSine( sin_mc, 550, 400, 200 );
set_stroke( stroke_weight:Number, stroke_color:Number )
The set_stroke method sets the stroke weight and color that is used to draw the wave. Setting stroke weight to 0 will cause DrawSine to NOT draw the stroke. The following would set the stroke to 3 pixels and give it a color of medium green.
wave.set_stroke( 3, 0x006600 );
The following would turn off the stroke by setting the weight to 0;
wave.set_stroke( 0, 0x006600 );
set_fill( show_fill:Boolean, fill_color:Number, fill_alpha:Number )
The set_fill() method turns the fill on or off and sets the fill color and alpha of the fill. Setting show_fill to true causes the DrawSine object to draw a box to the height set in the constructor. The following line would draw a dark green 100% alpha fill.
wave.set_fill( true, 0x009900, 100 );
Turn the fill off like this:
wave.set_fill( false, 0x009900, 100 );
draw_waves( wave_array:Array )
Use the draw_waves method to draw a composite wave made up of any number of SineWaves. Pass an array of SineWave objects. For example the following defines three new SineWave objects and then draws them.
// Make three sine waves SineWave( phase, cyclse height, inc )
var sin_0 = new SineWave( 0, 3, 20, 0 );
var sin_1 = new SineWave( 0, 1, 20, 0 );
var sin_2 = new SineWave( 0, 6, 20, 0 );
// Draw a composite wave made of the three SineWaves
wave.draw_waves( [ sin_0, sin_1, sin_2 ] );
To animate the waves call draw_waves periodically, with onEnterFrame for example. The following code defines three waves and animates them.
// Make and animate three SinWaves
var sin_array = new Array();
sin_array.push( new SineWave( 0, 3, 20, .1 ) );
sin_array.push( new SineWave( 0, 1, 20, .1 ) );
sin_array.push( new SineWave( 0, 6, 20, .1 ) );
// Animate the waves
this.onEnterFrame = function() {
for ( p in sin_array ) {
sin_array[p].phase += sin_array[p].inc;
}
wave.draw_waves( sin_array );
}
The following example defines 12 waves each with random properties. Then it animates all 12 waves. In this example the wave is drawn with a fill and stroke.
// 6 SineWaves with random properties
var sin_array = new Array();
for ( var i = 0; i < 12; i ++ ) {
sin_array.push( new SineWave( Math.random() * Math.PI * 2, Math.random() * 36, ( Math.random() * 20 ) + 1, Math.random() - .5 ) );
}
// Set stroke weight and fill
wave.set_stroke( 3, 0x006600 );
// Set a fill, fill color ad fill alpha.
wave.set_fill( true, 0x009900, 100 );
// Animate the waves
this.onEnterFrame = function() {
for ( p in sin_array ) {
sin_array[p].phase += sin_array[p].inc;
}
wave.draw_waves( sin_array );
}