Inverse Composition Rules

From JSXGraph Wiki
Revision as of 10:10, 25 March 2011 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

f(x) sin(x) cos(x) tan(x) x2 sinh(x) exp(x)
 
g(x) arcsin(x) arccos(x) arctan(x) √(x) arcsinh(x) log(x)
 
Composition f(g(x)) g(f(x))        
         

The underlying JavaScript code

<html>
<form name="input">
<table style="background-color:background; padding:5px; margin:2px">
 <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>&nbsp;</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>&radic;(x)</td>
   <td>arcsinh(x)</td>
   <td>log(x)</td>
 </tr>
 <tr>
   <td>&nbsp;</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 style="color:red">
   <th>Composition</th>
   <td>f(g(x))</td>
   <td>g(f(x))</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
 </tr>
 <tr>
   <td>&nbsp;</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>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
   <td>&nbsp;</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:false, 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.create('functiongraph',[f,-2,2],{dash:2, strokeColor:'blue',strokeWidth:3});
plotg = brd.create('functiongraph',[g,-2,2],{dash:3, strokeColor:'green',strokeWidth:3});
plotfg = brd.create('functiongraph',[fg,-2,2],{strokeColor:'red',strokeWidth:3});
</jsxgraph>