Matrix multiplication: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(17 intermediate revisions by 2 users not shown)
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/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="box1" class="jxgbox" style="width:300px; height:300px; float:left;"></div>
<div id="box2" class="jxgbox" style="width:300px; height:300px;"></div>
<br clear="all">
<script language="JavaScript">
   b1 = JXG.JSXGraph.initBoard('box1', {originX: 150, originY: 150, unitX: 20, unitY: 20});
   b1.suspendUpdate();
   b1.suspendUpdate();
   b1.createElement('axis', [[0,0], [1,0]], {});
   var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth: 0.1});
  b1.createElement('axis', [[0,0], [0,1]], {});
   var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth: 0.1});
  a = b1.createElement('slider',[-5.0,-2,10,-5,5,1],{name:'a'});
   var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth: 0.1});
   b = b1.createElement('slider',[-5.0,-3,10,-5,5,0],{name:'b'});
   var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth: 0.1});
   c = b1.createElement('slider',[-5.0,-4,10,-5,5,0],{name:'c'});
   d = b1.createElement('slider',[-5.0,-5,10,-5,5,1],{name:'d'});


   v = b1.createElement('point',[2,2],{style:5,name:'v'});
   var v = b1.create('point',[2,2],{size:3,name:'v'});
   w = b1.createElement('point',[-2,1],{style:5,name:'w'});
   var w = b1.create('point',[-2,1],{size:3,name:'w'});
   va = b1.createElement('line',['Ursprung',v],{straightFirst:false, straightLast:false, lastArrow:true});
   var va = b1.create('arrow',[[0,0],v]);
   wa = b1.createElement('line',['Ursprung',w],{straightFirst:false, straightLast:false, lastArrow:true});
   var wa = b1.create('arrow',[[0,0],w]);
   b1.unsuspendUpdate();
   b1.unsuspendUpdate();
</jsxgraph>


   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);
   b2.suspendUpdate();
   b2.suspendUpdate();
  b2.createElement('axis', [[0,0], [1,0]], {});
  b2.createElement('axis', [[0,0], [0,1]], {});


   v2 = b2.createElement('point',[
   var v2 = b2.create('point',[
       function() {return a.X()*v.X()+b.X()*v.Y();},
       function() {return a.Value()*v.X()+b.Value()*v.Y();},
       function() {return c.X()*v.X()+d.X()*v.Y();}],{style:7,name:"v'"});
       function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'[]',size:2,name:"v'"});
   w2 = b2.createElement('point',[
   var w2 = b2.create('point',[
       function() {return a.X()*w.X()+b.X()*w.Y();},
       function() {return a.Value()*w.X()+b.Value()*w.Y();},
       function() {return c.X()*w.X()+d.X()*w.Y();}],{style:7,name:"w'"});
       function() {return c.Value()*w.X()+d.Value()*w.Y();}],{face:'[]',size:2,name:"w'"});
   va2 = b2.createElement('line',['Ursprung',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',['Ursprung',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.X(),2)+' '+b2.round(b.X(),2)+'|'+'<br>'+'|'+b2.round(c.X(),2)+' '+b2.round(d.X(),2)+'|';}]);
   var t = b2.create('text',[-6,-2,function(){ return '|'+(a.Value()).toFixed(2)+' '+(b.Value()).toFixed(2)+'|'+'<br>'+'|'+(c.Value()).toFixed(2)+' '+(d.Value()).toFixed(2)+'|';}]);
   b2.unsuspendUpdate();
   b2.unsuspendUpdate();
</jsxgraph>


</script>
=== References ===
</html>
* [http://en.wikipedia.org/wiki/Matrix_multiplication http://en.wikipedia.org/wiki/Matrix_multiplication]
 
=== The underlying JavaScript code ===


<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', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});
  b1.suspendUpdate();
b1.suspendUpdate();
  b1.createElement('axis', [[0,0], [1,0]], {});
 
  b1.createElement('axis', [[0,0], [0,1]], {});
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth: 0.1});
  a = b1.createElement('slider',[-5.0,-2,10,-5,5,1],{name:'a'});
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth: 0.1});
  b = b1.createElement('slider',[-5.0,-3,10,-5,5,0],{name:'b'});
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth: 0.1});
  c = b1.createElement('slider',[-5.0,-4,10,-5,5,0],{name:'c'});
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth: 0.1});
  d = b1.createElement('slider',[-5.0,-5,10,-5,5,1],{name:'d'});


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


   v2 = b2.createElement('point',[
   var v2 = b2.create('point',[
       function() {return a.X()*v.X()+b.X()*v.Y();},
       function() {return a.Value()*v.X()+b.Value()*v.Y();},
       function() {return c.X()*v.X()+d.X()*v.Y();}],{style:7,name:"v'"});
       function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'[]',size:2,name:"v'"});
   w2 = b2.createElement('point',[
   var w2 = b2.create('point',[
       function() {return a.X()*w.X()+b.X()*w.Y();},
       function() {return a.Value()*w.X()+b.Value()*w.Y();},
       function() {return c.X()*w.X()+d.X()*w.Y();}],{style:7,name:"w'"});
       function() {return c.Value()*w.X()+d.Value()*w.Y();}],{face:'[]',size:2,name:"w'"});
   va2 = b2.createElement('line',['Ursprung',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',['Ursprung',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.X(),2)+' '+b2.round(b.X(),2)+'|'+'<br>'+'|'+b2.round(c.X(),2)+' '+b2.round(d.X(),2)+'|';}]);
   var t = b2.create('text',[-6,-2,function(){ return '|'+(a.Value()).toFixed(2)+' '+(b.Value()).toFixed(2)+'|'+'<br>'+'|'+(c.Value()).toFixed(2)+' '+(d.Value()).toFixed(2)+'|';}]);
   b2.unsuspendUpdate();
   b2.unsuspendUpdate();


Latest revision as of 13:50, 17 July 2023

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', 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],{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 '|'+(a.Value()).toFixed(2)+' '+(b.Value()).toFixed(2)+'|'+'<br>'+'|'+(c.Value()).toFixed(2)+' '+(d.Value()).toFixed(2)+'|';}]);
  b2.unsuspendUpdate();
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Matrix_multiplication&oldid=7624"