Point: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(34 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== Construction of a free point ==
This example shows how to construct a simple, draggable point.
This example shows how to construct a simple, draggable point.
It is produced by the following commands:
It is produced by the following commands:
<source lang="xml">
<source lang="xml">
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px; float:left; "></div>
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
<script type="text/javascript">
  var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
  var p = board.createElement('point',[1,1]);
  var p = board.create('point',[-3,1]);
</script>
</script>
</source>
</source>
</html>
The JavaScript code has to be placed AFTER the div element which will contain the construction.
The JavaScript code has to be placed AFTER the div element which will contain the construction.
From now on, we will only show the JavaScript code.
From now on, we will only show the JavaScript code.
<html>
<jsxgraph box="jxgbox" width="500" height="200">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
var p = board.createElement('point',[-3,1]);
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</jsxgraph>
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px; float:left; "></div>
 
<script type="text/javascript">
== Attributes of a point ==
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
var p = board.createElement('point',[1,1]);
=== User defined name ===
</script>
Several attributes can be given to change the properties of a point, for example a name.
<source lang="javascript">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
var p = b2.create('point',[1,1], {name:'X',size:3});
</source>
This point will be labeled with "X":
<jsxgraph box="jxgbox2" width="500" height="200">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
var p = b2.create('point',[1,1], {name:'X',size:3});
</jsxgraph>
 
=== Point faces and sizes===
Meanwhile point style is superseded by the attributes ''face'' and ''size'', which allow a better control of the display of points.
<jsxgraph box="jxgbox3a" width="600" height="200">
var b3a = JXG.JSXGraph.initBoard('jxgbox3a', {boundingbox: [-1, 2.5, 14, -2.5]});
b3a.create('point',[1,0], {face:'o'});  // or circle
b3a.create('point',[2,0], {face:'[]'}); // or square
b3a.create('point',[3,0], {face:'x'});  // or cross
b3a.create('point',[4,0], {face:'+'});  // or plus
b3a.create('point',[5,0], {face:'^'});  // or triangleUp
b3a.create('point',[6,0], {face:'v'});  // or triangleDown
b3a.create('point',[7,0], {face:'>'});  // or triangleLeft
b3a.create('point',[8,0], {face:'<'});  // or triangleRight
b3a.create('point',[9,0], {face:'<>'}); // or diamond
</jsxgraph>
 
<source lang="javascript">
var b3a = JXG.JSXGraph.initBoard('jxgbox3a', {boundingbox: [-1, 2.5, 14, -2.5]});
b3a.create('point',[1,0], {face:'o'});  // or circle
b3a.create('point',[2,0], {face:'[]'}); // or square
b3a.create('point',[3,0], {face:'x'});  // or cross
b3a.create('point',[4,0], {face:'+'});  // or plus
b3a.create('point',[5,0], {face:'^'});  // or triangleUp
b3a.create('point',[6,0], {face:'v'});  // or triangleDown
b3a.create('point',[7,0], {face:'>'});  // or triangleLeft
b3a.create('point',[8,0], {face:'<'});  // or triangleRight
b3a.create('point',[9,0], {face:'<>'}); // or diamond
</source>
 
The size of the points can be controlled independently.
<jsxgraph box="jxgbox3b" width="600" height="200">
var b3b = JXG.JSXGraph.initBoard('jxgbox3b', {boundingbox: [-1, 2.5, 14, -2.5]});
b3b.create('point',[1,0], {face:'o', size:1}); 
b3b.create('point',[2,0], {face:'o', size:2}); 
b3b.create('point',[3,0], {face:'o', size:4}); 
b3b.create('point',[5,0], {face:'o', size:8}); 
b3b.create('point',[7,0], {face:'o', size:16}); 
b3b.create('point',[10,0], {face:'o', size:32}); 
</jsxgraph>
 
<source lang="javascript">
var b3b = JXG.JSXGraph.initBoard('jxgbox3b', {boundingbox: [-1, 2.5, 14, -2.5]});
b3b.create('point',[1,0], {face:'o', size:1}); 
b3b.create('point',[2,0], {face:'o', size:2}); 
b3b.create('point',[3,0], {face:'o', size:4}); 
b3b.create('point',[5,0], {face:'o', size:8}); 
b3b.create('point',[7,0], {face:'o', size:16}); 
b3b.create('point',[10,0], {face:'o', size:32}); 
</source>
 
=== Fixed points===
A property of an element may also be set after creating it. In the above example we set the property fixed of the last point, P_12, to true. I.e. the point is no longer draggable.
<source lang="javascript">
p.setAttribute({fixed:true});
</source>
 
=== Dependent points ===
 
A point can depend on any other geometric object. This dependence can be given by using JavaScript functions or terms in GEONExT syntax for coordinates.
 
==== 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('jxgbox', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b.create('point',[0,0], {name:'A', size:3});
var dep = b.create('point',["X(A)",1], {name:'B', face:'[]', size:3});
</source>
<jsxgraph box="jxgbox4" width="600" height="200">
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b4.create('point',[0,0], {name:'A', size:3});
var dep = b4.create('point',["X(A)",1], {name:'B', face:'[]', size:3});
</jsxgraph>
 
==== JavaScript syntax ====
Now we do exactly the same with JavaScript syntax.
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b.create('point',[0,0], {name:'A', size:3});
var dep = b.create('point',[function(){ return free.X();}, 1], {name:'B', face:'[]', size:3});
</source>
<jsxgraph box="jxgbox5" width="600" height="200">
var b5 = JXG.JSXGraph.initBoard('jxgbox5', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b5.create('point',[0,0], {name:'A', size:3});
var dep = b5.create('point',[function(){ return free.X();}, 1], {name:'B', face:'[]', size:3});
</jsxgraph>
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 = b.create('point',[0,0], {name:'A', size:3});
</source>
Then we construct the dependent point "dep".
<source lang="javascript">
var dep = b.create('point',[function(){ return free.X();}, 1], {name:'B', face:'[]', size:3});
</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]]
[[Category:Examples]]

Latest revision as of 12:06, 6 August 2020

Construction of a free point

This example shows how to construct a simple, draggable point. It is produced by the following commands:

<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></div>
<script type="text/javascript">
 var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]});
 var p = board.create('point',[-3,1]);
