Points with constraints (dup)

2008-09-17T20:57:12Z

84.147.85.152:

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.
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var free = b.createElement('point',[0,0], {name:'A', style:5});
var dep = b.createElement('point',["X(A)",1], {name:'B', style:8});
</source>
<html>
<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/prototype.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>
<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('jxgbox1', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var free = b.createElement('point',[0,0], {name:'A', style:5});
var dep = b.createElement('point',["X(A)",1], {name:'B', style:8});
</script>
</html>
=== JavaScript syntax ===
Now we do exactly the same with JavaScript syntax.
<source lang="javascript">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var free = b2.createElement('point',[0,0], {name:'A', style:5});
var dep = b2.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
</source>
<html>
<div id="jxgbox2" class="jxgbox" style="width:600px; height:200px;"></div>
<script type="text/javascript">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var free = b2.createElement('point',[0,0], {name:'A', style:5});
var dep = b2.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
</script>
</html>
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".
<source lang="javascript">
var free = b2.createElement('point',[0,0], {name:'A', style:5});
</source>
Then we construct the dependent point "dep".
<source lang="javascript">
var dep = b2.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
</source>
The first coordinate of "dep" is given as an anonymous function:
<source lang="javascript">
function(){ return free.X();}
</source>
This function returns the x-coordinate of the point "free".

[[Category:Examples]]

Circle

2008-09-17T20:53:03Z

84.147.85.152:

== Circle through two points ==
One possibility to construct a circle is to give its center and a point defining its radius.
Lets construct two points "A" and "B".
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = board.createElement('point',[0,0], {name:'A',style:6});
var p2 = board.createElement('point',[2,-1], {name:'B',style:6});
</source>
Then we construct a circle through "A" and "B". The setting of a new color and changing the stroke-width is not necessary.
<source lang="javascript">
var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</source>

<html>
<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/prototype.js"></script>
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = brd.createElement('point',[0,0], {name:'A',style:6});
var p2 = brd.createElement('point',[2,-1], {name:'B',style:6});
var ci = brd.createElement('circle',["A","B"], {strokeColor:'#00ff00',strokeWidth:2});
</script>
</html>

Generally it is better to use JavaScript variables and not Geometry-Element names when constructing.
Now, we do the same examples with JavaScript variables. To show other variations, we use a dashed stroke style and set a fill color.

<source lang="javascript">
var ci2 = brd2.createElement('circle',[p1,p2],
{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
</source>

<html>
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
var brd2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = brd2.createElement('point',[0,0], {name:'A',style:6});
var p2 = brd2.createElement('point',[2,-1], {name:'B',style:6});
var ci2 = brd2.createElement('circle',[p1,p2],
{strokeWidth:3, dash:2, fillColor:'#ffff00', fillOpacity:0.3});
</script>
</html>

=== Dynamic fill-opacity ===
We can make the fill-opacity dynamic and make it dependent on the position of "B", i.e. the JavaScript variable "p2".

<source lang="javascript">
var ci3 = brd3.createElement('circle',[p1,p2],
{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
</source>

<html>
<div id="jxgbox3" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
var brd3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p1 = brd3.createElement('point',[0,0], {name:'A',style:6});
var p2 = brd3.createElement('point',[2,0], {name:'B',style:6});
var ci3 = brd3.createElement('circle',[p1,p2],
{strokeWidth:1, fillColor:'#555500', fillOpacity:function(){ return p2.X()*0.25;} });
</script>
</html>

[[Category:Examples]]

JSXGraph Wiki - User contributions [en]

Points with constraints (dup)

Circle