Transformations

From JSXGraph Wiki
Revision as of 18:15, 14 February 2010 by A WASSERMANN (talk | contribs) (New page: 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 ...)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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 two 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]);