multiParameterAnimation

To use the oslet -- multiParameterAnimation in your own Web page you must do two things:

Creating the Code that Calls the Oslet by Using a Form

  1. Click here to open a new window with the necessary form. Arrange this window and the new window so that you can move easily back-and-forth between them.

  2. Fill in the top part of the form -- the name of your new page and its window, the number of functions to be shown (up to three), and the number of parameters (up to four).

  3. Fill in the next part of the form. This part describes the axes and grid on which the curves representing the functions will be graphed. Notice that the labels may be different than the values for the low and high end of each axis.

  4. Fill in the next part of the form. This part describes the functions (up to three) that will be graphed -- for example,

    sin(p1 * x + p2)

    The letter x always denotes the independent variable and p1, p2, p3, and p4 always denote the four function parameters. This Oslet uses the Lingo parser to evaluate this function.

    • The Lingo parser uses a * b to denote multiplication.

    • The Lingo parser uses power(a, b) to denote ab.

    • The Lingo parser uses abs, atan, cos, exp, log, sqrt, sin, and tan for the obvious functions and pi for the constant pi. Trigonometric functions use radians and log is the natural logarithm.

    • The Lingo parser uses integer to round a real (floating point) number to an integer and mod(a, b) to compute a modulo b.

    • Although the Lingo parser computes a/b using integer division if both a and b are integers, this program preprocesses the string defining a function to compute a * 1.0 / b so that, in effect, real division is used. For example, 1/3 is 0.333333 rather than 0.

    The function indicator(x, a, b) is defined by:

    and can be used to define piecewise functions as shown in the following example

    indicator(-99999, 0, x) * sin(2 * x) + indicator(0, 99999, x) * sin(x)



  1. Fill in the next part of the form. This part describes the range of each of the (up to four) function parameters, their initial values, the labels to be used on the controls. One of these labels is the external notation used for each parameter. Internally, we always use p1, p2, p3, and p4 but other notation may be specified for the display. NOTE: Whatever notation is used for the display, the functions specified in the preceding part of the form must always use p1, p2, p3, and p4.

  2. Fill in the next part of the form. This part describes any scatter plot data that you would like displayed. Follow the instructions in the form. If you do not want any scatter plot data displayed enter none. Note this is the default when the form first opens.

  3. Fill in the last part of the form, specifying the colors to be used for the background, the grid, the axes, and the (up to three) curves representing the functions. Each of these colors is described using three integers from 0 to 255 inclusive. The three integers represent the intensity of red, green, and blue. White is represented by the three integers 255, 255, and 255 and black by the three integers 0, 0, 0.

  4. Next click the Try it!! button to see the page you've created. If necessary, you can make corrections back in the form and click the Try it!! button again.

  5. Finally, when you are satisfied with the results, choose View Source in your browser for the window that you just created and copy the code into your favorite editor for use in your own Web page.

A Matter of Style and Robustness

We recommend that you open pages with multiParameterAnimation in their own window with just the live graph and a very small amount of supporting material. This makes it much easier for users to manage their screen real estate. It also improves robustness. We have seen situations in which a browser does not handle scrolling well with these components.