https://jsxgraph.org/wiki/api.php?action=feedcontributions&user=A+WASSERMANN&feedformat=atom
JSXGraph Wiki - User contributions [en]
2024-03-29T07:15:00Z
User contributions
MediaWiki 1.40.1
https://jsxgraph.org/wiki/index.php?title=Riemann_sums&diff=7665
Riemann sums
2024-03-07T13:50:14Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<!--<script type="text/javascript" src="http://korpelainen.net/js/AM1.js"></script>--><br />
</html><br />
<html><br />
<form>Riemann sum type: <select id="sumtype" onChange="brd.update();"><br />
<option value='left' selected> left<br />
<option value='right'> right<br />
<option value='middle'> middle<br />
<option value='trapezoidal'> trapezoidal<br />
<option value='simpson'> simpson<br />
<option value='lower'> lower<br />
<option value='upper'> upper<br />
</select></form><br />
</html><br />
<br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 4, 8, -4]});<br />
var s = brd.create('slider',[[1,3],[5,3],[1,10,50]],{name:'n',snapWidth:1});<br />
var a = brd.create('slider',[[1,2],[5,2],[-10,-3,0]],{name:'start'});<br />
var b = brd.create('slider',[[1,1],[5,1],[0,Math.PI,10]],{name:'end'});<br />
var f = function(x){ return Math.sin(x); };<br />
var plot = brd.create('functiongraph',[f,function(){return a.Value();}, function(){return b.Value();}]);<br />
<br />
var os = brd.create('riemannsum',[f, <br />
function(){ return s.Value();}, function(){ return document.getElementById('sumtype').value;},<br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{fillColor:'#ffff00', fillOpacity:0.3});<br />
<br />
brd.create('text',[-6,-3,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(f,s.Value(),document.getElementById('sumtype').value,a.Value(),b.Value())).toFixed(4); }]);<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 4, 8, -4]});<br />
var s = brd.create('slider',[[1,3],[5,3],[1,10,50]],{name:'n',snapWidth:1});<br />
var a = brd.create('slider',[[1,2],[5,2],[-10,-3,0]],{name:'start'});<br />
var b = brd.create('slider',[[1,1],[5,1],[0,Math.PI,10]],{name:'end'});<br />
var f = function(x){ return Math.sin(x); };<br />
var plot = brd.create('functiongraph',[f,function(){return a.Value();}, function(){return b.Value();}]);<br />
<br />
var os = brd.create('riemannsum',[f, <br />
function(){ return s.Value();}, function(){ return document.getElementById('sumtype').value;},<br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{fillColor:'#ffff00', fillOpacity:0.3});<br />
<br />
brd.create('text',[-6,-3,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(f,s.Value(),document.getElementById('sumtype').value,a.Value(),b.Value())).toFixed(4); }]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Riemann_sums&diff=7664
Riemann sums
2024-03-07T13:49:51Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<!--<script type="text/javascript" src="http://korpelainen.net/js/AM1.js"></script>--><br />
</html><br />
<html><br />
<form>Riemann sum type: <select id="sumtype" onChange="board.update();"><br />
<option value='left' selected> left<br />
<option value='right'> right<br />
<option value='middle'> middle<br />
<option value='trapezoidal'> trapezoidal<br />
<option value='simpson'> simpson<br />
<option value='lower'> lower<br />
<option value='upper'> upper<br />
</select></form><br />
</html><br />
<br />
<jsxgraph width="800" height="400" box="box"><br />
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 4, 8, -4]});<br />
var s = brd.create('slider',[[1,3],[5,3],[1,10,50]],{name:'n',snapWidth:1});<br />
var a = brd.create('slider',[[1,2],[5,2],[-10,-3,0]],{name:'start'});<br />
var b = brd.create('slider',[[1,1],[5,1],[0,Math.PI,10]],{name:'end'});<br />
var f = function(x){ return Math.sin(x); };<br />
var plot = brd.create('functiongraph',[f,function(){return a.Value();}, function(){return b.Value();}]);<br />
<br />
var os = brd.create('riemannsum',[f, <br />
function(){ return s.Value();}, function(){ return document.getElementById('sumtype').value;},<br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{fillColor:'#ffff00', fillOpacity:0.3});<br />
<br />
brd.create('text',[-6,-3,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(f,s.Value(),document.getElementById('sumtype').value,a.Value(),b.Value())).toFixed(4); }]);<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
var brd = JXG.JSXGraph.initBoard('box', {axis:true, boundingbox: [-8, 4, 8, -4]});<br />
var s = brd.create('slider',[[1,3],[5,3],[1,10,50]],{name:'n',snapWidth:1});<br />
var a = brd.create('slider',[[1,2],[5,2],[-10,-3,0]],{name:'start'});<br />
var b = brd.create('slider',[[1,1],[5,1],[0,Math.PI,10]],{name:'end'});<br />
var f = function(x){ return Math.sin(x); };<br />
var plot = brd.create('functiongraph',[f,function(){return a.Value();}, function(){return b.Value();}]);<br />
<br />
var os = brd.create('riemannsum',[f, <br />
function(){ return s.Value();}, function(){ return document.getElementById('sumtype').value;},<br />
function(){return a.Value();}, <br />
function(){return b.Value();}<br />
], <br />
{fillColor:'#ffff00', fillOpacity:0.3});<br />
<br />
brd.create('text',[-6,-3,function(){ return 'Sum='+(JXG.Math.Numerics.riemannsum(f,s.Value(),document.getElementById('sumtype').value,a.Value(),b.Value())).toFixed(4); }]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Function_graph&diff=7663
Function graph
2024-01-25T15:51:19Z
<p>A WASSERMANN: </p>
<hr />
<div>A minimal example how to embed JSXGraph in a web site:<br />
<br />
<jsxgraph width="500" height="200"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2], axis: true});<br />
var fun = board.create('functiongraph', ['sin(x)']);<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="html"><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<meta charset="UTF-8"><br />
<title>JSXGraph template</title><br />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"><br />
<link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" /><br />
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script><br />
<br />
<!-- The next line is optional: load MathJax --><br />
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script><br />
</head><br />
<body><br />
<br />
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div><br />
<br />
<script><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {<br />
boundingbox: [-5, 2, 5, -2], axis: true});<br />
var fun = board.create('functiongraph', ['sin(x)']);<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Function_graph&diff=7662
Function graph
2024-01-25T15:49:35Z
<p>A WASSERMANN: </p>
<hr />
<div>A minimal example how to embed JSXGraph in a web site:<br />
<br />
<jsxgraph width="500" height="200"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});<br />
var fun = board.create('functiongraph', ['sin(x)']);<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
<br />
<source lang="html"><br />
<!doctype html><br />
<html lang="en"><br />
<head><br />
<meta charset="UTF-8"><br />
<title>JSXGraph template</title><br />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"><br />
<link href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css" rel="stylesheet" type="text/css" /><br />
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js" type="text/javascript" charset="UTF-8"></script><br />
<br />
<!-- The next line is optional: load MathJax --><br />
<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script" async></script><br />
</head><br />
<body><br />
<br />
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div><br />
<br />
<script><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});<br />
var fun = board.create('functiongraph', ['sin(x)']);<br />
</script><br />
<br />
</body><br />
</html><br />
<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Function_graph&diff=7661
Function graph
2024-01-25T15:47:59Z
<p>A WASSERMANN: Created page with "<jsxgraph width="500" height="200"> var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); var fun = board.create('functiongraph', ['sin(x)']); </jsxgraph>"</p>
<hr />
<div><jsxgraph width="500" height="200"><br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});<br />
var fun = board.create('functiongraph', ['sin(x)']);<br />
</jsxgraph></div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Documentation&diff=7660
Documentation
2024-01-25T15:46:29Z
<p>A WASSERMANN: </p>
<hr />
<div>* [[Howto include JSXGraph into web pages]]<br />
* [[Displaying GEONExT constructions]]<br />
* [[Displaying Intergeo constructions]]<br />
* [[Use the MediaWiki extension for JSXGraph]]<br />
* [[MediaWiki example]]<br />
* [[Create your own constructions/visualizations using JavaScript]]<br />
** [[Bounding box]]<br />
** [[Point]]<br />
** [[Line]]<br />
** [[Circle]]<br />
** [[Polygon]]<br />
** [[Polygon II]]<br />
** [[Function graph]]<br />
** [[Curve]]<br />
** [[Slider]]<br />
** [[Slider and function plot]]<br />
** [[Grouping objects]]<br />
** [[Turtle]]<br />
** [[Conic sections]]<br />
** [[Ticks]]<br />
** [[Images]]<br />
** [[Animations]]<br />
** [[Animation II]]<br />
** [[Animation III]]<br />
** [[Transformations]]<br />
** [[Images and Transformations]]<br />
** [[Texts and Transformations]]<br />
** [[Texts and Transformations II]]<br />
** [[Pie chart]]<br />
** [[Pie chart II]]<br />
** [[Tape measure]]<br />
* New in 0.93<br />
** [[Magnetized points]]<br />
** [[Segments with fixed length]]<br />
** [[Catmull-Rom splines]]<br />
* [[Mathematical functions]]<br />
* [[Options]]<br />
* [[Browser test]]<br />
* [[Euler line source code]]<br />
* [[Step function]]<br />
* New in 0.99<br />
** [[Cardinal splines]]<br />
** [[Step function II]]<br />
<br />
<br />
[[How to comment the sourcecode for JsDoc-Toolkit]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Use_the_MediaWiki_extension_for_JSXGraph&diff=7659
Use the MediaWiki extension for JSXGraph
2024-01-25T15:31:25Z
<p>A WASSERMANN: </p>
<hr />
<div>Download the MediaWiki extension [https://github.com/jsxgraph/jsxgraph from github].<br />
<br />
<jsxgraph height="500" width="600" board="board" box="mybox"><br />
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
<source lang="xml"><br />
<jsxgraph height="500" width="600" board="board" box="mybox"><br />
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Use_the_MediaWiki_extension_for_JSXGraph&diff=7658
Use the MediaWiki extension for JSXGraph
2024-01-25T15:31:00Z
<p>A WASSERMANN: </p>
<hr />
<div>Download the MediaWiki extension [https://github.com/jsxgraph/jsxgraph].<br />
<br />
<jsxgraph height="500" width="600" board="board" box="mybox"><br />
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
<source lang="xml"><br />
<jsxgraph height="500" width="600" board="board" box="mybox"><br />
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Use_the_MediaWiki_extension_for_JSXGraph&diff=7657
Use the MediaWiki extension for JSXGraph
2024-01-25T15:29:47Z
<p>A WASSERMANN: </p>
<hr />
<div>Download the MediaWiki extension [http://www.mediawiki.org/wiki/Extension:JSXGraph http://www.mediawiki.org/wiki/Extension:JSXGraph here].<br />
<br />
<jsxgraph height="500" width="600" board="board" box="mybox"><br />
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
<source lang="xml"><br />
<jsxgraph height="500" width="600" board="board" box="mybox"><br />
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Use_the_MediaWiki_extension_for_JSXGraph&diff=7656
Use the MediaWiki extension for JSXGraph
2024-01-25T15:28:55Z
<p>A WASSERMANN: </p>
<hr />
<div>Download the MediaWiki extension [http://www.mediawiki.org/wiki/Extension:JSXGraph http://www.mediawiki.org/wiki/Extension:JSXGraph here].<br />
<br />
<jsxgraph height="500" width="600" board="board" box="mybox"><br />
board = JXG.JSXGraph.initBoard('mybox', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
<source lang="xml"><br />
<script type="text/javascript" src="/distrib/GeonextReader.js"></script><br />
<jsxgraph height="500" width="600" board="board" box="jxgbox2"><br />
board = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-10, 10, 14, -10]});<br />
var a = board.create('slider', [[1,8],[5,8],[0,1,4]]);<br />
var b = board.create('slider', [[1,9],[5,9],[0,0.25,4]]);<br />
var c = board.create('curve', [function(phi){return a.Value()+b.Value()*phi; }, [0, 0], 0, 8*Math.PI],<br />
{curveType:'polar', strokewidth:4}); <br />
</jsxgraph><br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Secant_and_tangent&diff=7655
Secant and tangent
2024-01-17T08:26:30Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph box="box" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box2" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box3" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<br />
===The underlying JavaScript code===<br />
<br />
Construction 1:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 2:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 3:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces:true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Secant_and_tangent&diff=7654
Secant and tangent
2024-01-17T08:25:56Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph box="box" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box2" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box3" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<br />
===The underlying JavaScript code===<br />
<br />
Construction 1:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 2:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 3:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true, showClearTraces});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Secant_and_tangent&diff=7653
Secant and tangent
2024-01-17T08:24:49Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph box="box" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box2" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box3" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<br />
===The underlying JavaScript code===<br />
<br />
Construction 1:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 2:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 3:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Secant_and_tangent&diff=7652
Secant and tangent
2024-01-17T08:22:32Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph box="box" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box2" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10], {strokeWidth:3});<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box3" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10], {strokeWidth:3});<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<br />
===The underlying JavaScript code===<br />
<br />
Construction 1:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10], {strokeWidth:3});<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 2:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10]);<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 3:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10]);<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Secant_and_tangent&diff=7651
Secant and tangent
2024-01-17T08:21:18Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph box="box" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10]);<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box2" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box2', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var f = function(x) { return (Math.abs(x)); };<br />
graph = board.create('functiongraph', [f, -10, 10]);<br />
<br />
qf = board.create('glider', [0,0,graph], {size:5});<br />
sf = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qf2 = board.create('point', [function(){ return qf.X()+sf.Value();},<br />
function(){ return f(qf.X()+sf.Value());}], {face:'[]',size:2});<br />
ef = board.create('point', [function(){ return qf2.X()-qf.X();},<br />
function(){ return (qf2.Y()-qf.Y())/(qf2.X()-qf.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qf,qf2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<jsxgraph box="box3" width="600" height="400"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10]);<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</jsxgraph><br />
<br />
<br />
===The underlying JavaScript code===<br />
<br />
Construction 1:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var p = [];<br />
p[0] = board.create('point', [-1,0], {size:2});<br />
p[1] = board.create('point', [-0.5,1], {size:2});<br />
p[2] = board.create('point', [2,0.5], {size:2});<br />
p[3] = board.create('point', [6,5], {size:2});<br />
var pol = JXG.Math.Numerics.lagrangePolynomial(p);<br />
graph = board.create('functiongraph', [pol, -10, 10]);<br />
<br />
q = board.create('glider', [4.5,0,graph], {size:5});<br />
s = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
q2 = board.create('point', [function(){ return q.X()+Math.max(s.Value(),0.01);},<br />
function(){ return pol(q.X()+Math.max(s.Value(),0.01));}], {face:'[]',size:2});<br />
e = board.create('point', [function(){ return q2.X()-q.X();},<br />
function(){ return (q2.Y()-q.Y())/(q2.X()-q.X());}], {style:7,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[q,q2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 2:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10]);<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
Construction 3:<br />
<source lang="javascript"><br />
board = JXG.JSXGraph.initBoard('box3', {boundingbox: [-5, 10, 7, -6], axis: true});<br />
<br />
var g = function(x) { return (x<=0)?0:1; };<br />
graph = board.create('functiongraph', [g,-10, 10]);<br />
<br />
qg = board.create('glider', [0,0,graph], {size:4});<br />
sg = board.create('slider', [[0,-3],[4,-3],[0.001,1,1]]);<br />
qg2 = board.create('point', [function(){ return qg.X()+sg.Value();},<br />
function(){ return g(qg.X()+sg.Value());}], {face:'[]',size:2});<br />
eg = board.create('point', [function(){ return qg2.X()-qg.X();},<br />
function(){ return (qg2.Y()-qg.Y())/(qg2.X()-qg.X());}], {face:'[]',size:2,name:'Sekantensteigung',trace:true});<br />
line = board.create('line',[qg,qg2],{strokeColor:'#ff0000',dash:2});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Calculus]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Matrix_multiplication_II&diff=7650
Matrix multiplication II
2023-11-29T08:20:18Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</html><br />
<jsxgraph width="600" height="600"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</jsxgraph><br />
<br />
This example uses [http://mathjax.org MathJax].<br />
<br />
=== The underlying HTML / JavaScript code ===<br />
<br />
<source lang="HTML"><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
<br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</source><br />
<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7649
Using MathJax
2023-11-29T08:19:08Z
<p>A WASSERMANN: </p>
<hr />
<div>This example uses MathJax to render mathematical text like <br />
\(\int x^2 dx\).<br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
In mediawiki, it is sufficient to load the extension "SimpleMathJax" and configure it by setting<br />
e.g.<br />
<br />
<source lang="php"><br />
$SmjDisplayMath = [[ "\\[", "\\]" ] ];<br />
$SmjExtraInlineMath = [[ "\\(", "\\)" ] ]<br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7648
Using MathJax
2023-11-29T08:15:34Z
<p>A WASSERMANN: </p>
<hr />
<div>This example uses MathJax to render mathematical text like <br />
\(\int x^2 dx\).<br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Matrix_multiplication_II&diff=7647
Matrix multiplication II
2023-11-29T08:05:14Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
<br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</html><br />
<jsxgraph width="600" height="600"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</jsxgraph><br />
<br />
This example uses [http://mathjax.org MathJax].<br />
<br />
=== The underlying HTML / JavaScript code ===<br />
<br />
<source lang="HTML"><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
<br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</source><br />
<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Matrix_multiplication_II&diff=7646
Matrix multiplication II
2023-11-29T08:04:43Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
<br />
<form><br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</form><br />
</html><br />
<jsxgraph width="600" height="600"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</jsxgraph><br />
<br />
This example uses [http://mathjax.org MathJax].<br />
<br />
=== The underlying HTML / JavaScript code ===<br />
<br />
<source lang="HTML"><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
<br />
<form><br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</form><br />
</source><br />
<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7645
Using MathJax
2023-11-29T08:03:17Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</html><br />
This example uses MathJax to render mathematical text like <br />
\(\int x^2 dx\).<br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7644
Using MathJax
2023-11-29T08:02:53Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</html><br />
This example uses MathJax to render mathematical text like <br />
\(\int x^2 \).<br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7643
Using MathJax
2023-11-29T07:57:16Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
\[\int x^2 \]<br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7642
Using MathJax
2023-11-29T07:56:54Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
$\int x^2$.<br />
<br />
\[\int x^2 \]<br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7641
Using MathJax
2023-11-29T07:56:30Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<!--<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>--><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
$\int x^2$.<br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7640
Using MathJax
2023-11-29T07:55:32Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<!--<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script>--><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7639
Using MathJax
2023-11-29T07:51:11Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (in addition to the JSXGraph library):<br />
<source lang="xml"><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7638
Using MathJax
2023-11-29T07:50:17Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js" id="MathJax-script"></script><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):<br />
<source lang="xml"><br />
<script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7637
Using MathJax
2023-11-29T07:49:25Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):<br />
<source lang="xml"><br />
<script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7636
Using MathJax
2023-11-29T07:47:48Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):<br />
<source lang="xml"><br />
<script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Using_MathJax&diff=7635
Using MathJax
2023-11-29T07:47:07Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
</html><br />
This example uses MathJax to render mathematical text. <br />
<br />
''[http://mathjax.org MathJax] is an open-source JavaScript display engine for LaTeX and MathML that works in all modern browsers. It was designed with the goal of consolidating the recent advances in web technologies into a single, definitive, math-on-the-web platform supporting the major browsers and operating systems.''<br />
<br />
The first solutions how to use MathJax in texts inside of a JSXGraph construction have been worked out by [http://www.onemathematicalcat.org/ Carol Fisher] and [http://wiki.paranormalcop.org/ Agentyikes]. Thank you very much for doing this great work. <br />
<br />
Meanwhile, JSXGraph contains full support of MathJax. Here is an example how to enable '''dynamic''' MathJax syntax inside of JSXGraph.<br />
<jsxgraph><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,7,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
The first step is to include the freely available MathJax JavaScript library (additionally to the JSXGraph library):<br />
<source lang="xml"><br />
<script type="text/javascript" src="/distrib/MathJax/MathJax.js"></script><br />
</source><br />
<br />
The second step is to enable MathJax rendering in the JSXGraph options:<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
</source><br />
<br />
To display MathJax inside of JSXGraph, the function that is linked to (dynamic) text has to return valid MathJax syntax.<br />
<source lang="javascript"><br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}], {fontSize:24});<br />
</source><br />
<br />
The complete program code looks like this:<br />
<source lang="javascript"><br />
var brd, k;<br />
JXG.Options.text.useMathJax = true;<br />
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-5,20,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
k = brd.create('slider',[[-4,-2],[3,-2],[-5,1,5]],{name:'n', snapWidth:1});<br />
brd.create('functiongraph', [function(t) {return JXG.Math.pow(Math.E,t*k.Value());}],{strokeColor:'#ff0000'});<br />
brd.create('text',[-4,15,<br />
function() { <br />
return '\\[f(x) = e^{' + k.Value() + 'x}\\]';<br />
}]);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Matrix_multiplication_II&diff=7634
Matrix multiplication II
2023-11-29T07:46:02Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
<br />
<form><br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</form><br />
</html><br />
<jsxgraph width="600" height="600"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</jsxgraph><br />
<br />
This example uses [http://mathjax.org MathJax].<br />
<br />
=== The underlying JavaScript code ===<br />
<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Matrix_multiplication_II&diff=7633
Matrix multiplication II
2023-11-29T07:45:04Z
<p>A WASSERMANN: </p>
<hr />
<div><html><br />
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script><br />
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script><br />
<br />
<form><br />
<input type="button" id="toggleButton" value="Show trace" onClick="toggleTrace()"><br />
</form><br />
</html><br />
<jsxgraph width="600" height="600"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</jsxgraph><br />
<br />
This example uses [http://mathjax.org MathJax].<br />
<br />
=== The underlying JavaScript code ===<br />
<br />
<source lang="javascript"><br />
JXG.Options.text.useMathJax = true;<br />
var b1 = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-10,10,10,-10], axis:true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth:0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth:0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth:0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth:0.1});<br />
<br />
var v = b1.create('point',[2,2],{face:'o', size:2, name:'v'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
<br />
var v2 = b1.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'o', size:2, name:"v'", fillColor: 'black', strokeColor: 'black'});<br />
var va2 = b1.create('arrow',[[0,0],v2],{strokeColor:'black', strokeWidth:1});<br />
<br />
var t = b1.create('text',[-8, 5, <br />
function(){ return '\\[ M = \\left(\\begin{matrix}' <br />
+ (a.Value()).toFixed(2) + '&'<br />
+ (b.Value()).toFixed(2) + '\\\\'<br />
+ (c.Value()).toFixed(2) +'&' <br />
+ (d.Value()).toFixed(2)+'\\end{matrix}\\right)\\]';}]);<br />
<br />
var t2 = b1.create('text',[-8,2,<br />
function(){ return "\\[\\lambda = \\frac{|v'|}{|v|} = " <br />
+ (<br />
JXG.Math.Geometry.distance([0,0],[v2.X(),v2.Y()])/<br />
JXG.Math.Geometry.distance([0,0],[v.X(),v.Y()])<br />
).toFixed(3) <br />
+ "\\]";}]);<br />
b1.unsuspendUpdate();<br />
<br />
showTrace = false;<br />
var toggleTrace = function() {<br />
showTrace = !showTrace;<br />
v.setProperty({trace: showTrace});<br />
v2.setProperty({trace: showTrace});<br />
var b = document.getElementById("toggleButton");<br />
if (showTrace) {<br />
b.value = "Hide trace";<br />
} else {<br />
b.value = "Show trace";<br />
v.clearTrace();<br />
v2.clearTrace();<br />
}<br />
};<br />
</source><br />
<br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Scatter_plot&diff=7632
Scatter plot
2023-11-23T09:04:29Z
<p>A WASSERMANN: </p>
<hr />
<div>Of course, scatter plots can be realized with JSXGraph *point* objects. But if a very large number of points have to be plotted it may be more efficient to (ab)use the *curve* object. Here is a neat little trick how to do this:<br />
each data point is stored twice in the coordinate arrays, followed by NaNs. The NaNs interrupt the line stroke. With strokeWidth you can control the size of the points.<br />
The following example creates 1000 random points between -4 and 4 (in both directions):<br />
<br />
<jsxgraph width="500" height="500"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'});<br />
</jsxgraph><br />
<br />
For a dynamic example, see [[Scatter plot with slider]].<br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Scatter_plot_with_slider&diff=7631
Scatter plot with slider
2023-11-23T09:03:11Z
<p>A WASSERMANN: </p>
<hr />
<div>Here is a dynamic scatter plot whose value depend on a slider. See [[Scatter plot]] for a static scatter plot.<br />
<br />
<jsxgraph width="500" height="500"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);<br />
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3, lineCap: 'round'});<br />
<br />
scatterplot.updateDataArray = function() {<br />
var i, <br />
s = slider.Value(); <br />
<br />
this.dataX = [];<br />
this.dataY = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * s * 2 - s;<br />
this.dataX.push(x, x, NaN);<br />
this.dataY.push(y, y, NaN);<br />
}<br />
};<br />
<br />
board.update();<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var slider = board.create('slider', [[-3, 4.5], [3, 4.5], [0,3,5]]);<br />
var scatterplot = board.create('curve', [[], []], {strokeWidth: 3, lineCap: 'round'});<br />
<br />
scatterplot.updateDataArray = function() {<br />
var i, <br />
s = slider.Value(); <br />
<br />
this.dataX = [];<br />
this.dataY = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * s * 2 - s;<br />
this.dataX.push(x, x, NaN);<br />
this.dataY.push(y, y, NaN);<br />
}<br />
};<br />
<br />
board.update();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Scatter_plot&diff=7630
Scatter plot
2023-11-23T09:02:42Z
<p>A WASSERMANN: </p>
<hr />
<div>Of course, scatter plots can be realized with JSXGraph *point* objects. But if a very large number of points have to be plotted it may be more efficient to (ab)use the *curve* object. Here is a neat little trick how to do this:<br />
each data point is stored twice in the coordinate arrays, followed by NaNs. The NaNs interrupt the line stroke. With strokeWidth you can control the size of the points.<br />
The following example creates 1000 random points between -4 and 4 (in both directions):<br />
<br />
<jsxgraph width="500" height="500"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Scatter_plot&diff=7629
Scatter plot
2023-11-23T09:02:25Z
<p>A WASSERMANN: </p>
<hr />
<div>Of course, scatter plots can be realized with JSXGraph *point* objects. But if a very large number of points have to be plotted it may be more efficient to (ab)use the *curve* object. Here is a neat little trick how to do this:<br />
each data point is stored twice in the coordinate arrays, followed by NaNs. The NaNs interrupt the line stroke. With strokeWidth you can control the size of the points.<br />
The following example creates 1000 random points between -4 and 4 (in both directions):<br />
<br />
<jsxgraph width="500" height="500"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
board.create('point', [1,1]);<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'round'});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Scatter_plot&diff=7628
Scatter plot
2023-11-23T09:01:02Z
<p>A WASSERMANN: </p>
<hr />
<div>Of course, scatter plots can be realized with JSXGraph *point* objects. But if a very large number of points have to be plotted it may be more efficient to (ab)use the *curve* object. Here is a neat little trick how to do this:<br />
each data point is stored twice in the coordinate arrays, followed by NaNs. The NaNs interrupt the line stroke. With strokeWidth you can control the size of the points.<br />
The following example creates 1000 random points between -4 and 4 (in both directions):<br />
<br />
<jsxgraph width="500" height="500"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3});<br />
</jsxgraph><br />
<br />
===The underlying JavaScript code===<br />
<source lang="javascript"><br />
const board = JXG.JSXGraph.initBoard('jxgbox', { <br />
boundingbox: [-5, 5, 5, -5], axis:true<br />
});<br />
<br />
var i, x, y, <br />
x_arr = [], <br />
y_arr = [];<br />
for (i = 0; i < 1000; i++) {<br />
x = Math.random() * 8 - 4;<br />
y = Math.random() * 8 - 4;<br />
x_arr.push(x, x, NaN);<br />
y_arr.push(y, y, NaN);<br />
}<br />
<br />
var scatterplot = board.create('curve', [x_arr, y_arr], {strokeWidth: 3, lineCap: 'rounded'});<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Curves]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Texts_and_Transformations&diff=7627
Texts and Transformations
2023-08-09T15:55:48Z
<p>A WASSERMANN: </p>
<hr />
<div>==A simple text rotation==<br />
Rotate the text "Hello World" by 30° around its lower left corner. Don't forget to update the board at the end, otherwise the transformations is not applied.<br />
<jsxgraph with="500" height="500" box="box1"><br />
(function(){<br />
var brd, txt;<br />
<br />
brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});<br />
<br />
// Rotate text around the lower left corner (-2,-1) by 30 degrees.<br />
var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
brd.update();<br />
})();<br />
</jsxgraph><br />
===The JavaScript code===<br />
<source lang="javascript"><br />
var brd, txt;<br />
<br />
brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});<br />
<br />
// Rotate text around the lower left corner (-2,-1) by 30 degrees.<br />
var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
brd.update();<br />
</source><br />
<br />
==A more complex example==<br />
The same transformations we applied to images in [[Images and Transformations]] can be applied to texts, too. <br />
<br />
<jsxgraph with="500" height="500" box="box2"><br />
(function(){<br />
var brd, txt, p0, p1;<br />
<br />
brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); <br />
txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});<br />
<br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
tOff.bindTo(txt);<br />
tOff.bindTo(p1);<br />
// Rotate text around point "offset" by dragging point "rotate+scale"<br />
var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
<br />
// Scale text by dragging point "rot+scale"<br />
// We do this by moving the text back to the origin (inverse of transformation tOff),<br />
// then scale the text (because scaling "starts from (0,0))<br />
// Finally, we move the text back to point "Offset"<br />
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); <br />
var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},<br />
function(){return p1.Dist(p0)/3;}], {type:'scale'}); <br />
tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);<br />
<br />
})();<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
Here is the complete code to accomplish this behaviour.<br />
<source lang="javascript"><br />
var brd, txt, p0, p1;<br />
<br />
brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); <br />
txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});<br />
<br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
tOff.bindTo(txt);<br />
tOff.bindTo(p1);<br />
// Rotate text around point "offset" by dragging point "rotate+scale"<br />
var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
<br />
// Scale text by dragging point "rot+scale"<br />
// We do this by moving the text back to the origin (inverse of transformation tOff),<br />
// then scale the text (because scaling "starts from (0,0))<br />
// Finally, we move the text back to point "Offset"<br />
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); <br />
var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},<br />
function(){return p1.Dist(p0)/3;}], {type:'scale'}); <br />
tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Texts_and_Transformations_II&diff=7626
Texts and Transformations II
2023-08-09T15:54:36Z
<p>A WASSERMANN: </p>
<hr />
<div>=== The problem ===<br />
This example is similar to the one [[Texts and Transformations]], beside that the x-axis and <br />
the y-axis have different scalings. To be precise, the ratio of the two scalings is equal to 4.<br />
The result is that rotating the text and the image will also stretch these objects.<br />
<jsxgraph with="500" height="500" box="box1"><br />
(function(){<br />
var brd, txt, im, p0, p1;<br />
<br />
brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate'}); <br />
txt = brd.create('text',[0,0, 'Hello'], {fontSize:64});<br />
im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});<br />
<br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
tOff.bindTo(txt);<br />
tOff.bindTo(im);<br />
tOff.bindTo(p1);<br />
<br />
// Rotate text around point "offset" by dragging point "rotate"<br />
var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
tRot.bindTo(im);<br />
<br />
})();<br />
</jsxgraph><br />
Here is the code for this example.<br />
<source lang="javascript"><br />
(function(){<br />
var brd, txt, im, p0, p1;<br />
<br />
brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate'}); <br />
txt = brd.create('text',[0,0, 'Hello'], {fontSize:64});<br />
im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});<br />
<br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
tOff.bindTo(txt);<br />
tOff.bindTo(im);<br />
tOff.bindTo(p1);<br />
<br />
// Rotate text around point "offset" by dragging point "rotate"<br />
var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
tRot.bindTo(im);<br />
<br />
})();<br />
</source><br />
<br />
=== The solution ===<br />
In order to avoid this effect, we have to do the following steps:<br />
* The rotation center has to be moved to the origin.<br />
<source lang="javascript"><br />
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); <br />
</source><br />
* The objects have to be scaled by the ratio between the scalings of the axes, i.e. 4.<br />
<source lang="javascript"><br />
var ts1 = brd.create('transform', [function(){return ratio;}, function(){return 1;}], {type:'scale'}); <br />
</source><br />
* Now we rotate around the the origin (where the angle is also scaled)<br />
<source lang="javascript"><br />
var tRot = brd.create('transform', [function(){return Math.atan2((p1.Y()-p0.Y())/ratio, p1.X()-p0.X());}], {type:'rotate'}); <br />
</source><br />
* The scaling has to be undone.<br />
<source lang="javascript"><br />
var ts2 = brd.create('transform', [function(){return 1/ratio;}, function(){return 1;}], {type:'scale'}); <br />
</source><br />
* The rotation center is moved back. <br />
<source lang="javascript"><br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
</source><br />
All these transformations have to be applied to the image and the text:<br />
<source lang="javascript"><br />
tOffInv.bindTo(txt); ts1.bindTo(txt); tRot.bindTo(txt); ts2.bindTo(txt); tOff.bindTo(txt);<br />
tOffInv.bindTo(im); ts1.bindTo(im); tRot.bindTo(im); ts2.bindTo(im); tOff.bindTo(im);<br />
</source><br />
<jsxgraph with="500" height="500" box="box2"><br />
(function(){<br />
var brd, txt, p0, p1, p2, im;<br />
<br />
brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate here'}); <br />
p2 = brd.create('point', [0,4], {color:'blue', trace:true}); <br />
txt = brd.create('text',[0, 0, JXG.JSXGraph.rendererType], {fontSize:64});<br />
im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});<br />
<br />
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); <br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
<br />
tOff.bindTo(p1);<br />
tOff.bindTo(txt);<br />
tOff.bindTo(im);<br />
<br />
// This is a rotation in screen coordinates.<br />
// ratio is the the ratio between the board dimensions (maxY-minY)/(maxX-minX) in user coordinates<br />
ratio = 4;<br />
var ts1 = brd.create('transform', [function(){return ratio;}, function(){return 1;}], {type:'scale'}); <br />
var ts2 = brd.create('transform', [function(){return 1/ratio;}, function(){return 1;}], {type:'scale'}); <br />
var tRot = brd.create('transform', [function(){return Math.atan2((p1.Y()-p0.Y())/ratio, p1.X()-p0.X());}], {type:'rotate'}); <br />
<br />
// Rotate text around point "offset" by dragging point "rotate"<br />
tOffInv.bindTo(txt); ts1.bindTo(txt); tRot.bindTo(txt); ts2.bindTo(txt); tOff.bindTo(txt);<br />
tOffInv.bindTo(im); ts1.bindTo(im); tRot.bindTo(im); ts2.bindTo(im); tOff.bindTo(im);<br />
<br />
tRot.bindTo(p2); // For comparison, a rotation in user coordinates.<br />
<br />
brd.update();<br />
<br />
})();<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
Here is the complete code.<br />
<source lang="javascript"><br />
(function(){<br />
var brd, txt, p0, p1, p2, im;<br />
<br />
brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,20,5,-20], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate here'}); <br />
p2 = brd.create('point', [0,4], {color:'blue', trace:true}); <br />
txt = brd.create('text',[0, 0, JXG.JSXGraph.rendererType], {fontSize:64});<br />
im = brd.create('image',["/distrib/images/uccellino.jpg", [0,0], [3,12]], {opacity:0.5});<br />
<br />
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); <br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
<br />
tOff.bindTo(p1);<br />
tOff.bindTo(txt);<br />
tOff.bindTo(im);<br />
<br />
// This is a rotation in screen coordinates.<br />
// ratio is the the ratio between the board dimensions (maxY-minY)/(maxX-minX) in user coordinates<br />
ratio = 4;<br />
var ts1 = brd.create('transform', [function(){return ratio;}, function(){return 1;}], {type:'scale'}); <br />
var ts2 = brd.create('transform', [function(){return 1/ratio;}, function(){return 1;}], {type:'scale'}); <br />
var tRot = brd.create('transform', [function(){return Math.atan2((p1.Y()-p0.Y())/ratio, p1.X()-p0.X());}], {type:'rotate'}); <br />
<br />
// Rotate text around point "offset" by dragging point "rotate"<br />
tOffInv.bindTo(txt); ts1.bindTo(txt); tRot.bindTo(txt); ts2.bindTo(txt); tOff.bindTo(txt);<br />
tOffInv.bindTo(im); ts1.bindTo(im); tRot.bindTo(im); ts2.bindTo(im); tOff.bindTo(im);<br />
<br />
tRot.bindTo(p2); // For comparison, a rotation in user coordinates.<br />
<br />
brd.update();<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Texts_and_Transformations&diff=7625
Texts and Transformations
2023-08-09T15:53:20Z
<p>A WASSERMANN: </p>
<hr />
<div>==A simple text rotation==<br />
Rotate the text "Hello World" by 30° around its lower left corner. Don't forget to update the board at the end, otherwise the transformations is not applied.<br />
<jsxgraph with="500" height="500" box="box1"><br />
(function(){<br />
var brd, txt;<br />
JXG.Options.text.display = 'internal';<br />
<br />
brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});<br />
<br />
// Rotate text around the lower left corner (-2,-1) by 30 degrees.<br />
var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
brd.update();<br />
})();<br />
</jsxgraph><br />
===The JavaScript code===<br />
<source lang="javascript"><br />
var brd, txt;<br />
JXG.Options.text.display = 'internal';<br />
<br />
brd = JXG.JSXGraph.initBoard('box1', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
txt = brd.create('text',[-2,-1, 'Hello World'], {fontSize:30});<br />
<br />
// Rotate text around the lower left corner (-2,-1) by 30 degrees.<br />
var tRot = brd.create('transform', [30.0*Math.PI/180.0, -2,-1], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
brd.update();<br />
</source><br />
<br />
==A more complex example==<br />
The same transformations we applied to images in [[Images and Transformations]] can be applied to texts, too. <br />
<br />
<jsxgraph with="500" height="500" box="box2"><br />
(function(){<br />
var brd, txt, p0, p1;<br />
JXG.Options.text.display = 'internal';<br />
<br />
brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); <br />
txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});<br />
<br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
tOff.bindTo(txt);<br />
tOff.bindTo(p1);<br />
// Rotate text around point "offset" by dragging point "rotate+scale"<br />
var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
<br />
// Scale text by dragging point "rot+scale"<br />
// We do this by moving the text back to the origin (inverse of transformation tOff),<br />
// then scale the text (because scaling "starts from (0,0))<br />
// Finally, we move the text back to point "Offset"<br />
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); <br />
var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},<br />
function(){return p1.Dist(p0)/3;}], {type:'scale'}); <br />
tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);<br />
<br />
})();<br />
</jsxgraph><br />
<br />
===The JavaScript code===<br />
Here is the complete code to accomplish this behaviour.<br />
<source lang="javascript"><br />
var brd, txt, p0, p1;<br />
JXG.Options.text.display = 'internal';<br />
<br />
brd = JXG.JSXGraph.initBoard('box2', {boundingbox:[-5,5,5,-5], axis:true, showNavigation:true, showCopyright:true});<br />
p0 = brd.create('point', [0,0], {style:5, name:'offset'}); <br />
p1 = brd.create('point', [3,0], {style:5, name:'rotate+scale'}); <br />
txt = brd.create('text',[0,0, 'Hello World'], {fontSize:30});<br />
<br />
var tOff = brd.create('transform', [function(){return p0.X()},function(){return p0.Y()}], {type:'translate'}); <br />
tOff.bindTo(txt);<br />
tOff.bindTo(p1);<br />
// Rotate text around point "offset" by dragging point "rotate+scale"<br />
var tRot = brd.create('transform', [function(){return Math.atan2(p1.Y()-p0.Y(),p1.X()-p0.X())}, p0], {type:'rotate'}); <br />
tRot.bindTo(txt);<br />
<br />
// Scale text by dragging point "rot+scale"<br />
// We do this by moving the text back to the origin (inverse of transformation tOff),<br />
// then scale the text (because scaling "starts from (0,0))<br />
// Finally, we move the text back to point "Offset"<br />
var tOffInv = brd.create('transform', [function(){return -p0.X()},function(){return -p0.Y()}], {type:'translate'}); <br />
var tScale = brd.create('transform', [function(){return p1.Dist(p0)/3;},<br />
function(){return p1.Dist(p0)/3;}], {type:'scale'}); <br />
tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Text]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Matrix_multiplication&diff=7624
Matrix multiplication
2023-07-17T13:50:56Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph box="box1" width="400" height="300"><br />
var b1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth: 0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth: 0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth: 0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth: 0.1});<br />
<br />
var v = b1.create('point',[2,2],{size:3,name:'v'});<br />
var w = b1.create('point',[-2,1],{size:3,name:'w'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
var wa = b1.create('arrow',[[0,0],w]);<br />
b1.unsuspendUpdate();<br />
</jsxgraph><br />
<br />
<jsxgraph box="box2" width="400" height="300"><br />
var b2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.addChild(b2);<br />
b2.suspendUpdate();<br />
<br />
var v2 = b2.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'[]',size:2,name:"v'"});<br />
var w2 = b2.create('point',[<br />
function() {return a.Value()*w.X()+b.Value()*w.Y();},<br />
function() {return c.Value()*w.X()+d.Value()*w.Y();}],{face:'[]',size:2,name:"w'"});<br />
var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
var wa2 = b2.create('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
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)+'|';}]);<br />
b2.unsuspendUpdate();<br />
</jsxgraph><br />
<br />
=== References ===<br />
* [http://en.wikipedia.org/wiki/Matrix_multiplication http://en.wikipedia.org/wiki/Matrix_multiplication]<br />
<br />
=== The underlying JavaScript code ===<br />
<br />
<source lang="javascript"><br />
var b1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.suspendUpdate();<br />
<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth: 0.1});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth: 0.1});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth: 0.1});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth: 0.1});<br />
<br />
var v = b1.create('point',[2,2],{size:3,name:'v'});<br />
var w = b1.create('point',[-2,1],{size:3,name:'w'});<br />
var va = b1.create('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});<br />
var wa = b1.create('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});<br />
b1.unsuspendUpdate();<br />
<br />
var b2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.addChild(b2);<br />
b2.suspendUpdate();<br />
<br />
var v2 = b2.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'[]',size:2,name:"v'"});<br />
var w2 = b2.create('point',[<br />
function() {return a.Value()*w.X()+b.Value()*w.Y();},<br />
function() {return c.Value()*w.X()+d.Value()*w.Y();}],{face:'[]',size:2,name:"w'"});<br />
var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
var wa2 = b2.create('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
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)+'|';}]);<br />
b2.unsuspendUpdate();<br />
<br />
</source><br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Matrix_multiplication&diff=7623
Matrix multiplication
2023-07-17T13:48:27Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph box="box1" width="400" height="300"><br />
var b1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.suspendUpdate();<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth: 0.2});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth: 0.2});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth: 0.2});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth: 0.2});<br />
<br />
var v = b1.create('point',[2,2],{size:3,name:'v'});<br />
var w = b1.create('point',[-2,1],{size:3,name:'w'});<br />
var va = b1.create('arrow',[[0,0],v]);<br />
var wa = b1.create('arrow',[[0,0],w]);<br />
b1.unsuspendUpdate();<br />
</jsxgraph><br />
<br />
<jsxgraph box="box2" width="400" height="300"><br />
var b2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.addChild(b2);<br />
b2.suspendUpdate();<br />
<br />
var v2 = b2.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'[]',size:2,name:"v'"});<br />
var w2 = b2.create('point',[<br />
function() {return a.Value()*w.X()+b.Value()*w.Y();},<br />
function() {return c.Value()*w.X()+d.Value()*w.Y();}],{face:'[]',size:2,name:"w'"});<br />
var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
var wa2 = b2.create('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
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)+'|';}]);<br />
b2.unsuspendUpdate();<br />
</jsxgraph><br />
<br />
=== References ===<br />
* [http://en.wikipedia.org/wiki/Matrix_multiplication http://en.wikipedia.org/wiki/Matrix_multiplication]<br />
<br />
=== The underlying JavaScript code ===<br />
<br />
<source lang="javascript"><br />
var b1 = JXG.JSXGraph.initBoard('box1', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.suspendUpdate();<br />
<br />
var a = b1.create('slider',[[-5,-2],[5,-2],[-5,1,5]],{name:'a', snapWidth: 0.2});<br />
var b = b1.create('slider',[[-5,-3],[5,-3],[-5,0,5]],{name:'b', snapWidth: 0.2});<br />
var c = b1.create('slider',[[-5,-4],[5,-4],[-5,0,5]],{name:'c', snapWidth: 0.2});<br />
var d = b1.create('slider',[[-5,-5],[5,-5],[-5,1,5]],{name:'d', snapWidth: 0.2});<br />
<br />
var v = b1.create('point',[2,2],{size:3,name:'v'});<br />
var w = b1.create('point',[-2,1],{size:3,name:'w'});<br />
var va = b1.create('line',[[0,0],v],{straightFirst:false, straightLast:false, lastArrow:true});<br />
var wa = b1.create('line',[[0,0],w],{straightFirst:false, straightLast:false, lastArrow:true});<br />
b1.unsuspendUpdate();<br />
<br />
var b2 = JXG.JSXGraph.initBoard('box2', {boundingbox: [-7.5, 7.5, 12.5, -7.5], axis: true});<br />
b1.addChild(b2);<br />
b2.suspendUpdate();<br />
<br />
var v2 = b2.create('point',[<br />
function() {return a.Value()*v.X()+b.Value()*v.Y();},<br />
function() {return c.Value()*v.X()+d.Value()*v.Y();}],{face:'[]',size:2,name:"v'"});<br />
var w2 = b2.create('point',[<br />
function() {return a.Value()*w.X()+b.Value()*w.Y();},<br />
function() {return c.Value()*w.X()+d.Value()*w.Y();}],{face:'[]',size:2,name:"w'"});<br />
var va2 = b2.create('line',[[0,0],v2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
var wa2 = b2.create('line',[[0,0],w2],{straightFirst:false, straightLast:false, lastArrow:true});<br />
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)+'|';}]);<br />
b2.unsuspendUpdate();<br />
<br />
</source><br />
<br />
[[Category:Examples]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Shear_transformation&diff=7622
Shear transformation
2023-06-13T13:54:55Z
<p>A WASSERMANN: </p>
<hr />
<div>Shear transformation<br />
<br />
:<math><br />
\varphi: {\cal A}(\mathbb{R}^2) \to {\cal A}(\mathbb{R}^2), \; x \mapsto \begin{pmatrix}1 & 1 \\ 0& 1\end{pmatrix}<br />
</math><br />
Points of the form <math>{x\choose \lambda}</math> are mapped to:<br />
:<math><br />
\varphi({x\choose \lambda}) = {x + \lambda\choose\lambda}<br />
</math><br />
<br />
<jsxgraph width="500" height="500"><br />
JXG.Options.label.autoPosition = true;<br />
JXG.Options.text.fontSize = 20;<br />
JXG.Options.line.strokeWidth = 1;<br />
<br />
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 14, 14, -5], axis: true});<br />
<br />
var x = board.defaultAxes.x;<br />
var y = board.defaultAxes.y;<br />
<br />
var q = board.create('point', [2, 10], {name: 'q', snapToGrid: false});<br />
var q1 = board.create('point', [<br />
() => q.X() + q.Y(),<br />
() => q.Y()<br />
], {name: '&phi;(q)', color: 'blue'});<br />
<br />
var qx = board.create('point', [<br />
() => q.X(),<br />
() => 0<br />
], {visible: false});<br />
<br />
var s1 = board.create('segment', [q, q1], {dash:2});<br />
var s2 = board.create('segment', [qx, q], {dash:2});<br />
var l1 = board.create('line', [q, qx], {visible: false});<br />
<br />
var r1 = board.create('line', [[0, 0], q], {straightFirst: false});<br />
<br />
var p = board.create('glider', [1, 3, r1], {name: 'p'});<br />
var p1 = board.create('point', [<br />
() => p.X() + p.Y(),<br />
() => p.Y()<br />
], {name: '&phi;(p)', color: 'blue'});<br />
<br />
var px = board.create('point', [<br />
() => p.X(),<br />
() => 0<br />
], {visible: false});<br />
<br />
var r2 = board.create('line', [[0, 0], q1], {straightFirst: false});<br />
<br />
var s3 = board.create('segment', [p, p1], {dash:2});<br />
var s4 = board.create('segment', [px, p], {dash:2});<br />
<br />
board.create('hatch', [s1, 1]);<br />
board.create('hatch', [s2, 1]);<br />
<br />
board.create('hatch', [s3, 2]);<br />
board.create('hatch', [s4, 2]);<br />
</jsxgraph><br />
<br />
=== The underlying JavaScript code ===<br />
<br />
<source lang="javascript"><br />
JXG.Options.label.autoPosition = true;<br />
JXG.Options.text.fontSize = 20;<br />
JXG.Options.line.strokeWidth = 1;<br />
<br />
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 14, 14, -5], axis: true});<br />
<br />
var x = board.defaultAxes.x;<br />
var y = board.defaultAxes.y;<br />
<br />
var q = board.create('point', [2, 10], {name: 'q', snapToGrid: false});<br />
var q1 = board.create('point', [<br />
() => q.X() + q.Y(),<br />
() => q.Y()<br />
], {name: '&phi;(q)', color: 'blue'});<br />
<br />
var qx = board.create('point', [<br />
() => q.X(),<br />
() => 0<br />
], {visible: false});<br />
<br />
var s1 = board.create('segment', [q, q1], {dash:2});<br />
var s2 = board.create('segment', [qx, q], {dash:2});<br />
var l1 = board.create('line', [q, qx], {visible: false});<br />
<br />
var r1 = board.create('line', [[0, 0], q], {straightFirst: false});<br />
<br />
var p = board.create('glider', [1, 3, r1], {name: 'p'});<br />
var p1 = board.create('point', [<br />
() => p.X() + p.Y(),<br />
() => p.Y()<br />
], {name: '&phi;(p)', color: 'blue'});<br />
<br />
var px = board.create('point', [<br />
() => p.X(),<br />
() => 0<br />
], {visible: false});<br />
<br />
var r2 = board.create('line', [[0, 0], q1], {straightFirst: false});<br />
<br />
var s3 = board.create('segment', [p, p1], {dash:2});<br />
var s4 = board.create('segment', [px, p], {dash:2});<br />
<br />
board.create('hatch', [s1, 1]);<br />
board.create('hatch', [s2, 1]);<br />
<br />
board.create('hatch', [s3, 2]);<br />
board.create('hatch', [s4, 2]);<br />
</source><br />
[[Category:Examples]]<br />
[[Category:Geometry]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Cannonball&diff=7621
Cannonball
2023-01-24T14:49:46Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph width="800" height="400"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shootButton,<br />
resetButton,<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(), cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
},<br />
<br />
shoot = function() {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
},<br />
resetFunc = function() {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
};<br />
<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
shootButton = board.create('button', [9, 9.5, 'Shoot', shoot]),<br />
resetButton = board.create('button', [11, 9.5, 'Reset', resetFunc]);<br />
})();<br />
</jsxgraph><br />
<br />
<source lang="javascript"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shootButton,<br />
resetButton,<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(), cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
},<br />
<br />
shoot = function() {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
},<br />
resetFunc = function() {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
};<br />
<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
shootButton = board.create('button', [9, 9.5, 'Shoot', shoot]),<br />
resetButton = board.create('button', [11, 9.5, 'Reset', resetFunc]);<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Physics]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Cannonball&diff=7620
Cannonball
2023-01-24T14:48:23Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph width="800" height="400"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shootButton,<br />
resetButton,<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
},<br />
<br />
shoot = function() {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
},<br />
resetFunc = function() {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
};<br />
<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
shootButton = board.create('button', [9, 9.5, 'Shoot', shoot]),<br />
resetButton = board.create('button', [11, 9.5, 'Reset', resetFunc]);<br />
})();<br />
</jsxgraph><br />
<br />
<source lang="javascript"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('cannon', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['img/cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['img/cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),<br />
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
};<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Physics]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Cannonball&diff=7619
Cannonball
2023-01-24T14:47:53Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph width="800" height="400"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shootButton,<br />
resetButton,<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
},<br />
<br />
shoot = function() {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
},<br />
resetFunc = function() {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
};<br />
<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
shootButton = board.create('button', [9, 9.5, 'Shoot', shoot]),<br />
resetButton = board.create('text', [11, 9.5, 'Reset', resetFunc]);<br />
/*<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
*/<br />
})();<br />
</jsxgraph><br />
<br />
<source lang="javascript"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('cannon', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['img/cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['img/cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),<br />
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
};<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Physics]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Cannonball&diff=7618
Cannonball
2023-01-24T14:47:18Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph width="800" height="400"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shootButton,<br />
resetButton,<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
},<br />
<br />
shoot = function() {<br />
console.log("shoot");<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
},<br />
resetFunc = function() {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
};<br />
<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
shootButton = board.create('button', [9, 9.5, 'Shoot', shoot]),<br />
resetButton = board.create('text', [11, 9.5, 'Reset', resetFunc]),<br />
/*<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
*/<br />
})();<br />
</jsxgraph><br />
<br />
<source lang="javascript"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('cannon', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['img/cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['img/cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),<br />
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
};<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Physics]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Cannonball&diff=7617
Cannonball
2023-01-24T14:46:39Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph width="800" height="400"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shootButton,<br />
resetButton,<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
},<br />
<br />
shoot = function() {<br />
console.log("shoot");<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
},<br />
resetFunc = function() {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
};<br />
<br />
shootButton = board.create('button', [9, 9.5, 'Shoot', shoot]),<br />
resetButton = board.create('text', [11, 9.5, 'Reset', resetFunc]),<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
<br />
})();<br />
</jsxgraph><br />
<br />
<source lang="javascript"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('cannon', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['img/cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['img/cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),<br />
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
};<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Physics]]</div>
A WASSERMANN
https://jsxgraph.org/wiki/index.php?title=Cannonball&diff=7616
Cannonball
2023-01-24T14:45:19Z
<p>A WASSERMANN: </p>
<hr />
<div><jsxgraph width="800" height="400"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/1/13/Cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['https://jsxgraph.uni-bayreuth.de/wiki/images/e/e4/Cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shootButton,<br />
resetButton,<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
},<br />
<br />
shoot = function() {<br />
console.log("shoot");<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
};<br />
<br />
shootButton = board.create('button', [9, 9.5, 'Shoot', shoot]),<br />
resetButton = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
/*<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
*/<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
<br />
})();<br />
</jsxgraph><br />
<br />
<source lang="javascript"><br />
(function () {<br />
var board = JXG.JSXGraph.initBoard('cannon', {boundingbox: [0, 10, 20, 0], showCopyright: false, showNavigation: false}),<br />
bottom = board.create('image', ['img/cannon_bottom.png', [0, 0.3], [2, 1]], {layer: 1}),<br />
muzzle = board.create('image', ['img/cannon_muzzle.png', [0, 1.05], [3, 0.75]], {layer: 0}),<br />
shoot = board.create('text', [9, 9.5, '<button id="shoot">Shoot</button>']),<br />
reset = board.create('text', [11, 9.5, '<button id="reset">Reset</button>']),<br />
rot, rp, cp, cc, cannonball, cbanim, solution, velocity,<br />
<br />
animTime = function () {<br />
return 3000;<br />
},<br />
<br />
fAngle = function () {<br />
return Math.atan2(cp.Y()-rp.Y(),cp.X()-rp.X());<br />
},<br />
<br />
fSolution = function (x) {<br />
var b = fAngle(),<br />
g = 9.81/2;<br />
<br />
return Math.tan(b)*(x - cannonball.X()) - g*(Math.pow((x - cannonball.X())/(velocity.Value()*Math.cos(b)), 2)) + cannonball.Y();<br />
},<br />
<br />
fAnim = function (t) {<br />
var i = Math.floor(solution.points.length*t/animTime())/*3 + 17*t/animTime()*/,<br />
s = NaN;<br />
<br />
if (JXG.exists(solution.points[i]) && solution.points[i].usrCoords[2] > 0) {<br />
s = solution.points[i].usrCoords.slice(1);<br />
}<br />
<br />
return s;<br />
};<br />
<br />
board.options.animationDelay = 50;<br />
<br />
velocity = board.create('slider', [[1, 9.5], [6, 9.5], [0, 5, 15]], {name: 'Velocity'});<br />
<br />
cp = board.create('point', [1.4, 1.4], {fixed: true, visible: false});<br />
cc = board.create('circle', [cp, 1.25], {visible: false});<br />
rp = board.create('glider', [0, 1.4, cc], {withLabel: false, showInfobox: false, color: 'black'});<br />
<br />
rot = board.create('transform', [fAngle, cp], {type: 'rotate'});<br />
rot.bindTo(muzzle);<br />
<br />
cannonball = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true});<br />
cbanim = board.create('point', [3, 1.4], {size: 8, strokeColor: 'black', fillColor: 'gray', withLabel: false, fixed: true, visible: false});<br />
rot.bindTo(cannonball);<br />
solution = board.create('plot', [fSolution, function () { return cannonball.X(); }, 20], {visible: true, doAdvancedPlot: false});<br />
<br />
<br />
JXG.addEvent(document.getElementById('shoot'), 'mouseup', function () {<br />
cannonball.setAttribute({<br />
visible: false<br />
});<br />
cbanim.setAttribute({<br />
visible: true<br />
});<br />
cbanim.moveTo([cannonball.X(), cannonball.Y()]);<br />
<br />
cbanim.moveAlong(fAnim, animTime(), {<br />
callback: function () {<br />
// this is executed when the animation is finished<br />
}<br />
});<br />
}, this);<br />
<br />
JXG.addEvent(document.getElementById('reset'), 'mouseup', function () {<br />
board.stopAllAnimation();<br />
cbanim.setAttribute({visible: false});<br />
cannonball.setAttribute({visible: true});<br />
}, this);<br />
<br />
})();<br />
</source><br />
<br />
[[Category:Examples]]<br />
[[Category:Physics]]</div>
A WASSERMANN