# Difference between revisions of "Point"

A WASSERMANN (talk | contribs) (→Construction of a free point) |
|||

(39 intermediate revisions by 3 users not shown) | |||

Line 1: | Line 1: | ||

− | This example shows how to construct a simple, draggable point | + | == Construction of a free 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;"></div> | ||

<script type="text/javascript"> | <script type="text/javascript"> | ||

− | var board = JXG.JSXGraph.initBoard('jxgbox', { | + | var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); |

− | var p = board. | + | 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. | ||

+ | From now on, we will only show the JavaScript code. | ||

+ | <jsxgraph box="jxgbox" width="500" height="200"> | ||

+ | var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 2, 5, -2]}); | ||

+ | var p = board.createElement('point',[-3,1]); | ||

+ | </jsxgraph> | ||

+ | |||

+ | == Attributes 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"> | ||

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

## Latest revision as of 12:19, 6 May 2016

## Contents

## 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});
```

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