Point

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', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 var p = board.createElement('point',[1,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', {originX: 200, originY: 100, unitX: 50, unitY: 50});
var p = b2.createElement('point',[1,1], {name:'X',style:5});

This point will be labeled with "X":

Point styles (deprecated)

The property type of a point can attain the values 0..12. Alternatively you can use these equivalent constants for that:

Constant	Value	Short description
JXG.POINT_STYLE_X_SMALL	0	Small x
JXG.POINT_STYLE_X	1	Medium x
JXG.POINT_STYLE_X_BIG	2	Big x
JXG.POINT_STYLE_CIRCLE_TINY	3	Tiny circle
JXG.POINT_STYLE_CIRCLE_SMALL	4	Small circle
JXG.POINT_STYLE_CIRCLE	5	Medium circle
JXG.POINT_STYLE_CIRCLE_BIG	6	Big circle
JXG.POINT_STYLE_SQUARE_SMALL	7	Small square
JXG.POINT_STYLE_SQUARE	8	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.

var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 40, originY: 100, unitX: 40, unitY: 40});
for (var i=0;i<13;i++) {
  var p = b3.create('point',[i,0], {name:'P_{'+i+'}', style:i});
}
p.setProperty({fixed:true});

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', {originX: 40, originY: 100, unitX: 40, unitY: 40});
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:'A'});  // 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', {originX: 40, originY: 100, unitX: 40, unitY: 40});
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', {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});

JavaScript syntax

Now we do exactly the same with JavaScript syntax.

var b = JXG.JSXGraph.initBoard('jxgbox', {originX: 40, originY: 100, unitX: 40, unitY: 40});
var free = b.createElement('point',[0,0], {name:'A', style:5});
var dep = b.createElement('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 = b.createElement('point',[0,0], {name:'A', style:5});

Then we construct the dependent point "dep".

var dep = b.createElement('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".