# Difference between revisions of "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', {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".