Points with constraints (dup): Difference between revisions
From JSXGraph Wiki
No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 7: | Line 7: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | ||
var free = b. | var free = b.create('point',[0,0], {name:'A', style:5}); | ||
var dep = b. | var dep = b.create('point',["X(A)",1], {name:'B', style:8}); | ||
</source> | </source> | ||
<html> | <html> | ||
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | <link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | ||
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | <script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script> | ||
<div id="jxgbox1" class="jxgbox" style="width:600px; height:200px;"></div> | <div id="jxgbox1" class="jxgbox" style="width:600px; height:200px;"></div> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | ||
var free = b. | var free = b.create('point',[0,0], {name:'A', style:5}); | ||
var dep = b. | var dep = b.create('point',["X(A)",1], {name:'B', style:8}); | ||
</script> | </script> | ||
</html> | </html> | ||
| Line 25: | Line 24: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | ||
var free = b2. | var free = b2.create('point',[0,0], {name:'A', style:5}); | ||
var dep = b2. | var dep = b2.create('point',[function(){ return free.X();}, 1], {name:'B', style:8}); | ||
</source> | </source> | ||
<html> | <html> | ||
| Line 32: | Line 31: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40}); | ||
var free = b2. | var free = b2.create('point',[0,0], {name:'A', style:5}); | ||
var dep = b2. | var dep = b2.create('point',[function(){ return free.X();}, 1], {name:'B', style:8}); | ||
</script> | </script> | ||
</html> | </html> | ||
| Line 40: | Line 39: | ||
First we construct a free, draggable point called "free". | First we construct a free, draggable point called "free". | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var free = b2. | var free = b2.create('point',[0,0], {name:'A', style:5}); | ||
</source> | </source> | ||
Then we construct the dependent point "dep". | Then we construct the dependent point "dep". | ||
<source lang="javascript"> | <source lang="javascript"> | ||
var dep = b2. | var dep = b2.create('point',[function(){ return free.X();}, 1], {name:'B', style:8}); | ||
</source> | </source> | ||
The first coordinate of "dep" is given as an anonymous function: | The first coordinate of "dep" is given as an anonymous function: | ||
| Line 53: | Line 52: | ||
[[Category: | [[Category:Austragungsstueberl]] | ||
Category:Examples | |||
Latest revision as of 13:28, 3 March 2021
A point can depend on another geometric object. This dependence can be given by using JavaScript syntax or by using GEONExT syntax.
GEONExT syntax
Here is an example using GEONExT syntax. The point A is draggable. The point B depends on point A: Its y-coordinate is set to 1 and its x-coordinate is set to the x-coordinate of A.
var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var free = b.create('point',[0,0], {name:'A', style:5});
var dep = b.create('point',["X(A)",1], {name:'B', style:8});
JavaScript syntax
Now we do exactly the same with JavaScript syntax.
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var free = b2.create('point',[0,0], {name:'A', style:5});
var dep = b2.create('point',[function(){ return free.X();}, 1], {name:'B', style:8});
The JavaScript syntax is much more robust against changes of the construction, but of course it looks more complicated. Lets look at it again in detail: First we construct a free, draggable point called "free".
var free = b2.create('point',[0,0], {name:'A', style:5});
Then we construct the dependent point "dep".
var dep = b2.create('point',[function(){ return free.X();}, 1], {name:'B', style:8});
The first coordinate of "dep" is given as an anonymous function:
function(){ return free.X();}
This function returns the x-coordinate of the point "free". Category:Examples
