multiParameterAnimation Shock Wave Lite Applet
The Shock Wave Lite Applet multiParameterAnimation can be used to study families of functions with up to four parameters. Click here to open a new window with an example showing how it can be used. This example shows the family of functions
f(x) = A cos(w(x - d)) + c
As a curriculum developer you can control the range of the x and y variables and the names and ranges of the four parameters. Each parameter is controlled by one of the four vertical controls. The user can use these controls in two different ways to study the effect of the parameters.
- By clicking on a vertical control the user can change the value of the corresponding parameter.
- By clicking on the blue Animate Parameter button below a vertical control the user can start an animation showing what happens as the corresponding parameters varies over its range. The values of the other three parameters remain constant. The user can stop an animation by clicking the red Stop button.
To use the Shock Wave Lite Applet -- multiParameterAnimation in your own Web page you must download the file multiParameterAnimate.dcr and put it in the same directory as the html file for your web page. To download a file Option-click the link in MacOS or right-click and choose the appropriate option in Windows. The following paragraphs describe the html code that must be included in your html page. The screen shot below shows the html code for an example. To use this example you would include all the code between the lines open and close body tags.
This Shock Wave Lite Applet uses nine parameters. Because of incompatibilities among different browsers the parameters must be included twice, in two different forms. Each form works on some but not all browsers. You must follow the forms exactly. The two forms are highlighted in red and blue in the screen shot above.
- sw1 -- this parameter is of the form [xLow, xHigh, xTicks] and specifies the range of the variable x and the distance between the vertical grid lines.
- sw2 -- this parameter is of the form [yLow, yHigh, yTicks and specifies the range of the variable y and the distance between the horizontal grid lines.
- sw3 -- this parameter is of the form [p1Low, p1High, p1Initial] and specifies the range of the first parameter and its initial value.
- sw4 -- this parameter is of the form [p2Low, p2High, p2Initial] and specifies the range of the second parameter and its initial value.
- sw5 -- this parameter is of the form [p3Low, p3High, p3Initial] and specifies the range of the third parameter and its initial value.
- sw6 -- this parameter is of the form [p4Low, p4High, p4Initial] and specifies the range of the fourth parameter and its initial value.
- sw7 -- This parameter is an expression defining the function. The letter x always denotes the independent variable and p1, p2, p3, and p4 always denote the four parameters. This Shock Wave Lite Applet uses the Lingo parser to evaluate this function. The Lingo parser has some features that can cause difficulty. Be sure to follow the following practices.
- Avoid fractions written in the form a/b where the numerator and denominator are both integers -- write 1.0/3.0, for example, instead of 1/3.
- Use the notation pwr(b, y) for by.
You can graph up to two additional curves. The additional curves are specified in sw7 and separated from each other and the original curve using colons - for example, cos(x):p1 * cos(p2 * (x - p4)) + p3 -- would display two curves. The two curves share the same parameters and are drawn from left-to-right.
- sw8 -- This parameter is one long string with 16 labels separated by colons. It has the form
and specifies labels for the low and high end of the x-axis, the y-axis, and the four vertical controls for the parameters. It also specifes label for the four parameters. Note that internally the four parameters are always denoted p1, p2, p3, and p4 but the controls usually have other labels.
- sw9 -- This parameter specifies colors for the background, the grid lines, the axes, and the graph. It has the form
[backgroundRed, backgroundGreen, backgroundBlue, gridRed, gridGreen, gridBlue, axesRed, axesGreen, axesBlue, curveRed, curveGreen, curveBlue]
where each entry is an integer between 0 and 255. The default colors are shown in the example. If additional curves are drawn their colors are specified in the same way and added at the end of this list.