Parametric Equation Method

I developed the parametricEquation() method after studying the parametric equation examples by Sebastien Chevrel.

On this page there are three positioned elements. E1 contains a flag image and it's parentNode is document.cbe. E2 contains E3. E3 contains a flag image and it's parentNode is E2. E1 and E3 are draggable. E2 is draggable and resizeable. When you click the Start button below, the values in the fields will be passed as arguments to the parametricEquation() methods of both E1 and E3.

The Parameters

X(t) and Y(t) are expressions that generate the x and y coordinates during the slide. These expressions are evaluated with the javascript eval() function. Within the expression you may use any valid sub-expression that eval allows and that is in scope. For example, you may call methods of the Math object such as Math.sin(), Math.cos(), and Math.tan(). You may also reference any global variables or functions.

One variable that is within scope for your expression is the parameter t. That is, t is the argument to the equations you provide. At each iteration, the variable t increments by the value of this.tStep (default value of .008).

The Time argument to parametricEquation() specifies the total time for the slide in milliseconds. If the value is zero, the slide will not timeout. You can stop any slide, at any time, by calling the method stopSlide().

Top

The Coordinate System

The values from your expressions are plotted on a coordinate system with it's origin at the center of the sliding element's container. The coordinates are then translated by the element's container's scrollLeft and scrollTop values. So the animation will remain visible if the user scrolls or resizes the element's container. Here's how x and y are calculated:

  this.xTarget = Math.round((eval(this.exprX) * centerX) + centerX);
  this.xTarget += this.parentNode.scrollLeft();
  this.yTarget = Math.round((eval(this.exprY) * centerY) + centerY);
  this.yTarget += this.parentNode.scrollTop();

Top

Sample Expressions

This doesn't define a circle, as you might think, it defines the ellipse bounded by the containing element's width and height.
X(t) = Math.cos(t*4)
Y(t) = Math.sin(t*4)
Run  Stop

This is a horizontal sine wave. It has a frequency of 2/2 or 1, which means it will trace out one sine wave within the width of it's container.
X(t) = Math.cos(t)
Y(t) = Math.sin(t*2)
Run  Stop

This is a vertical sine wave with a frequency of 8/2 or 4, so it will make four cycles within the height of it's container. It's axis is shifted to the left by half of it's original position (the center of it's container).
X(t) = Math.cos(t*8)-.5
Y(t) = Math.sin(t)
Run  Stop

This is a horizontal sine wave with a frequency of 6.5 (notice the difference between even and odd frequencies). It has an amplitude of .5 which represents half the height of the element's container.
X(t) = Math.cos(t)
Y(t) = .5*Math.sin(t*13)
Run  Stop

This executes a spiral, beginning at the center of the element's container.
X(t) = .2*t*Math.cos(t*30)
Y(t) = .2*t*Math.sin(t*30)
Run  Stop

As I've played with parametricEquation() I've realized that there are several things that need to be done to it. But later... ;)