Point: Difference between revisions

From JSXGraph Wiki
No edit summary
(20 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== Consruction of a free point ==
== 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>
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">
  var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
  var p = board.createElement('point',[1,1]);
</script>
<br clear=all>
</html>


== Attributes of a point ==
== Attributes of a point ==
Several attributes can be given to change the properties of a point.
 
=== User defined name ===
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">
<source lang="javascript">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var b3a = JXG.JSXGraph.initBoard('jxgbox3a', {boundingbox: [-1, 2.5, 14, -2.5]});
var p = b2.createElement('point',[1,1], {name:'X',style: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>
</source>


<html>
The size of the points can be controlled independently.
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px; float:left; "></div>
<jsxgraph box="jxgbox3b" width="600" height="200">
<script type="text/javascript">
var b3b = JXG.JSXGraph.initBoard('jxgbox3b', {boundingbox: [-1, 2.5, 14, -2.5]});
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
b3b.create('point',[1,0], {face:'o', size:1}); 
var p = b2.createElement('point',[1,1], {name:'X',style:5});
b3b.create('point',[2,0], {face:'o', size:2});
</script>
b3b.create('point',[3,0], {face:'o', size:4}); 
<br clear=all>
b3b.create('point',[5,0], {face:'o', size:8});
</html>
b3b.create('point',[7,0], {face:'o', size:16}); 
b3b.create('point',[10,0], {face:'o', size:32}); 
</jsxgraph>


=== Point styles===
The property type of a point can attain the values 0..12. In this examples we use a for loop to create 13 points.
<source lang="javascript">
<source lang="javascript">
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var b3b = JXG.JSXGraph.initBoard('jxgbox3b', {boundingbox: [-1, 2.5, 14, -2.5]});
for (var i=0;i<13;i++) {
b3b.create('point',[1,0], {face:'o', size:1});
  var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
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>
</source>
After creating the points we set the property fixed of the last point, P_12, to true. I.e. the point is no longer draggable.
 
=== 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">
<source lang="javascript">
p.setProperty({fixed:true});
p.setProperty({fixed:true});
</source>
</source>


<html>
=== Dependent points ===
<div id="jxgbox3" class="jxgbox" style="width:600px; height:200px; float:left; "></div>
 
<script type="text/javascript">
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.
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 40, originY: 100, unitX: 40, unitY: 40});
 
for (var i=0;i<13;i++) {
==== GEONExT syntax ====
  var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
 
}
Here is an example using GEONExT syntax.
p.setProperty({fixed:true});
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
</script>
to the x-coordinate of A.
<br clear=all>
<source lang="javascript">
</html>
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]]

Revision as of 11:19, 6 May 2016

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.setProperty({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".