# Matrix multiplication

### The underlying JavaScript code

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

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

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

v2 = b2.createElement('point',[
function() {return a.X()*v.X()+b.X()*v.Y();},
function() {return c.X()*v.X()+d.X()*v.Y();}],{style:7,name:"v'"});
w2 = b2.createElement('point',[
function() {return a.X()*w.X()+b.X()*w.Y();},
function() {return c.X()*w.X()+d.X()*w.Y();}],{style:7,name:"w'"});
va2 = b2.createElement('line',['Ursprung',v2],{straightFirst:false, straightLast:false, lastArrow:true});
wa2 = b2.createElement('line',['Ursprung',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)+'|';}]);
b2.unsuspendUpdate();