Difference between revisions of "Inverse Composition Rules"

From JSXGraph Wiki
Jump to navigationJump to search
 
(31 intermediate revisions by one other user not shown)
Line 1: Line 1:
 
<html>
 
<html>
<form>
+
<form name="input">
<table>
+
<table style="padding:5px; margin:2px">
  <tr>
+
  <tr style="color:blue">
 
   <th>f(x)</th>
 
   <th>f(x)</th>
 
   <td>sin(x)</td>
 
   <td>sin(x)</td>
Line 13: Line 13:
 
  <tr>
 
  <tr>
 
   <td>&nbsp;</td>
 
   <td>&nbsp;</td>
   <td><input type="radio" name="f" value="sin" checked onClick="change()"></td>
+
   <td><input type="radio" name="f" value="sin" checked onChange="change(this)"></td>
   <td><input type="radio" name="f" value="cos" onClick="change()"></td>
+
   <td><input type="radio" name="f" value="cos"         onChange="change(this)"></td>
   <td><input type="radio" name="f" value="tan" onClick="change()"></td>
+
   <td><input type="radio" name="f" value="tan"         onChange="change(this)"></td>
   <td><input type="radio" name="f" value="square" onClick="change()"></td>
+
   <td><input type="radio" name="f" value="square"     onChange="change(this)"></td>
   <td><input type="radio" name="f" value="sinh" onClick="change()"></td>
+
   <td><input type="radio" name="f" value="sinh"       onChange="change(this)"></td>
   <td><input type="radio" name="f" value="exp" onClick="change()"></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 31: Line 31:
 
  <tr>
 
  <tr>
 
   <td>&nbsp;</td>
 
   <td>&nbsp;</td>
   <td><input type="radio" name="g" value="asin" checked></td>
+
   <td><input type="radio" name="g" value="asin" checked onChange="change(this)"></td>
   <td><input type="radio" name="g" value="acos"></td>
+
   <td><input type="radio" name="g" value="acos"        onChange="change(this)"></td>
   <td><input type="radio" name="g" value="atan"></td>
+
   <td><input type="radio" name="g" value="atan"        onChange="change(this)"></td>
   <td><input type="radio" name="g" value="sqrt"></td>
+
   <td><input type="radio" name="g" value="sqrt"        onChange="change(this)"></td>
   <td><input type="radio" name="g" value="asinh"></td>
+
   <td><input type="radio" name="g" value="asinh"        onChange="change(this)"></td>
   <td><input type="radio" name="g" value="log"></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>
 
  </tr>
 
</table>
 
</table>
Line 42: Line 60:
 
</html>
 
</html>
 
<jsxgraph width="600" height="600" box="box">
 
<jsxgraph width="600" height="600" box="box">
var brd = JXG.JSXGraph.initBoard('box', {axis:true, originX: 300, originY: 300, grid:true, unitX: 50, unitY: 50});
+
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-3, 3, 3, -3]});
var f, g;
+
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 change = function() {
+
var comp = function(obj) {
  var t = $('f').value;  
+
  var t = obj.value;
  alert(t);
+
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>
 
</jsxgraph>
  
===The underlying JavaScript code===
+
==Code==
 +
 
 +
=== HTML ===
 
<source lang="xml">
 
<source lang="xml">
 +
<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>
 +
</source>
 +
 +
=== JavaScript ===
 +
<source lang="javascript">
 +
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-3, 3, 3, -3]});
 +
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});
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Calculus]]
 
[[Category:Calculus]]

Latest revision as of 09:54, 8 June 2011

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))        
         

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>

JavaScript

var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-3, 3, 3, -3]});
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});