Sample Configurable JCM Applet: Derivatives

[ Prev | Main | Next ]

Derivatives Applet

The Derivatives applet shows the graphs of a function and of its first derivative. (It can be configured with an applet param to show the second derivative as well.) A tangent line is drawn on the graph. The x-coordinate of the point of tangency is controlled by an input box and a slider below the graphs. The formula for the derivative function is displayed. (This display can be turned off with an applet param.) Some of the formulas look a bit strange. For example, check the derivative of abs(x). Here is the applet, with no applet params:

The button below will launch a version of the applet in its own window. This version shows the second derivative, and it does not show the derivative formula. The applet is configured to allow mouse interaction on the canvas (click, shift-click, click-and-drag, and right-click-and-drag). I've turned off the limit control panel, since the three graphs already require a very wide applet. However, there is a "Restore Limits" button that can be used to restore the coordinate limits on the graph after they have been changed with the mouse.

Note that I added a function T(x) to this applet. It can be used in expressions like any other function .This function is defined by a table of values. It uses cubic interpolation between values specified in the table, so the second derivative consists of line segments, and the segments in the first derivative are arcs of parabolas. There is also another function, P(x), defined in this applet. This function uses linear interpolation between points. This applet was created using the applet tag:
   <applet archive="jcm1.0-config.jar" code="Derivatives.class" width=200 height=35>
       <param name="FrameSize" value="630 320">
       <param name="SecondDerivative" value="yes">
       <param name="ShowFormula" value="no">
       <param name="UseLimitsPanel" value="no">
       <param name="UseRestoreButton" value="yes">
       <param name="TextBackground" value="225 225 225">
       <param name="UseMouseZoom" value="yes">
       <param name="UsePanner" value="yes">
       <param name="Define" value="T(x) = table intervals 5 -5 5 2 0 -1 2.5 4 -2">
       <param name="Define1" value="P(x) = table linear intervals 5 -5 5 2 0 -1 2.5 4 -2">
       <param name="Function" value=" T(x)">
   </applet>
The final version of the applet is set up as a gallery of examples:

The applet tag for this version of the applet is:
   <applet archive="jcm1.0-config.jar" code="Derivatives.class" width=500 height=320>
       <param name="ShowFormula" value="no">
       <param name="UseLimitsPanel" value="no">
       <param name="ShowGraphLabels" value="no">
       <param name="TextColor" value="150 0 0">
       <param name="TextBackground" value="255 240 180">
       <param name="GraphColor" value="black">
       <param name="UseLoadButton" value="no">
       <param name="Example1" value="Simple polynomial: x^3 - 3*x; x^3 - 3*x; -3 3 -3 3 2">
       <param name="Example2" value="The cube root function; cubert(x); -2 2 -2 2 0.5">
       <param name="Example3" value="An old standby example: abs(x)^x; abs(x)^x; -3 3 -3 3 0">
       <param name="Example4" value="An integer-valued function: round(x); round(x); -6 6 -6 6 1">
       <param name="Example5" value="How about x*round(x) ?;  x*round(x); -5 5 -20 20 1">
       <param name="Example6" value="And x^2*round(x) ??;  x^2*round(x); -5 5 -100 100 1">
   </applet>
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 applet parameters processed by the Derivatives applet:

Param Name Type Default Description

FunctionName string f The name of the function that is being graphed. This is used in various labels where the name of the function is needed. For example, in "f'(x)=", the "f" is taken from the "FunctionName" just as the "x" is taken from the "Variable".

SecondDerivative yes/no no If this is yes, then a graph of the second derivative is shown, in addition to the graphs of the function and its derivative.

ShowFormula yes/no yes If this is yes, then the formula for the second derivative is shown at the bottom of the applet.

ShowGraphLabels yes/no yes If this is yes, then each graph has a label such as "y=f(x)" or "y=f'(x)" in the upper left.

ShowValues yes/no yes If this is yes, then each graph has a label showing the value of the function at the currently selected x-coordinate. This label shows up at the lower left of the graph.

GraphColor Color black The color used to draw the graphs.

TangentColor Color red The color for the tangent line to the function and for the crosshair at the corresponding point on the derivative function.

TangentColor2 Color 0 180 0 The color for the tangent line to the derivative function and for the crosshair at the corresponding point on the second derivative function. This is ignored if the second derivative is not shown.

TextColor Color black The color for the text of the labels at the upper left and lower left of each graph (if present).

TextBackground Color white The background color for labels at the upper left and lower left of each graph (if present).

X number 1 The x-coordinate where the tangent line is initially drawn.

Function String "tan(x)" The initial function that is graphed. This is a change in the default value from GenericGraphApplet.

UseRestoreButton yes/no no The meaning of this param is changed slightly from its meaning in GenericalGraphApplet. It still means to add a button that can be used to restore the limits on a CoordinateRect to their initial values. However, if there is no limit control panel, the restore button will be added to the panel at the bottom of the applet. (In GenericGraphApplet, it would simply be ignored.) See the second sample applet on this page.

Example,
Example1,
Example2,
... 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 or five numbers. The first four numbers in the list give the x- and y- limits for the graph. The fifth number gives the initial x-coordinate of the point where the tangent line is displayed.

[ Prev | Main | Next ]

Param Name	Type	Default	Description
FunctionName	string	f	The name of the function that is being graphed. This is used in various labels where the name of the function is needed. For example, in "f'(x)=", the "f" is taken from the "FunctionName" just as the "x" is taken from the "Variable".
SecondDerivative	yes/no	no	If this is yes, then a graph of the second derivative is shown, in addition to the graphs of the function and its derivative.
ShowFormula	yes/no	yes	If this is yes, then the formula for the second derivative is shown at the bottom of the applet.
ShowGraphLabels	yes/no	yes	If this is yes, then each graph has a label such as "y=f(x)" or "y=f'(x)" in the upper left.
ShowValues	yes/no	yes	If this is yes, then each graph has a label showing the value of the function at the currently selected x-coordinate. This label shows up at the lower left of the graph.
GraphColor	Color	black	The color used to draw the graphs.
TangentColor	Color	red	The color for the tangent line to the function and for the crosshair at the corresponding point on the derivative function.
TangentColor2	Color	0 180 0	The color for the tangent line to the derivative function and for the crosshair at the corresponding point on the second derivative function. This is ignored if the second derivative is not shown.
TextColor	Color	black	The color for the text of the labels at the upper left and lower left of each graph (if present).
TextBackground	Color	white	The background color for labels at the upper left and lower left of each graph (if present).
X	number	1	The x-coordinate where the tangent line is initially drawn.
Function	String	"tan(x)"	The initial function that is graphed. This is a change in the default value from GenericGraphApplet.
UseRestoreButton	yes/no	no	The meaning of this param is changed slightly from its meaning in GenericalGraphApplet. It still means to add a button that can be used to restore the limits on a CoordinateRect to their initial values. However, if there is no limit control panel, the restore button will be added to the panel at the bottom of the applet. (In GenericGraphApplet, it would simply be ignored.) See the second sample applet on this page.
Example, Example1, Example2, ...	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 or five numbers. The first four numbers in the list give the x- and y- limits for the graph. The fifth number gives the initial x-coordinate of the point where the tangent line is displayed.