Signature

xParaEq(e, xExpr, yExpr, totalTime)

Parameters

• e - an Element reference or ID string.
• xExpr - X expression (as a string).
• yExpr - Y expression (as a string).
• totalTime - the total duration of the animation in milliseconds. If it is zero then there is no timeout.

Define your own values to pass to xParaEq(). The same arguments are passed to each of the demo elements. The 'Reset' button repositions the demo elements.

Description

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 .008 (default value).

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 this assignment: element.stop = true;.

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.

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

xParaEq() is part of the X Library as of v3.15.3, in the file x_anim.js.

function xParaEq(e, xExpr, yExpr, totalTime)
{
  if (!(e=xGetElementById(e))) return;
  e.t = 0;
  e.tStep = .008;
  if (!e.timeout) e.timeout = 25;
  e.xExpr = xExpr;
  e.yExpr = yExpr;
  e.slideTime = totalTime;
  var d = new Date( )
  e.C = d.getTime();
  if (!e.moving) {e.stop=false; _xParaEq(e);}
}
function _xParaEq(e)
{
  if (!(e=xGetElementById(e))) return;
  var now = new Date();
  var et = now.getTime() - e.C;
  e.t += e.tStep;
  t = e.t;
  if (e.stop) { e.moving = false; }
  else if (!e.slideTime || et < e.slideTime) {
    setTimeout("_xParaEq('"+e.id+"')", e.timeout);
    var p = xParent(e);
    var centerX = (xWidth(p)/2)-(xWidth(e)/2);
    var centerY = (xHeight(p)/2)-(xHeight(e)/2);
    e.xTarget = Math.round((eval(e.xExpr) * centerX) + centerX) + xScrollLeft(p);
    e.yTarget = Math.round((eval(e.yExpr) * centerY) + centerY) + xScrollTop(p);
    xMoveTo(e, e.xTarget, e.yTarget);
    e.moving = true;
  }  
  else {
    e.moving = false;
  }  
}