Transformations

From JSXGraph Wiki
Revision as of 20: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)
Jump to navigationJump to search

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