Difference between revisions of "Matrix multiplication"

From JSXGraph Wiki
Jump to: navigation, search
Line 6: Line 6:
 
<br clear="all">
 
<br clear="all">
 
<script language="JavaScript">
 
<script language="JavaScript">
   b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
+
   var b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
 
   b1.suspendUpdate();
 
   b1.suspendUpdate();
   b1.createElement('axis', [[0,0], [1,0]], {});
+
   b1.create('axis', [[0,0], [1,0]], {});
   b1.createElement('axis', [[0,0], [0,1]], {});
+
   b1.create('axis', [[0,0], [0,1]], {});
   a = b1.createElement('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a'});
+
   var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a'});
   b = b1.createElement('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b'});
+
   var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b'});
   c = b1.createElement('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c'});
+
   var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c'});
   d = b1.createElement('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d'});
+
   var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d'});
  
   v = b1.createElement('point',[2,2],{style:5,name:'v'});
+
   var v = b1.create('point',[2,2],{style:5,name:'v'});
   w = b1.createElement('point',[-2,1],{style:5,name:'w'});
+
   var w = b1.create('point',[-2,1],{style:5,name:'w'});
   va = b1.createElement('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var va = b1.create('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});
   wa = b1.createElement('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var wa = b1.create('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});
 
   b1.unsuspendUpdate();
 
   b1.unsuspendUpdate();
  
   b2 = JXG.JSXGraph.initBoard('box2', {originX: 150, originY: 150, unitX: 20, unitY: 20});
+
   var b2 = JXG.JSXGraph.initBoard('box2', {originX: 150, originY: 150, unitX: 20, unitY: 20});
 
   b1.addChild(b2);
 
   b1.addChild(b2);
 
   b2.suspendUpdate();
 
   b2.suspendUpdate();
   b2.createElement('axis', [[0,0], [1,0]], {});
+
   b2.create('axis', [[0,0], [1,0]], {});
   b2.createElement('axis', [[0,0], [0,1]], {});
+
   b2.create('axis', [[0,0], [0,1]], {});
  
   v2 = b2.createElement('point',[
+
   var v2 = b2.create('point',[
 
       function() {return a.Value()*v.X()+b.Value()*v.Y();},
 
       function() {return a.Value()*v.X()+b.Value()*v.Y();},
 
       function() {return c.Value()*v.X()+d.Value()*v.Y();}],{style:7,name:"v'"});
 
       function() {return c.Value()*v.X()+d.Value()*v.Y();}],{style:7,name:"v'"});
   w2 = b2.createElement('point',[
+
   var w2 = b2.create('point',[
 
       function() {return a.Value()*w.X()+b.Value()*w.Y();},
 
       function() {return a.Value()*w.X()+b.Value()*w.Y();},
 
       function() {return c.Value()*w.X()+d.Value()*w.Y();}],{style:7,name:"w'"});
 
       function() {return c.Value()*w.X()+d.Value()*w.Y();}],{style:7,name:"w'"});
   va2 = b2.createElement('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});
   wa2 = b2.createElement('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var wa2 = b2.create('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});
   t = b2.createElement('text',[-6,-2,function(){ return '|'+b2.round(a.Value(),2)+' '+b2.round(b.Value(),2)+'|'+'<br>'+'|'+b2.round(c.Value(),2)+' '+b2.round(d.Value(),2)+'|';}]);
+
   var t = b2.create('text',[-6,-2,function(){ return '|'+b2.round(a.Value(),2)+' '+b2.round(b.Value(),2)+'|'+'<br>'+'|'+b2.round(c.Value(),2)+' '+b2.round(d.Value(),2)+'|';}]);
 
   b2.unsuspendUpdate();
 
   b2.unsuspendUpdate();
  
Line 47: Line 47:
  
 
<source lang="javascript">
 
<source lang="javascript">
   b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
+
   var b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
 
   b1.suspendUpdate();
 
   b1.suspendUpdate();
   b1.createElement('axis', [[0,0], [1,0]], {});
+
   b1.create('axis', [[0,0], [1,0]], {});
   b1.createElement('axis', [[0,0], [0,1]], {});
+
   b1.create('axis', [[0,0], [0,1]], {});
   a = b1.createElement('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a'});
+
   var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a'});
   b = b1.createElement('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b'});
+
   var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b'});
   c = b1.createElement('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c'});
+
   var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c'});
   d = b1.createElement('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d'});
