Matrix multiplication II: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 1: | Line 1: | ||
<html> | <html> | ||
<script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script> | <script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script> | ||
<form> | |||
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"> | |||
</form> | |||
</html> | </html> | ||
<jsxgraph width="600" height="600"> | <jsxgraph width="600" height="600"> | ||
| Line 11: | Line 14: | ||
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', 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 v = b1.create('point',[2,2],{style:5,name:'v'}); | ||
var va = b1.create('arrow',[[0,0],v]); | var va = b1.create('arrow',[[0,0],v]); | ||
var v2 = b1.create('point',[ | var v2 = b1.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'", color: 'black' | function() {return c.Value()*v.X()+d.Value()*v.Y();}],{style:7, name:"v'", color: 'black'}); | ||
var va2 = b1.create('arrow',[[0,0],v2],{color:'black', strokeWidth:1}); | var va2 = b1.create('arrow',[[0,0],v2],{color:'black', strokeWidth:1}); | ||
| Line 34: | Line 37: | ||
+ "\\]";}]); | + "\\]";}]); | ||
b1.unsuspendUpdate(); | b1.unsuspendUpdate(); | ||
showTrace = false; | |||
var toggleTrace = function() { | |||
showTrace != showTrace; | |||
v1.setProperty({trace: showTrace}); | |||
v2.setProperty({trace: showTrace}); | |||
var b = document.getElementByID("toggleButton"); | |||
if (showTrace) { | |||
b.value = "Hide trace"; | |||
} else { | |||
b.value = "Show trace"; | |||
} | |||
}; | |||
</jsxgraph> | </jsxgraph> | ||
Revision as of 08:56, 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();
