# Element Transformation

JXG.Transformation
↳ Transformation

This element is used to provide projective transformations.

Defined in: transformation.js.
Extends JXG.Transformation.

Element Summary
Constructor Attributes Constructor Name and Description

A transformation consists of a 3x3 matrix, i.e.
Methods borrowed from class JXG.Transformation:
apply, applyOnce, bindTo, melt, setAttribute, setMatrix, setProperty, update
Element Detail
Transformation
A transformation consists of a 3x3 matrix, i.e. it is a projective transformation.
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create with type "transformation".

Possible parent array combinations are:
{numbers|functions} parameters

The parameters depend on the transformation type, supplied as attribute 'type'. Possible transformation types are
• 'translate'
• 'scale'
• 'reflect'
• 'rotate'
• 'shear'
• 'generic'
The transformation matrix then looks like:

Translation matrix:

```( 1  0  0)   ( z )
( a  1  0) * ( x )
( b  0  1)   ( y )
```

Scale matrix:

```( 1  0  0)   ( z )
( 0  a  0) * ( x )
( 0  0  b)   ( y )
```

A rotation matrix with angle a (in Radians)

```( 1    0        0      )   ( z )
( 0    cos(a)   -sin(a)) * ( x )
( 0    sin(a)   cos(a) )   ( y )
```

Shear matrix:

```( 1  0  0)   ( z )
( 0  1  a) * ( x )
( 0  b  1)   ( y )
```

Generic transformation:

```( a  b  c )   ( z )
( d  e  f ) * ( x )
( g  h  i )   ( y )
```

Throws:
{Exception}
If the element cannot be constructed with the given parent objects an exception is thrown.
See:
JXG.Transformation#setMatrix
Examples:
```// The point B is determined by taking twice the vector A from the origin

var p0 = board.create('point', [0, 3], {name: 'A'}),
t = board.create('transform', [function(){ return p0.X(); }, "Y(A)"], {type: 'translate'}),
p1 = board.create('point', [p0, t], {color: 'blue'});

```

```// The point B is the result of scaling the point A with factor 2 in horizontal direction
// and with factor 0.5 in vertical direction.

var p1 = board.create('point', [1, 1]),
t = board.create('transform', [2, 0.5], {type: 'scale'}),
p2 = board.create('point', [p1, t], {color: 'blue'});

```

```// The point B is rotated around C which gives point D. The angle is determined
// by the vertical height of point A.

var p0 = board.create('point', [0, 3], {name: 'A'}),
p1 = board.create('point', [1, 1]),
p2 = board.create('point', [2, 1], {name:'C', fixed: true}),

// angle, rotation center:
t = board.create('transform', ['Y(A)', p2], {type: 'rotate'}),
p3 = board.create('point', [p1, t], {color: 'blue'});

```

```// A concatenation of several transformations.
var p1 = board.create('point', [1, 1]),
t1 = board.create('transform', [-2, -1], {type: 'translate'}),
t2 = board.create('transform', [Math.PI/4], {type: 'rotate'}),
t3 = board.create('transform', [2, 1], {type: 'translate'}),
p2 = board.create('point', [p1, [t1, t2, t3]], {color: 'blue'});

```

```// Reflection of point A
var p1 = board.create('point', [1, 1]),
p2 = board.create('point', [1, 3]),
p3 = board.create('point', [-2, 0]),
l = board.create('line', [p2, p3]),
t = board.create('transform', [l], {type: 'reflect'}),  // Possible are l, l.id, l.name
p4 = board.create('point', [p1, t], {color: 'blue'});

```

```// One time application of a transform to points A, B
var p1 = board.create('point', [1, 1]),
p2 = board.create('point', [1, 1]),
t = board.create('transform', [3, 2], {type: 'shear'});
t.applyOnce([p1, p2]);

```

```// Construct a square of side length 2 with the
// help of transformations
var sq = [],
right = board.create('transform', [2, 0], {type: 'translate'}),
up = board.create('transform', [0, 2], {type: 'translate'}),
pol, rot, p0;

// The first point is free
sq = board.create('point', [0, 0], {name: 'Drag me'}),

// Construct the other free points by transformations
sq = board.create('point', [sq, right]),
sq = board.create('point', [sq, [right, up]]),
sq = board.create('point', [sq, up]),

// Polygon through these four points
pol = board.create('polygon', sq, {
fillColor:'blue',
}),

p0 = board.create('point', [0, 3], {name: 'angle'}),
// Rotate the square around point sq by dragging A
rot = board.create('transform', ['Y(angle)', sq], {type: 'rotate'});

// Apply the rotation to all but the first point of the square
rot.bindTo(sq.slice(1));

```

Attributes borrowed from other Elements

Fields borrowed from other Elements

Methods borrowed from other Elements
Methods borrowed from class JXG.Transformation:
apply, applyOnce, bindTo, melt, setAttribute, setMatrix, setProperty, update

Events borrowed from other Elements
Documentation generated by JsDoc Toolkit 2.4.0 on Fri May 21 2021 10:39:11 GMT+0200 (Mitteleuropäische Sommerzeit)