There are three basic ways
to animate a graph:
Experiment with these buttons to see what they do.
Internal Structure of a Graph
In order to animate a graph, you need to know a little about how one is put together.
A "graph" is really just a set of "div" tags (G1, G2, ...) and "styles" (#G1, #G2, ...) that become part of the document. When
divgraph() is executed, it creates four structures,
These four arrays save the critical information needed to redisplay every graph on the page.
Each new graph gets a new index in
and this entry includes, among other things, the following key pieces of information:
the first div associated with this graph
the first div associated with this graph's data (drawn points)
the last div associated with this graph's data (drawn points)
the first div associated with this graph's additional points (from Info.maxaddpoints)
the last div associated with this graph's additional points (from Info.maxaddpoints)
the last div associated with this graph
Three arrays also store the data for the divs:
the x-coordinate of the div (in document coordinates)
the y-coordinate of the div (in document coordinates)
the text for the div
You might think that a browser would save all this information on its own, and Internet Exporer does, but some versions of Netscape don't, or, if they do,
they lose the information when resizing. By running through these three arrays, one can determine and change any of the quantities.
Moving and Writing to Graph Points
The first row of buttons shown above activate a function animate(), which runs through all of the graph
data points, shifting them by a specified offset in a specified direction. In order to do this, the
GRdivmove() with parameters indicating the number of the
point to move and its new x and y positions. The index into GR.List is 1 (one), because there is only
one graph on the page.
The first row of buttons, then, serve to activate this function.
<input type=button value="<<<<<" onclick="animate(-1)">
<input type=button value=Stop onclick="animate(0)">
<input type=button value=">>>>>" onclick="animate(1)">
Overwriting a Graph
The buttons on the second row, which change the function to a totally new function,
work by actually writing a new function to the graph. In effect, the drawing is
redone using the same points, writing them into their new positions. This is a simple
task, just requiring a call to GRdrawgraph() with the added parameter Info.overwrite = 1.
This indicates that the points to use are already present; only a moving or rewriting (if the text has changed) is
necessary. On this page, this is accomplished using the function dograph().
Info.overwrite = 1
This function, called with parameters "sin(x)*10" and 0, is used initially to display the graph. The buttons above
then call it with a new function and a second parameter of 1.
<input type=button value=cos(x)^2*5 onclick="dograph('(cos(x))^2*5',1)">
<input type=button value=sin(x)*x onclick="dograph('sin(x)*x',1)">
<input type=button value=sin(x)*10 onclick="dograph('sin(x)*10',1)">
copyright 2001 Robert M. Hanson. All rights reserved. divgraph.js is freely distributable for noncomercial purposes, provided reference is made as "divgraph.js was developed at St. Olaf College by Robert M. Hanson (http://www.stolaf.edu/people/hansonr/divgraph)." Commercial licensing is available for specific purposes.