Sample Configurable JCM Applet: FunctionComposition

[ Prev | Main | Next ]

FunctionComposition Applet

The purpose of this applet is to illustrate function composition and the chain rule. It shows the graphs of two functions, f(x) and g(x), and of their composition, g(f(x)). The user can drag the red square back and forth on the x-axis of the graph of f(x). This square determines an x-value, X. The points (X,f(X)), (f(X),g(f(X))), and (X,g(f(X))) are marked on the respective graphs. An applet parameter can be used to turn on the display of tangent lines at each of these points, in order to illustrate the chain rule. Here is what the applet looks like with no applet params:

You can another version of the applet with the following button. This example is configured to show tangent lines and the slope of each tangent line. The applet will respond to mouse actions on the canvas (click, shift-click, click-and-drag, and right-click-and-drag). Note that each coordinate rect can be resized independently using these actions, but the buttons at the lower right affect all the coordinate rects. The applet is also configured with several loadable examples.

Here is the applet tag for this version:
   <applet archive="jcm1.0-config.jar" code="FunctionComposition.class" width=200 height=35>
      <param name="UseMouseZoom" value="yes">
      <param name="UsePanner" value="yes">
      <param name="ShowTangents" value="yes">
      <param name="Example1" value="abs( sin(x) ); sin(x); abs(x); -5 5 -5 5 1">
      <param name="Example2" value="sin( abs(x) ); abs(x); sin(x); -5 5 -5 5 1">
      <param name="Example3" value="Composition with a line; x^3 - 3*x; 2*(x+1); -3 3 -8 8 0">
      <param name="Example4" value="Composition with piecewise linear function; 3*sin(x)+cos(3*x); table linear -5,-4 -2.5,3 0,0 2.5,4 5,2; -5 5 -5 5 0">
   </applet>
FunctionComposition inherits from GenericGraphApplet. However, a lot of the code from GenericGraphApplet is superceded. In particular, it is not possible to have a limit control panel in FunctionComposition. The following applet params from GenericGraphApplet that affect the limit control panel have no effect in FunctionComposition: "UseLimitsPanel", "TwoColumnLimits", "LimitsOnLeft", "SetLimitsButton", "UseZoomButtons", "UseRestoreButton", and "UseEqualizeButton". The Zoom, Equalize, and Restore buttons that appear in a FunctionComposition applet are added if the applet param "UseFunctionInput" is yes. If "UseFunctionInput" is "no", then the buttons do not appear and there is no way to add them.

Most of the other applet params from GenericGraphApplet should work as expected with FunctionComposition. Here are the additional applet params that are processed by the FunctionComposition applet.

Param Name Type Default Description

GraphColor Color magenta The color used to draw the graphs.

TextColor Color black The color that is used for all the textual labels, such as "y=f(x)" that are drawn over the graph.

TangentColor Color gray The color used to draw tangent lines, if they are turned on with the "ShowTangents" applet param.

PointColor1, PointColor2, PointColor3 Color red; 0 200 0; 100 100 255 The colors used for the lines that mark the points on the graphs. The first point color is also used for the draggable square on the x-axis of the first graph.

Function String 3 - x^2 The expression that initially defines f(x).

SecondFunction String sin(x) The expression that initially defines g(x).

TableFunction String (none) The initial table function for f(x). If this param has a value but "Function" is not explicitly given a value, f(x) is shown first as a table rather than as an expression. The format for a table function is as follows: It can start, optionally, with the word "table". (This is optional because in this context, we know it's a table.) Then, optionally, can come one of the words "smooth", "linear", or "step" to define how the graph is interpolated between points in the table. The default is "smooth". The comes the definition of the points in the table. There are two ways to do this. One is simply to give the (x,y) coords of the points as a list of 2*N numbers, where N is the number of points. If you want to use the other method, start with the word "intervals", then the number of intervals, then a maximum and a minimum value for x. The specified range of x-values will be divided into the specified number of equal-sized intervals. Then, give up (intervals+1) y-values. Missing y-values are set to 0.

SecondTableFunction String (none) The initial table function for g(x). If this param has a value but "SecondFunction" is not explicitly given a value, g(x) is shown first as a table rather than as an expression. For the format of a table function, see the previous item.

ShowTangents yes/no no If this is yes, then tangent lines are drawn to each curve.

ShowSlopes yes/no no If this is yes, and "ShowTangents" also has value yes, then a label is added to each graph to show the slope of the tangent line.

ShowFunctionNames yes/no yes If this is yes, then the labels "y=f(x)", "y=g(x)" and "y=g(f(x))" are added to the graphs.

ShowCoordinates yes/no yes If this is yes, then labels are added at the bottom of each graph showing the coordinates of the point that is currently marked.

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. This is followed by two function definitions, separated by a semicolon. Each function definition can be either an expression or a table definition. The format for a table definition is given above, under the description of "TableFunction", except that in this context, the definition must start with the work "table". After the function definition, there can be another semicolon and four or five numbers. The first four numbers give the x- and y- limits on the graphs. The fifth number gives the x-coordinate of the draggable square.

[ Prev | Main | Next ]

Param Name	Type	Default	Description
GraphColor	Color	magenta	The color used to draw the graphs.
TextColor	Color	black	The color that is used for all the textual labels, such as "y=f(x)" that are drawn over the graph.
TangentColor	Color	gray	The color used to draw tangent lines, if they are turned on with the "ShowTangents" applet param.
PointColor1, PointColor2, PointColor3	Color	red; 0 200 0; 100 100 255	The colors used for the lines that mark the points on the graphs. The first point color is also used for the draggable square on the x-axis of the first graph.
Function	String	3 - x^2	The expression that initially defines f(x).
SecondFunction	String	sin(x)	The expression that initially defines g(x).
TableFunction	String	(none)	The initial table function for f(x). If this param has a value but "Function" is not explicitly given a value, f(x) is shown first as a table rather than as an expression. The format for a table function is as follows: It can start, optionally, with the word "table". (This is optional because in this context, we know it's a table.) Then, optionally, can come one of the words "smooth", "linear", or "step" to define how the graph is interpolated between points in the table. The default is "smooth". The comes the definition of the points in the table. There are two ways to do this. One is simply to give the (x,y) coords of the points as a list of 2*N numbers, where N is the number of points. If you want to use the other method, start with the word "intervals", then the number of intervals, then a maximum and a minimum value for x. The specified range of x-values will be divided into the specified number of equal-sized intervals. Then, give up (intervals+1) y-values. Missing y-values are set to 0.
SecondTableFunction	String	(none)	The initial table function for g(x). If this param has a value but "SecondFunction" is not explicitly given a value, g(x) is shown first as a table rather than as an expression. For the format of a table function, see the previous item.
ShowTangents	yes/no	no	If this is yes, then tangent lines are drawn to each curve.
ShowSlopes	yes/no	no	If this is yes, and "ShowTangents" also has value yes, then a label is added to each graph to show the slope of the tangent line.
ShowFunctionNames	yes/no	yes	If this is yes, then the labels "y=f(x)", "y=g(x)" and "y=g(f(x))" are added to the graphs.
ShowCoordinates	yes/no	yes	If this is yes, then labels are added at the bottom of each graph showing the coordinates of the point that is currently marked.
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. This is followed by two function definitions, separated by a semicolon. Each function definition can be either an expression or a table definition. The format for a table definition is given above, under the description of "TableFunction", except that in this context, the definition must start with the work "table". After the function definition, there can be another semicolon and four or five numbers. The first four numbers give the x- and y- limits on the graphs. The fifth number gives the x-coordinate of the draggable square.