</script>

The JavaScript code has to be placed AFTER the div element which will contain the construction. From now on, we will only show the JavaScript code.

Attributes of a point

User defined name

Several attributes can be given to change the properties of a point, for example a name.

var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
var p = b2.create('point',[1,1], {name:'X',size:3});

This point will be labeled with "X":

Point faces and sizes

Meanwhile point style is superseded by the attributes face and size, which allow a better control of the display of points.

var b3a = JXG.JSXGraph.initBoard('jxgbox3a', {boundingbox: [-1, 2.5, 14, -2.5]});
b3a.create('point',[1,0], {face:'o'});  // or circle
b3a.create('point',[2,0], {face:'[]'}); // or square
b3a.create('point',[3,0], {face:'x'});  // or cross
b3a.create('point',[4,0], {face:'+'});  // or plus
b3a.create('point',[5,0], {face:'^'});  // or triangleUp
b3a.create('point',[6,0], {face:'v'});  // or triangleDown
b3a.create('point',[7,0], {face:'>'});  // or triangleLeft
b3a.create('point',[8,0], {face:'<'});  // or triangleRight
b3a.create('point',[9,0], {face:'<>'}); // or diamond

The size of the points can be controlled independently.

var b3b = JXG.JSXGraph.initBoard('jxgbox3b', {boundingbox: [-1, 2.5, 14, -2.5]});
b3b.create('point',[1,0], {face:'o', size:1});  
b3b.create('point',[2,0], {face:'o', size:2});  
b3b.create('point',[3,0], {face:'o', size:4});  
b3b.create('point',[5,0], {face:'o', size:8});  
b3b.create('point',[7,0], {face:'o', size:16});  
b3b.create('point',[10,0], {face:'o', size:32});

Fixed points

A property of an element may also be set after creating it. In the above example we set the property fixed of the last point, P_12, to true. I.e. the point is no longer draggable.

p.setAttribute({fixed:true});

Dependent points

A point can depend on any other geometric object. This dependence can be given by using JavaScript functions or terms in GEONExT syntax for coordinates.

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('jxgbox', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b.create('point',[0,0], {name:'A', size:3});
var dep = b.create('point',["X(A)",1], {name:'B', face:'[]', size:3});

JavaScript syntax

Now we do exactly the same with JavaScript syntax.

var b = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 2.5, 14, -2.5]});
var free = b.create('point',[0,0], {name:'A', size:3});
var dep = b.create('point',[function(){ return free.X();}, 1], {name:'B', face:'[]', size:3});

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 = b.create('point',[0,0], {name:'A', size:3});

Then we construct the dependent point "dep".

var dep = b.create('point',[function(){ return free.X();}, 1], {name:'B', face:'[]', size:3});

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".