+
   var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d'});
  
   v = b1.createElement('point',[2,2],{style:5,name:'v'});
+
   var v = b1.create('point',[2,2],{style:5,name:'v'});
   w = b1.createElement('point',[-2,1],{style:5,name:'w'});
+
   var w = b1.create('point',[-2,1],{style:5,name:'w'});
   va = b1.createElement('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var va = b1.create('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});
   wa = b1.createElement('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var wa = b1.create('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});
 
   b1.unsuspendUpdate();
 
   b1.unsuspendUpdate();
  
   b2 = JXG.JSXGraph.initBoard('box2', {originX: 150, originY: 150, unitX: 20, unitY: 20});
+
   var b2 = JXG.JSXGraph.initBoard('box2', {originX: 150, originY: 150, unitX: 20, unitY: 20});
 
   b1.addChild(b2);
 
   b1.addChild(b2);
 
   b2.suspendUpdate();
 
   b2.suspendUpdate();
   b2.createElement('axis', [[0,0], [1,0]], {});
+
   b2.create('axis', [[0,0], [1,0]], {});
   b2.createElement('axis', [[0,0], [0,1]], {});
+
   b2.create('axis', [[0,0], [0,1]], {});
  
   v2 = b2.createElement('point',[
+
   var v2 = b2.create('point',[
 
       function() {return a.Value()*v.X()+b.Value()*v.Y();},
 
       function() {return a.Value()*v.X()+b.Value()*v.Y();},
 
       function() {return c.Value()*v.X()+d.Value()*v.Y();}],{style:7,name:"v'"});
 
       function() {return c.Value()*v.X()+d.Value()*v.Y();}],{style:7,name:"v'"});
   w2 = b2.createElement('point',[
+
   var w2 = b2.create('point',[
 
       function() {return a.Value()*w.X()+b.Value()*w.Y();},
 
       function() {return a.Value()*w.X()+b.Value()*w.Y();},
 
       function() {return c.Value()*w.X()+d.Value()*w.Y();}],{style:7,name:"w'"});
 
       function() {return c.Value()*w.X()+d.Value()*w.Y();}],{style:7,name:"w'"});
   va2 = b2.createElement('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});
   wa2 = b2.createElement('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var wa2 = b2.create('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});
   t = b2.createElement('text',[-6,-2,function(){ return '|'+b2.round(a.Value(),2)+' '+b2.round(b.Value(),2)+'|'+'<br>'+'|'+b2.round(c.Value(),2)+' '+b2.round(d.Value(),2)+'|';}]);
+
   var t = b2.create('text',[-6,-2,function(){ return '|'+b2.round(a.Value(),2)+' '+b2.round(b.Value(),2)+'|'+'<br>'+'|'+b2.round(c.Value(),2)+' '+b2.round(d.Value(),2)+'|';}]);
 
   b2.unsuspendUpdate();
 
   b2.unsuspendUpdate();
 
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]

Revision as of 14:12, 1 February 2010


References

The underlying JavaScript code

  var b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
  b1.suspendUpdate();
  b1.create('axis', [[0,0], [1,0]], {});
  b1.create('axis', [[0,0], [0,1]], {});
  var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a'});
  var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b'});
  var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c'});
  var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d'});

  var v = b1.create('point',[2,2],{style:5,name:'v'});
  var w = b1.create('point',[-2,1],{style:5,name:'w'});
  var va = b1.create('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});
  var wa = b1.create('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});
  b1.unsuspendUpdate();

  var b2 = JXG.JSXGraph.initBoard('box2', {originX: 150, originY: 150, unitX: 20, unitY: 20});
  b1.addChild(b2);
  b2.suspendUpdate();
  b2.create('axis', [[0,0], [1,0]], {});
  b2.create('axis', [[0,0], [0,1]], {});

  var v2 = b2.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 w2 = b2.create('point',[
       function() {return a.Value()*w.X()+b.Value()*w.Y();},
       function() {return c.Value()*w.X()+d.Value()*w.Y();}],{style:7,name:"w'"});
  var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});
  var wa2 = b2.create('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});
  var t = b2.create('text',[-6,-2,function(){ return '|'+b2.round(a.Value(),2)+' '+b2.round(b.Value(),2)+'|'+'<br>'+'|'+b2.round(c.Value(),2)+' '+b2.round(d.Value(),2)+'|';}]);
  b2.unsuspendUpdate();