Difference between revisions of "Point"

From JSXGraph Wiki
Jump to: navigation, search
(Construction of a free point)
 
(11 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
<div id="jxgbox" class="jxgbox" style="width:500px; height:200px;"></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;"></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>
 
</html>
 
  
 
== Attributes of a point ==
 
== Attributes of a point ==
Line 27: Line 21:
 
Several attributes can be given to change the properties of a point, for example a name.
 
Several attributes can be given to change the properties of a point, for example a name.
 
<source lang="javascript">
 
<source lang="javascript">
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
var p = b2.createElement('point',[1,1], {name:'X',style:5});
+
var p = b2.create('point',[1,1], {name:'X',size:3});
 
</source>
 
</source>
 
This point will be labeled with "X":
 
This point will be labeled with "X":
<html>
+
<jsxgraph box="jxgbox2" width="500" height="200">
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>
+
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {boundingbox: [-5, 2, 5, -2]});
<script type="text/javascript">
+
var p = b2.create('point',[1,1], {name:'X',size:3});
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
+
</jsxgraph>
var p = b2.createElement('point',[1,1], {name:'X',style:5});
 
</script>
 
</html>
 
  
=== Point styles===
+
=== Point faces and sizes===
The property type of a point can attain the values 0..12. Alternatively you can use these equivalent constants for that:
+
Meanwhile point style is superseded by the attributes ''face'' and ''size'', which allow a better control of the display of points.
{| cellpadding="8" cellspacing="0" border="1"
+
<jsxgraph box="jxgbox3a" width="600" height="200">
! Constant !! Value !! Short description
+
var b3a = JXG.JSXGraph.initBoard('jxgbox3a', {boundingbox: [-1, 2.5, 14, -2.5]});
|-
+
b3a.create('point',[1,0], {face:'o'}); // or circle
| JXG.POINT_STYLE_X_SMALL    || 0 || Small x
+
b3a.create('point',[2,0], {face:'[]'}); // or square
|-
+
b3a.create('point',[3,0], {face:'x'}); // or cross
| JXG.POINT_STYLE_X            || || Medium x
+
b3a.create('point',[4,0], {face:'+'}); // or plus
|-
+
b3a.create('point',[5,0], {face:'^'}); // or triangleUp
| JXG.POINT_STYLE_X_BIG        || 2 || Big x
+
b3a.create('point',[6,0], {face:'v'}); // or triangleDown
|-
+
b3a.create('point',[7,0], {face:'>'}); // or triangleLeft
| JXG.POINT_STYLE_CIRCLE_TINY  || || Tiny circle
+
b3a.create('point',[8,0], {face:'<'}); // or triangleRight
|-
+
b3a.create('point',[9,0], {face:'<>'}); // or diamond
| JXG.POINT_STYLE_CIRCLE_SMALL || || Small circle
+
</jsxgraph>
|-
 
| JXG.POINT_STYLE_CIRCLE      || || Medium circle
 
|-
 
| JXG.POINT_STYLE_CIRCLE_BIG  || || Big circle
 
|-
 
| JXG.POINT_STYLE_SQUARE_SMALL || || Small square
 
|-
 
| JXG.POINT_STYLE_SQUARE      || || Medium square
 
|-
 
| JXG.POINT_STYLE_SQUARE_BIG  || 9 || Big square
 
|-
 
| JXG.POINT_STYLE_PLUS_SMALL  || 10 || Small +
 
|-
 
| JXG.POINT_STYLE_PLUS        || 11 || Medium +
 
|-
 
| JXG.POINT_STYLE_PLUS_BIG    || 12 || Big +
 
|}
 
  
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 b3a = JXG.JSXGraph.initBoard('jxgbox3a', {boundingbox: [-1, 2.5, 14, -2.5]});
for (var i=0;i<13;i++) {
+
b3a.create('point',[1,0], {face:'o'});  // or circle
  var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
+
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="jxgbox3" class="jxgbox" style="width:600px; height:200px; "></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 b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 40, originY: 100, unitX: 40, unitY: 40});
+
b3b.create('point',[1,0], {face:'o', size:1}); 
for (var i=0;i<13;i++) {
+
b3b.create('point',[2,0], {face:'o', size:2}); 
  var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
+
b3b.create('point',[3,0], {face:'o', size:4}); 
}
+
b3b.create('point',[5,0], {face:'o', size:8}); 
p.setProperty({fixed:true});
+
b3b.create('point',[7,0], {face:'o', size:16});
</script>
+
b3b.create('point',[10,0], {face:'o', size:32});
</html>
+
</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===
 
=== Fixed points===
Line 96: Line 85:
 
</source>
 
</source>
  
* [[Points with constraints]]  
+
=== 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: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".