# Difference between revisions of "Transformations"

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 ...) |
A WASSERMANN (talk | contribs) |
||

Line 18: | Line 18: | ||

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. | 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. | ||

<source lang="javascript"> | <source lang="javascript"> | ||

− | + | 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 | |

</source> | </source> | ||

Now, two more points ''p2'' and ''p3'' are created. ''p3'' has the coordinates of ''p2'' rotated by 60 degrees around ''p1''. | Now, two more points ''p2'' and ''p3'' are created. ''p3'' has the coordinates of ''p2'' rotated by 60 degrees around ''p1''. | ||

<source lang="javascript"> | <source lang="javascript"> | ||

− | + | var p2 = board.create('point', [3,1]); | |

− | + | var p3 = board.create('point', [p2,t]); | |

</source> | </source> | ||

Line 31: | Line 31: | ||

But here, ''p2'' is rotated once. | But here, ''p2'' is rotated once. | ||

<source lang="javascript"> | <source lang="javascript"> | ||

− | + | 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); | |

</source> | </source> | ||

If there are more than one point to be rotated, an array can be supplied | If there are more than one point to be rotated, an array can be supplied | ||

<source lang="javascript"> | <source lang="javascript"> | ||

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

</source> | </source> |

## Revision as of 20:16, 14 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.

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