Inside Technique : Animation Toolkit : Creating Custom Paths

The sinus path object is based on the sinus wave. A sinus wave follows a path similar to the following (we are avoiding the mathematical lesson :-)

Path Objects

The sinus path is a Javascript object that extends the base path object and exposes the core properties and methods. First we create a basic template of the object that we will add functions to later.

function SinusPath() {
	this.x = 0;
	this.y = 0;
	this.step = int_step;
	this.reset = int_reset;
	
	//...
}

This represents the minimal implementation necessary to create a custom path. You need to write the int_step() and int_reset() functions that move the element to the next x and y position. Most path objects will require additional initialization parameters to set the starting x and y coordinate as well as any additional settings.

Initialization

First we start with a very brief lesson on sinus waves. This lesson identifies the arguments necessary to create the SinusWave constructor object.

The sinus function returns values in the interval [1,-1]. This value is multiplied by the amplitude. The period value represents how many waves you want in the SinusPath. The phase shift property allows the wave to start at a different point other than (0,0) (actually a different angle than 0).

We define the constructor to enable setting all of these parameters. This allows you to create a new SinusWave object as follows:

var p1 = new SinusPath(inLength, inAmplitude, inPeriod, inPhase, steps) 

Calling new SinusPath() executes the SinusPath function. This function initializes the SinusPath object, defines the x and y properties, and exposes the appropriate path properties and methods x, y, step(), and reset():

function SinusPath(length, amplitude, period, phase, steps) {
	this.x = 0;
	this.y = 0;	//This will be set later
	this.step = int_step;
	this.reset = int_reset;
	
	//Private members
	this.length = length;
	this.currentStep = 0;
	this.amplitude = amplitude;
	if (period > 0)
		this.period = period;
	else
		this.period = length;	// Gives one wave
	this.phase = phase;
	
	if (steps <= 0) {		// When steps are less than one there shouldn't
		this.totalSteps = 0;	// be any animation. Just set the position to
		this.x = this.length;	// the end position
	}
	else
		this.totalSteps  = steps;
	// Initialize the y value
	this.y = getY(this.currentStep,this.totalSteps,this.amplitude,this.length,this.period,this.phase);

In the constructor, the public step() and reset() methods are defined by the functions int_step() and int_reset(). Next we show you how these methods are written and used to position the element.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.