Inverse Composition Rules: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 100: | Line 100: | ||
plotg = brd.createElement('functiongraph',[g,-2,2],{dash:3, strokeColor:'green',strokeWidth:3}); | plotg = brd.createElement('functiongraph',[g,-2,2],{dash:3, strokeColor:'green',strokeWidth:3}); | ||
plotfg = brd.createElement('functiongraph',[fg,-2,2],{strokeColor:'red',strokeWidth:3}); | plotfg = brd.createElement('functiongraph',[fg,-2,2],{strokeColor:'red',strokeWidth:3}); | ||
</jsxgraph> | </jsxgraph> | ||
| Line 108: | Line 107: | ||
<form name="input"> | <form name="input"> | ||
<table> | <table> | ||
<tr> | <tr style="color:blue"> | ||
<th>f(x)</th> | <th>f(x)</th> | ||
<td>sin(x)</td> | <td>sin(x)</td> | ||
| Line 126: | Line 125: | ||
<td><input type="radio" name="f" value="exp" onChange="change(this)"></td> | <td><input type="radio" name="f" value="exp" onChange="change(this)"></td> | ||
</tr> | </tr> | ||
<tr> | <tr style="color:green"> | ||
<th>g(x)</th> | <th>g(x)</th> | ||
<td>arcsin(x)</td> | <td>arcsin(x)</td> | ||
| Line 203: | Line 202: | ||
fg = function(x) { return Math.sin(Math.asin(x)); } | fg = function(x) { return Math.sin(Math.asin(x)); } | ||
plotf = brd.createElement('functiongraph',[f,-2,2],{dash:2}); | plotf = brd.createElement('functiongraph',[f,-2,2],{dash:2, strokeColor:'blue',strokeWidth:3}); | ||
plotg = brd.createElement('functiongraph',[g,-2,2],{dash:3, strokeColor:' | plotg = brd.createElement('functiongraph',[g,-2,2],{dash:3, strokeColor:'green',strokeWidth:3}); | ||
plotfg = brd.createElement('functiongraph',[fg,-2,2],{strokeColor:'red'}); | plotfg = brd.createElement('functiongraph',[fg,-2,2],{strokeColor:'red',strokeWidth:3}); | ||
</jsxgraph> | </jsxgraph> | ||
</source> | </source> | ||
Revision as of 13:50, 19 June 2009
The underlying JavaScript code
<html>
<form name="input">
<table>
<tr style="color:blue">
<th>f(x)</th>
<td>sin(x)</td>
<td>cos(x)</td>
<td>tan(x)</td>
<td>x<sup>2</sup></td>
<td>sinh(x)</td>
<td>exp(x)</td>
</tr>
<tr>
<td> </td>
<td><input type="radio" name="f" value="sin" checked onChange="change(this)"></td>
<td><input type="radio" name="f" value="cos" onChange="change(this)"></td>
<td><input type="radio" name="f" value="tan" onChange="change(this)"></td>
<td><input type="radio" name="f" value="square" onChange="change(this)"></td>
<td><input type="radio" name="f" value="sinh" onChange="change(this)"></td>
<td><input type="radio" name="f" value="exp" onChange="change(this)"></td>
</tr>
<tr style="color:green">
<th>g(x)</th>
<td>arcsin(x)</td>
<td>arccos(x)</td>
<td>arctan(x)</td>
<td>√(x)</td>
<td>arcsinh(x)</td>
<td>log(x)</td>
</tr>
<tr>
<td> </td>
<td><input type="radio" name="g" value="asin" checked onChange="change(this)"></td>
<td><input type="radio" name="g" value="acos" onChange="change(this)"></td>
<td><input type="radio" name="g" value="atan" onChange="change(this)"></td>
<td><input type="radio" name="g" value="sqrt" onChange="change(this)"></td>
<td><input type="radio" name="g" value="asinh" onChange="change(this)"></td>
<td><input type="radio" name="g" value="log" onChange="change(this)"></td>
</tr>
<tr>
<th>Composition</th>
<td>f(g(x)</td>
<td>g(f(x)</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><input type="radio" name="fg" value="fg" checked onChange="comp(this)"></td>
<td><input type="radio" name="fg" value="gf" onChange="comp(this)"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</html>
<jsxgraph width="600" height="600" box="box">
var brd = JXG.JSXGraph.initBoard('box', {axis:true, originX: 300, originY: 300, grid:true, unitX: 100, unitY: 100});
var f, g, fg;
var change = function(obj) {
var t = obj.value;
if (t=='sin') { f = function(x) { return Math.sin(x); }
} else if (t=='cos') { f = function(x) { return Math.cos(x); }
} else if (t=='tan') { f = function(x) { return Math.tan(x); }
} else if (t=='square') { f = function(x) { return x*x; }
} else if (t=='sinh') { f = function(x) { return brd.sinh(x); }
} else if (t=='exp') { f = function(x) { return Math.exp(x); }
} else if (t=='asin') { g = function(x) { return Math.asin(x); }
} else if (t=='acos') { g = function(x) { return Math.acos(x); }
} else if (t=='atan') { g = function(x) { return Math.atan(x); }
} else if (t=='sqrt') { g = function(x) { return Math.sqrt(x); }
} else if (t=='asinh') { g = function(x) { return Math.log(x+Math.sqrt(1+x*x)); }
} else if (t=='log') { g = function(x) { return Math.log(x); }
}
plotf.Y = f; plotf.updateCurve();
plotg.Y = g; plotg.updateCurve();
brd.update();
}
var comp = function(obj) {
var t = obj.value;
if (t=='fg') { fg = function(x) { return f(g(x)); }
} else if (t=='gf') { fg = function(x) { return g(f(x)); }
}
plotfg.Y = fg; plotfg.updateCurve();
brd.update();
}
f = function(x) { return Math.sin(x); }
g = function(x) { return Math.asin(x); }
fg = function(x) { return Math.sin(Math.asin(x)); }
plotf = brd.createElement('functiongraph',[f,-2,2],{dash:2, strokeColor:'blue',strokeWidth:3});
plotg = brd.createElement('functiongraph',[g,-2,2],{dash:3, strokeColor:'green',strokeWidth:3});
plotfg = brd.createElement('functiongraph',[fg,-2,2],{strokeColor:'red',strokeWidth:3});
</jsxgraph>
