Difference between revisions of "Matrix multiplication"

From JSXGraph Wiki
Jump to navigationJump to search
Line 1: Line 1:
−
<html>
+
<jsxgraph box="box1" width="400" height="300">
−
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
+
   var b1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});
−
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
−
<div id="box1" class="jxgbox" style="width:400px; height:300px; float:left;"></div>
 
−
<div id="box2" class="jxgbox" style="width:400px; height:300px;"></div>
 
−
<br clear="all">
 
−
<script language="JavaScript">
 
−
   var b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
 
 
   b1.suspendUpdate();
 
   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 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 b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b'});
Line 15: Line 7:
 
   var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d'});
 
   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 v = b1.create('point',[2,2],{size:3,name:'v'});
−
   var w = b1.create('point',[-2,1],{style:5,name:'w'});
+
   var w = b1.create('point',[-2,1],{size:3,name:'w'});
−
   var va = b1.create('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var va = b1.create('arrow',[[0,0],v]);
−
   var wa = b1.create('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});
+
   var wa = b1.create('arrow',[[0,0],w]);
 
   b1.unsuspendUpdate();
 
   b1.unsuspendUpdate();
 +
</jsxgraph>
  
−
   var b2 = JXG.JSXGraph.initBoard('box2', {originX: 150, originY: 150, unitX: 20, unitY: 20});
+
<jsxgraph box="box2" width="400" height="300">
 +
   var b2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});
 
   b1.addChild(b2);
 
   b1.addChild(b2);
 
   b2.suspendUpdate();
 
   b2.suspendUpdate();
−
  b2.create('axis', [[0,0], [1,0]], {});
 
−
  b2.create('axis', [[0,0], [0,1]], {});
 
  
 
   var v2 = b2.create('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();}],{face:'[]',size:2,name:"v'"});
 
   var w2 = b2.create('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();}],{face:'[]',size:2,name:"w'"});
 
   var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});
 
   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 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)+'|';}]);
 
   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();
−
 
+
</jsxgraph>
−
</script>
 
−
</html>
 
  
 
=== References ===
 
=== References ===
Line 47: Line 37:
  
 
<source lang="javascript">
 
<source lang="javascript">
−
  var b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
+
var b1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});
−
  b1.suspendUpdate();
+
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 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 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 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 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 v = b1.create('point',[2,2],{size:3,name:'v'});
−
  var w = b1.create('point',[-2,1],{style:5,name:'w'});
+
var w = b1.create('point',[-2,1],{size:3,name:'w'});
−
  var va = b1.create('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});
+
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});
+
var wa = b1.create('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});
−
  b1.unsuspendUpdate();
+
b1.unsuspendUpdate();
  
−
  var b2 = JXG.JSXGraph.initBoard('box2', {originX: 150, originY: 150, unitX: 20, unitY: 20});
+
var b2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});
−
  b1.addChild(b2);
+
b1.addChild(b2);
−
  b2.suspendUpdate();
+
b2.suspendUpdate();
−
  b2.create('axis', [[0,0], [1,0]], {});
 
−
  b2.create('axis', [[0,0], [0,1]], {});
 
  
−
  var v2 = b2.create('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();}],{face:'[]',size:2,name:"v'"});
−
  var w2 = b2.create('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();}],{face:'[]',size:2,name:"w'"});
−
  var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});
+
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 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)+'|';}]);
+
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 11:03, 8 June 2011

References

The underlying JavaScript code

var b1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});
b1.suspendUpdate();

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],{size:3,name:'v'});
var w = b1.create('point',[-2,1],{size:3,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', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});
b1.addChild(b2);
b2.suspendUpdate();

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();}],{face:'[]',size:2,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();}],{face:'[]',size:2,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();
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Matrix_multiplication&oldid=5242"