Difference between revisions of "Transformations"

From JSXGraph Wiki
Jump to navigationJump to search
Line 10: Line 10:
 
===Using transformations===
 
===Using transformations===
 
There are three possibilities to apply transformations:
 
There are three possibilities to apply transformations:
====1: One point is the result of applying a transformation to another point.====
+
====1) One point is the result of applying a transformation to another point.====
 
First, the transformation has to be time, for example
 
First, the transformation has to be time, for example
 
<source lang="javascript">
 
<source lang="javascript">
Line 25: Line 25:
 
var p2 = board.create('point', [3,1]);  
 
var p2 = board.create('point', [3,1]);  
 
var p3 = board.create('point', [p2,t]);  
 
var p3 = board.create('point', [p2,t]);  
 +
</source>
 +
====2) Adding a transformation to a point.====
 +
Transformations may also be applied to points which are either free points or points whose coordinates are determined by user-defined functions. The order of the computation during the update is: first the user-defined functions are evaluated, then the transformation(s) are applied. It is possible to bind more than one transformation to a point.
 +
<source lang="javascript">
 +
var p1 = board.create('point', [1,1], {style:6, name:'C'});
 +
var t = board.create('transform', [Math.PI/3,p1], {type:'rotate'});  // angle, rotation center
 +
var p2 = board.create('point', [function(){return p1.X()+1;},function(){return p1.Y();}]);
 +
var p3 = board.create('point', [3,1]);
 +
t.bindTo(p2); // bind the transformation t to a single point or
 +
t.bindTo([p2,p3]); // bind the transformation t to more than one point
 
</source>
 
</source>
  
====3: One-time application of a transformation to a point.====
+
====3) One-time application of a transformation to a point.====
 
Here, we start with the same setting as above: There are points ''p1'', ''p2'' and the transformation ''t''.
 
Here, we start with the same setting as above: There are points ''p1'', ''p2'' and the transformation ''t''.
 
But here, ''p2'' is rotated once.  
 
But here, ''p2'' is rotated once.  
Line 44: Line 54:
 
t.applyOnce([p2,p3]);
 
t.applyOnce([p2,p3]);
 
</source>
 
</source>
 
* Points may have
 

Revision as of 01:36, 15 February 2010

In JSXGraph it is possible to apply plane projective transformations to point elements. A projective transformation is a multiplication by a 3x3 matrix to the homogeneous coordinates of a point. To make life easier some standard transformation are predefined.

Available transformation types

  • Translation
  • Scaling
  • Reflection
  • Rotation
  • Shear transformation
  • Generic transformation

Using transformations

There are three possibilities to apply transformations:

1) One point is the result of applying a transformation to another point.

First, the transformation has to be time, for example

var p1 = board.create('point', [1,1], {style:6, name:'C'}); 
var t = board.create('transform', [Math.PI/3,p1], {type:'rotate'});  // angle, rotation center

The transformation t is the rotation by 60 degrees around the point p1. Alternatively, the rotation can also be defined by giving the name of the rotation center.

var p1 = board.create('point', [1,1], {style:6, name:'C'}); 
var t = board.create('transform', [Math.PI/3,'C'], {type:'rotate'});  // angle, rotation center

Now, two more points p2 and p3 are created. p3 has the coordinates of p2 rotated by 60 degrees around p1.

var p2 = board.create('point', [3,1]); 
var p3 = board.create('point', [p2,t]);

2) Adding a transformation to a point.

Transformations may also be applied to points which are either free points or points whose coordinates are determined by user-defined functions. The order of the computation during the update is: first the user-defined functions are evaluated, then the transformation(s) are applied. It is possible to bind more than one transformation to a point.

var p1 = board.create('point', [1,1], {style:6, name:'C'}); 
var t = board.create('transform', [Math.PI/3,p1], {type:'rotate'});  // angle, rotation center
var p2 = board.create('point', [function(){return p1.X()+1;},function(){return p1.Y();}]); 
var p3 = board.create('point', [3,1]);
t.bindTo(p2); // bind the transformation t to a single point or
t.bindTo([p2,p3]); // bind the transformation t to more than one point

3) One-time application of a transformation to a point.

Here, we start with the same setting as above: There are points p1, p2 and the transformation t. But here, p2 is rotated once.

var p1 = board.create('point', [1,1], {style:6, name:'C'}); 
var t = board.create('transform', [Math.PI/3,'C'], {type:'rotate'});  // angle, rotation center
var p2 = board.create('point', [3,1]); 
t.applyOnce(p2);

If there are more than one point to be rotated, an array can be supplied

var p1 = board.create('point', [1,1], {style:6, name:'C'}); 
var t = board.create('transform', [Math.PI/3,'C'], {type:'rotate'});  // angle, rotation center
var p2 = board.create('point', [3,1]); 
var p3 = board.create('point', [4,1]); 
t.applyOnce([p2,p3]);