Transformations: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 9: Line 9:


====Using transformations====
====Using transformations====
There are two possibilities to apply transformations:
There are three possibilities to apply transformations:
* One point is the result of applying a transformation to another point.
* 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">
var p1 = board.create('point', [1,1], {style:6, name:'C'});  
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 t = board.create('transform', [Math.PI/3,p1], {type:'rotate'});  // angle, rotation center
</source>
</source>
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.
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.
Line 44: Line 44:
t.applyOnce([p2,p3]);
t.applyOnce([p2,p3]);
</source>
</source>
* Points may have

Revision as of 23:26, 14 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:

  • 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]);
  • 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]);
  • Points may have