Difference between revisions of "Point"

From JSXGraph Wiki
Jump to: navigation, search
(merge of two separate point articles)
Line 11: Line 11:
 
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="500px" height="200px">
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/prototype.js"></script>
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
<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 board = JXG.JSXGraph.initBoard('jxgbox', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
  var p = board.createElement('point',[1,1]);
 
  var p = board.createElement('point',[1,1]);
</script>
+
</jsxgraph>
</html>
 
  
 
== Attributes of a point ==
 
== Attributes of a point ==
Line 31: Line 25:
 
</source>
 
</source>
 
This point will be labeled with "X":
 
This point will be labeled with "X":
<html>
+
<jsxgraph box="jxgbox2" width="500px" height="200px">
<div id="jxgbox2" class="jxgbox" style="width:500px; height:200px;"></div>
 
<script type="text/javascript">
 
 
var b2 = JXG.JSXGraph.initBoard('jxgbox2', {originX: 200, originY: 100, unitX: 50, unitY: 50});
 
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});
 
var p = b2.createElement('point',[1,1], {name:'X',style:5});
</script>
+
</jsxgraph>
</html>
 
  
 
=== Point styles===
 
=== Point styles===
Line 77: Line 68:
 
   var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
 
   var p = b3.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
 
}
 
}
 +
p.setProperty({fixed:true});
 
</source>
 
</source>
  
<html>
+
<jsxgraph box="jxgbox3" width="600px" height="200px">
<div id="jxgbox3" class="jxgbox" style="width:600px; height:200px; "></div>
 
<script type="text/javascript">
 
 
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 40, originY: 100, unitX: 40, unitY: 40});
 
var b3 = JXG.JSXGraph.initBoard('jxgbox3', {originX: 40, originY: 100, unitX: 40, unitY: 40});
 
for (var i=0;i<13;i++) {
 
for (var i=0;i<13;i++) {
Line 87: Line 77:
 
}
 
}
 
p.setProperty({fixed:true});
 
p.setProperty({fixed:true});
</script>
+
</jsxgraph>
</html>
 
  
 
=== 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', {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});
 +
</source>
 +
<jsxgraph box="jxgbox4" width="600px" height="200px">
 +
var b4 = JXG.JSXGraph.initBoard('jxgbox4', {originX: 40, originY: 100, unitX: 40, unitY: 40});
 +
var free = b4.createElement('point',[0,0], {name:'A', style:5});
 +
var dep = b4.createElement('point',["X(A)",1], {name:'B', style:8});
 +
</jsxgraph>
 +
 
 +
==== JavaScript syntax ====
 +
Now we do exactly the same with JavaScript syntax.
 +
<source lang="javascript">
 +
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});
 +
</source>
 +
<jsxgraph box="jxgbox5" width="600px" height="200px">
 +
var b5 = JXG.JSXGraph.initBoard('jxgbox5', {originX: 40, originY: 100, unitX: 40, unitY: 40});
 +
var free = b5.createElement('point',[0,0], {name:'A', style:5});
 +
var dep = b5.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
 +
</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.createElement('point',[0,0], {name:'A', style:5});
 +
</source>
 +
Then we construct the dependent point "dep".
 +
<source lang="javascript">
 +
var dep = b.createElement('point',[function(){ return free.X();}, 1], {name:'B', style:8});
 +
</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 15:47, 2 June 2009

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

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.createElement('point',[i,0], {name:'P_{'+i+'}', style:i});
}
p.setProperty({fixed:true});

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