Difference between revisions of "Matrix multiplication II"

From JSXGraph Wiki
Jump to: navigation, search
Line 2: Line 2:
 
   <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
 
   <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script>
 
</html>
 
</html>
 
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
 
   JXG.Options.text.useMathJax = true;
 
   JXG.Options.text.useMathJax = true;
Line 36: Line 35:
 
   b1.unsuspendUpdate();
 
   b1.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
 +
 +
This example uses [http://mathjax.org MathJax].
  
 
=== The underlying JavaScript code ===
 
=== The underlying JavaScript code ===
  
 
<source lang="javascript">
 
<source lang="javascript">
 +
  JXG.Options.text.useMathJax = true;
 
   var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});
 
   var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});
 
   b1.suspendUpdate();
 
   b1.suspendUpdate();
Line 56: Line 58:
  
 
   var t = b1.create('text',[-8, 5,  
 
   var t = b1.create('text',[-8, 5,  
             function(){ return 'Matrix=<br>|'  
+
             function(){ return '\\[ M = \\left(\\begin{matrix}'  
                         + b1.round(a.Value(),2) + ' '
+
                         + b1.round(a.Value(),2) + '&'
                         + b1.round(b.Value(),2) + '|<br>|'
+
                         + b1.round(b.Value(),2) + '\\\\'
                         + b1.round(c.Value(),2) +' '  
+
                         + b1.round(c.Value(),2) +'&'  
                         + b1.round(d.Value(),2)+'|';}]);
+
                         + b1.round(d.Value(),2)+'\\end{matrix}\\right)\\]';}]);
  
   var t2 = b1.create('text',[-8,1,
+
   var t2 = b1.create('text',[-8,2,
               function(){ return "&lambda; = |v'|/|v| = "  
+
               function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = "  
 
                 + b1.round(
 
                 + b1.round(
 
                     JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/
 
                     JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/
 
                     JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()]), 3
 
                     JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()]), 3
                   );}]);
+
                   )  
 +
                  + "\\]";}]);
 
   b1.unsuspendUpdate();
 
   b1.unsuspendUpdate();
 
</source>
 
</source>

Revision as of 09:31, 25 March 2011

This example uses MathJax.

The underlying JavaScript code

  JXG.Options.text.useMathJax = true;
  var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});
  b1.suspendUpdate();
  var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});
  var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});
  var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});
  var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});

  var v = b1.create('point',[2,2],{style:5,name:'v'});
  var va = b1.create('arrow',[[0,0],v]);

  var v2 = b1.create('point',[
       function() {return a.Value()*v.X()+b.Value()*v.Y();},
       function() {return c.Value()*v.X()+d.Value()*v.Y();}],{style:7,name:"v'"});
  var va2 = b1.create('arrow',[[0,0],v2],{color:'black', strokeWidth:1});

  var t = b1.create('text',[-8, 5, 
            function(){ return '\\[ M = \\left(\\begin{matrix}' 
                        + b1.round(a.Value(),2) + '&'
                        + b1.round(b.Value(),2) + '\\\\'
                        + b1.round(c.Value(),2) +'&' 
                        + b1.round(d.Value(),2)+'\\end{matrix}\\right)\\]';}]);

  var t2 = b1.create('text',[-8,2,
               function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " 
                 + b1.round(
                     JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/
                     JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()]), 3
                   ) 
                   + "\\]";}]);
  b1.unsuspendUpdate();