Inside Technique : Animation Toolkit : Creating Custom Paths II

step() method

The step() method is the most important part of all path objects. When called it sets the x and y values along the path to the next step. It also should test whether the update was successful. We fail the step() if the whole path has been traversed already. For a sinus function, the y position is determined using the Javascript standard Math object for a sin function and the pi constant.

	
function int_step() {
 if (this.currentStep <= this.totalSteps && this.totalSteps > 0) {
  // Get next position
  this.x = this.currentStep / this.totalSteps * this.length;
  this.y = getY(this.currentStep,this.totalSteps,this.amplitude,this.length,this.period,this.phase);
  this.currentStep++;
  return true;
 } else
  return false;
}

function getY(currentStep,totalSteps,amplitude,length,period,phase) {
 // Calculate new Y position
 var q;
 if (totalSteps > 0)
  q = currentStep / totalSteps;
 else
  q = 0;
 return amplitude * Math.sin(2 * Math.PI * length/period * q  - phase/length*2*Math.PI);
}

When creating custom path objects, you can modify the step() function any way you desire. For example, a random animator can be easily created by creating a step() function that returns a random x and y position.

reset() method

The reset() method resets the x and y to the initial position and resets the currentStep counter. Once again we check the totalSteps to see where the initial position is.

function int_reset() {
 this.currentStep = 0;
 if (this.totalSteps > 0)
  this.x = 0;
 else
  this.x = this.length;
 this.y = getY(this.currentStep,this.totalSteps,this.amplitude,this.length,this.period,this.phase);
}

Inheriting from the base Path object

The last step is to add the line of code to inherit the extra interfaces from the base Path object class:

SinusPath.prototype = new Path()

Sample

Next we provide a demonstration of our custom SinusPath object.

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