[ Prev | Main | Next ]

AnimatedGraph Applet

The AnimatedGraph applet shows the graph of a function that can depend on a parameter. The applet can animate the graph by displaying it for a sequence of parameter values. The user controls the animation using a strip of controls on the bottom of the applet. In the default configuration, with no applet params, there are input boxes where the user can specify the range of values for the parameter and the number of intervals into which this range is divided. (The number of frames is the number of intervals, plus one.)

Here is an example that uses some params. In this case, the applet is set up to show just one example:

In the applet tag for this example, I've turned off many features such as "UseFunctionInput" and "UseLimitsPanel". I've turned off "UseNextAndPrev" to get rid of the Next and Prev buttons, since there isn't room in this smaller applet for all five animation controls. The data for the example is set up using the "Function", "ParameterMin", "ParameterMax", "Intervals", and "Limits" params. Here is the tag:

   <applet archive="jcm1.0-config.jar" code="AnimatedGraph.class" width=320 height=320>
      <param name="Function" value="1 / (1+x^k)">
      <param name="ParameterMin" value="1">
      <param name="ParameterMax" value="50">
      <param name="Intervals" value="49">
      <param name="Limits" value="0 2 -0.1 1.1">
      <param name="UseFunctionInput" value="no">
      <param name="UseLimitsPanel" value="no">
      <param name="UseNextAndPrev" value="no">
      <param name="UseAnimatorInputs" value="no">
      <param name="PanelTitle" value="1 / (1+x^k), for k = 1 to 50">

Here is a version that appears as a button on the web page. In this version, the name of the parameter is "t", and I've changed the colors. In addition to the start-up function, several other sample functions are available. To load one, select it from the pop-up menu at the top of the applet and then click the "Load Example" button. Also, the applet has been set to respond to mouse actions on the canvas: click to zoom out, shift-click to zoom in, click-and-drag to draw a zoom box, and right-click and drag to pan.

The applet tag for this version of the applet is:

   <applet archive="jcm1.0-config.jar" code="AnimatedGraph.class" width=220 height=35>
      <param name="Parameter" value="t">
      <param name="UseMouseZoom" value="yes">
      <param name="UsePanner" value="yes">
      <param name="FrameSize" value="600 400">
      <param name="UseRestoreButton" value="yes">
      <param name="UseEqualizeButton" value="yes">
      <param name="UseZoomButtons" value="yes">
      <param name="BackgroundColor" value="0 0 180">
      <param name="ForegroundColor" value="150 0 0">
      <param name="PanelBackground" value="200 200 255">
      <param name="CanvasColor" value="black">
      <param name="AxesColor" value="lightGray">
      <param name="AxesLightColor" value="gray">
      <param name="BorderColor" value="gray">
      <param name="GraphColor" value="yellow">
      <param name="ParameterColor" value="white">
      <param name="LabelColor" value="white">
      <param name="XLabel" value="x">
      <param name="YLabel" value="y">
      <param name="Example1" value="Family of cubics; x^3 + t*x; -3 3 -3 3, -2 2 40, 2, 1">
      <param name="Example2" value="Tweening Example; 5*sin(x)*t + (5/(x^2+1))*(1-t); -6 6 -6 6, 0 1 50, 1, 1">
      <param name="Example3" value="Infinite Motion?; sin(pi*(x-t)); -2 2 -2 2, 0 2 50, 1, 1">
      <param name="Example4" value="Horizontal Scaling; sin(t*x); -5 5 -3 3, 1 3 40, 2, 1">
      <param name="Example5" value="Vertical Scaling; t * sin(x); -5 5 -3 3, 1 3 40, 2, 1">

Many of the applet params are processed by the source code in the base class, GenericGraphApplet. See the list of params for that class for information about those parameters. Here is a table of the additional applet parameters processed by AnimatedGraph, including the params from GenericGraphApplet whose default values are changed in AnimatedGraph:

Param Name Type Default Description
GraphColor Color magenta The color used to draw the graph.
Function String "x/(k-x^2)" If there is a function input box, this is its initial contents. If there is no function input box, then AnimatedGraph uses this value to define the function that is graphed when the applet starts. (Actually, the default doesn't use the names "x" and "k". It uses the name of the variable and of the first parameter.)
Parameter String k The name of the parameter, which can be used in function definitions in addition to the independent variable of the function.
UseAnimatorInputs yes/no yes If this is "yes", then there will be input boxes where the user can enter a starting and ending value for the parameter and the number of intervals into which this range of parameter values is divided. If there is a limit control panel, the animator inputs are added to the limit control panel. Otherwise, a separate panel is created to hold the animator inputs.
TwoLimitsColumns yes/no (see discussion) This parameter determines whether the applet will try to put the controls in the limit control panel into two columns instead of one. In GenericGraphApplet, the default value is "no". In AnimatedGraph, the default is "yes" if animator inputs are used and otherwise is "no". (Otherwise, there would be too many rows in the limit control panel.)
UseNextAndPrev yes/no yes If this is "yes", then "Next" and "Prev" buttons are included in the animation control strip at the bottom of the applet.
ParameterMin String -2 The starting value for the parameter in the animation. (Note that the value can be a constant expression, such as "pi/2" or "sqrt(2)").
ParameterMax String 2 The starting value for the parameter in the animation. Note that the value doesn't actually have to be greater than the value of "ParameterMin". (The value can be a constant expression, such as "pi/2" or "sqrt(2)").
Intervals integer 25 The number of intervals into which the range of parameter values is divided. The number of frames in the animation is this number, plus one.
ShowParameter yes/no yes If this is "yes", then the value of the parameter is displayed in a box in the lower left corner of the canvas.
ParameterColor color black The color in which the parameter value is displayed on the canvas. If the value of "ShowParameter" is "no", then this is ignored.
String (none) These params, if present, define examples that appear in an Examples menu at the top of the applet. You can define "Example1" whether or not you define "Example". However, you can only have an "Example2" if you have an "Example1", you can only have "Example3" if you have "Example2", and so on. An example takes the following form: First, a descriptive title that will appear in the example menu, followed by a semicolon. Second, a function definition that will be displayed (and put in the function input box, if there is one). This can be optionally followed by another semicolon and a list of four to nine numbers. The first four numbers give the x- and y-limits to be used for the example. If they are not present, then -5,5,-5,5 is used. The next three numbers specify the minimum value for the parameter, the maximum number, and the number of intervals in the animation. The eighth number, if present, specifies the starting loop style for the animation with the following code: 0 for once-through, 1 for loop, and 2 for back-and-forth. The ninth number, if present, tells whether to start the animation immediately upon loading. If it is 1, the animation is started. If it is not specified or is any value other than 1, the animation is not started. Numbers can be separated by spaces and/or commas.

[ Prev | Main | Next ]