# Difference between revisions of "Transformations"

A WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||

Line 102: | Line 102: | ||

<jsxgraph width="500" height="500" box="box2"> | <jsxgraph width="500" height="500" box="box2"> | ||

var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true}); | var brd2 = JXG.JSXGraph.initBoard('box2', {boundingbox:[-2,4,4,-2],keepaspectratio:true}); | ||

+ | var s = brd2.create('slider', [[-1,-1],[2,-1],[0,0,2*Math.PI],{name:'angle'}); | ||

// Construct a square with the help of transformations | // Construct a square with the help of transformations | ||

var sq = []; | var sq = []; | ||

Line 113: | Line 114: | ||

// Rotate the square around point sq[0] | // Rotate the square around point sq[0] | ||

− | var rot = brd2.create('transform', [ | + | var rot = brd2.create('transform', [function(){return s.Value();},sq[0]], {type:'rotate'}); |

rot.bindTo(sq.slice(1)); | rot.bindTo(sq.slice(1)); | ||

− | + | brd2.update(); | |

</jsxgraph> | </jsxgraph> | ||

## Revision as of 02:11, 15 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.

## Contents

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