JavaScript Examples

Applet Interface

Animator may be embedded within your own web page with the following HTML tags:

<applet code="Animator.class" width=600 height=400>
<PARAM NAME="dt" VALUE=0.1>
<PARAM NAME="FPS" VALUE=20>
<PARAM NAME="gridUnit" VALUE=10>
<PARAM NAME="helpFile" VALUE="AnimatorHelp.html" >
<PARAM NAME="pixPerUnit" VALUE=10>
<PARAM NAME="showControls" VALUE=true>
<PARAM NAME="trail" VALUE=10>
<PARAM NAME="xFunc" VALUE="sin(t)" >
<PARAM NAME="yFunc" VALUE="cos(t)" >
</APPLET>

where dt is the time step and FPS is the frames per second. These parameters may need to be adjusted to produce smooth animation on less powerful computers. GridUnit specifies the grid spacing. If gridPerUnit is set to zero the grid will not be drawn. The ShowControls parameter is designed to reduce the screen size of the Applet. This parameter allows the HTML programmer to hide the buttons displayed at the bottom of the applet. JavaScript can be used to add objects to the applet. The trail parameter determines the number of points that make up the trail behind the shape.

Animator may be scripted using the following Java method calls:

• addArrow(String hStr, String vStr, String xStr, String yStr)
  An arrow, i.e., a vector, that moves according to the functions x(t)=xStr and y(t)=yStr.  The horizontal, hStr, and vertical, vStr, components can be functions of time to allow for rotating vectors.
• addCircle(int size, String xStr,String yStr)
  A circle that moves according to the functions x(t)=xStr and y(t)=yStr. The size s is in pixels.  The method replaces the addShape method in previous verions.
• addLine(String hStr, String vStr, String xStr, String yStr)
  An line segmentthat moves according to the functions x(t)=xStr and y(t)=yStr.  Behaves similar to arrow. The horizontal, hStr, and vertical, vStr, components can be functions of time to allow for rotating lines segments.
• addParametricCurve(int n, double start, double stop, String xStr, String yStr)
  Add a parametric curve defined by the functions x(t)=xStr and y(t)=yStr. N points will be drawn starting at s=start and ending at s=end.
• addPolyShape(int n, String hStr, String vStr, String xStr, String yStr)
  Add an arbitray shape having n vertex points. Can be used to add moving triangles, rotated rectangels and other arbitray shapes to the animation. Notice: The x and y vertex points are passed to the physlet as String variables (i.e., not arrays) since this data type is common to Netscape and Internet Explorer. The Shape will moves according to the functions x(t)=xStr and y(t)=yStr.
• addRectangle(int w,int h, String xStr,String yStr)
  A rectangular shape that moves according to the functions x(t)=xStr and y(t)=yStr. The width, w, and height, h, are in pixels.
• addText(String text, String xStr,String yStr)
  A text that moves according to the functions x(t)=xStr and y(t)=yStr. Can be used to label moving shapes since the text is drawn last.
• deleteAll()
  Remove all rectangles, arrows, and circles from the animator.
• forward()
  Run animation with positive time step.
• pause()
  Pause the animation.
• reset(double time)
  Set time.
• reverse()
  Run animation with negative time step.
• setCaption(String caption)
• setInterval(double start, double stop)
  Time will reset to the start value whenever time exceeds the stop value.
• setShapeCoord(int val)
  Display the coordinates of a circle, rectangle or vector.  Call this method BEFORE you add the object.  All objects added will display their coordinates according to the following:  val=0, not coordinate display; val=1, coordinate display above the object; val=2, coordinate display to the right of the object; val=3, coordinate display below the object; val=4, coordinate display to the left of the object.
• setShapeCoord(int val)
  Display the coordinates of a circle, rectangle or vector.  Call this method BEFORE you add the object.  All objects added will display their coordinates according to the following:  val=0, not coordinate display; val=1, coordinate display above the object; val=2, coordinate display to the right of the object; val=3, coordinate display below the object; val=4, coordinate display to the left of the object.
• setShapeRGB(int r, int g, int b)
  Sets the fill color for new shapes.
• setShapeTrail(int n)
  Sets the trail length for new shapes. May cause unpredicable results due to a change in syntax between Java 1.02 and Java 1.1.
• stepBack()
  Step the animation back by negative dt.
• stepForward()
  Step the animation back by negative dt.
• start()
  Start animation thread. It is usually better for the JavaScript programmer to call forward()or reverse() and let the browser manage the thread.
• stop()
  Stop the animation thread. It is usually better to for the JavaScript programmer to call pause() and let the browser manage the thread.
• shiftPixOrigin(int xo, int yo)
  Shift the origin, i.e., x=0 and y=0 point, away from the center of the applet.   Example: shiftPixOrigin(-100, 30) will shift the origin 100 pixels to the left and 30 pixels up.

Use the codebase tag if the Animator.class file is in a different directory than the HTML page that uses the applet. (See applet documentation from Sun.) As of version 1.15, Animator is a package named animator. It should be in a subdirectory called "animator." All Java packages used by Animator, such as the graph package which contains the parser class, must be in subdirectories at the same level as the animator package.

Animator20a.zip may be downloaded for noncommercial use by students and faculty at accredited not-for-profit educational institutions. The zip file being distribted is uncompresssed. You should keep copies of the uncompressed class files in the class directory so that browers that do not support the archive tag will be able to run the applet.

Animator was written using Java 1.01. It will be rewritten as a Java "Bean"using the newer (and better) Java event model avaliable in Java 1.1.