Transformations

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

Transformation types

• Translation: translate by (x,y). Input elements are x and y, which may be constants or functions.

t = board.create('transform', [function(){return p1.X();},7], {type:'translate'});

• Scaling: scale by (x,y). Input elements are x and y, which may be constants or functions.

t = board.create('transform', [function(){return p1.X();},3], {type:'scale'});

• Reflection: reflect a point at the line "g".

t = board.create('transform', [g], {type:'reflect'});

• Rotation: rotate by angle. Input elements are angle and an optional point which acts as rotation center. If no rotation center is given, the origin is the rotation center. angle may be supplied as constant or function.

t = board.create('transform', [Math.PI/3,p1], {type:'rotate'});  // angle, rotation center

• Shear transformation: Supply a constant or function.

t = board.create('transform', [Math.PI/6], {type:'shear'});

• Generic transformation: Supply 9 values which are the entries of the 3x3 transfomation matrix.

All entries may be constants or functions.

t = board.create('transform', [a11,a12,a13,a21,a22,a23,a31,a32,a33], {type:'generic'});

Examples

var brd1 = JXG.JSXGraph.initBoard('box1', {boundingbox:[-2,4,4,-2],keepaspectratio:true});
var p1 = brd1.create('point', [-1,0], {style:6, name:'C'}); 
var t = brd1.create('transform', [Math.PI/3, p1], {type:'rotate'});  // angle, rotation center
var p2 = brd1.create('point', [1,0], {name:'A'}); 
var p3 = brd1.create('point', [p2,t], {name:'B'}); 
brd1.create('circle',[p1,p2]);

var s = brd2.create('slider', [[-1,-1],[2,-1],[0,0,2*Math.PI]],{name:'angle'});
// Construct a square with the help of transformations
var sq = [];
sq[0] = brd2.create('point', [0,0], {name:'Drag me', style:5});
var right = brd2.create('transform', [2,0], {type:'translate'});
var up = brd2.create('transform', [0,2], {type:'translate'});
sq[1] = brd2.create('point', [sq[0],right], {style:7});
sq[2] = brd2.create('point', [sq[0],[right,up]], {style:7});
sq[3] = brd2.create('point', [sq[0],up], {style:7});
var pol = brd2.create('polygon',sq);

// Rotate the square around point sq[0]
var rot = brd2.create('transform', [function(){return s.Value();},sq[0]], {type:'rotate'});
rot.bindTo(sq.slice(1)); // Apply the rotation to all but the first point of the polygon
        
brd2.update();