Transformation

Element

Define projective 2D transformations like translation, rotation, reflection. A transformation consists of a \(3\times 3\) matrix, i.e. it is a projective transformation.

Internally, a transformation is applied to an element by multiplying the \(3\times 3\) matrix from the left to the homogeneous coordinates of the element. JSXGraph represents homogeneous coordinates in the order \((z, x, y)\). The matrix has the form \[ \begin{pmatrix} a & b & c \\ d & e & f \\ g & h & i \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \] where in general \(a=1\). If \(b = c = 0\), the transformation is called affine. In this case, finite points will stay finite. This is not the case for general projective coordinates.

Transformations acting on texts and images are considered to be affine, i.e. b and c are ignored.

The parameters of a transformation depend on the transformation type, supplied as attribute type. Possible transformation types are

'translate'
'scale'
'reflect'
'rotate'
'shear'
'generic'
'matrix'

Valid parameters for these types are:

type:"translate": [x, y] Translation vector (two numbers or functions). The transformation matrix for x = a and y = b has the form: \[ \begin{pmatrix} 1 & 0 & 0 \\ a & 1 & 0 \\ b & 0 & 1 \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \]
type:"scale": [scale_x, scale_y] Scale vector (two numbers or functions). The transformation matrix for scale_x = a and scale_y = b has the form: \[ \begin{pmatrix} 1 & 0 & 0 \\ 0 & a & 0 \\ 0 & 0 & b \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \]
type:"rotate" [alpha, [point | x, y]] The parameters are the angle value in Radians (a number or function), and optionally a coordinate pair (two numbers or functions) or a point element defining the rotation center. If the rotation center is not given, the transformation rotates around (0,0). The transformation matrix for angle a and rotating around (0, 0) has the form: \[ \begin{pmatrix} 1 & 0 & 0 \\ 0 & \cos(a) & -\sin(a) \\ 0 & \sin(a) & \cos(a) \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \]
type:"shear": [shear_x, shear_y] Shear vector (two numbers or functions). The transformation matrix for shear_x = a and shear_y = b has the form: \[ \begin{pmatrix} 1 & 0 & 0 \\ 0 & 1 & a \\ 0 & b & 1 \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \]
type:"reflect": The parameters can either be:
- line a line element,
- p, q two point elements,
- p_x, p_y, q_x, q_y four numbers or functions determining a line through points \((p_x, p_y)\) and \((q_x, q_y)\).
type:"affine": [a, b, c, d] (numbers or functions). The transformation matrix has the form \[ \begin{pmatrix} 1 & 0 & 0 \\ 0 & a & b \\ 0 & c & d \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \]
type:"affinematrix": M \(2\times 2\) matrix containing numbers or functions. The full transformation matrix has the form \[ \begin{pmatrix} 1 & 0 & 0 \\ 0 & M \\ 0 & \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \]
type:"generic": [a, b, c, d, e, f, g, h, i] Nine matrix entries (numbers or functions) for a generic projective transformation. The matrix has the form \[ \begin{pmatrix} a & b & c \\ d & e & f \\ g & h & i \end{pmatrix} \cdot \begin{pmatrix} z\\ x\\ y \end{pmatrix} \]
type:"matrix": M \(3\times 3\) transformation matrix containing numbers or functions

Usage (signatures)

board.create('transformation', [parameters]);

Parameters

Name	Type	Description
`parameters`	number \| function \| JXG.GeometryElement

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', [() => 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'});

// Type: 'matrix'
        var y = board.create('slider', [[-3, 1], [-3, 4], [0, 1, 6]]);
        var t1 = board.create('transform', [
            [
                [1, 0, 0],
                [0, 1, 0],
                [() => y.Value(), 0, 1]
            ]
        ], {type: 'matrix'});

        var A = board.create('point', [2, -3]);
        var B = board.create('point', [A, t1]);

// One time application of a transform to points A, B
var p1 = board.create('point', [1, 1]),
    p2 = board.create('point', [-1, -2]),
    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[0] = board.create('point', [0, 0], {name: 'Drag me'}),

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

    // Polygon through these four points
    pol = board.create('polygon', sq, {
            fillColor:'blue',
            gradient:'radial',
            gradientsecondcolor:'white',
            gradientSecondOpacity:'0'
    }),

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

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

// Text transformation
var p0 = board.create('point', [0, 0], {name: 'p_0'});
var p1 = board.create('point', [3, 0], {name: 'p_1'});
var txt = board.create('text',[0.5, 0, 'Hello World'], {display:'html'});

// If p_0 is dragged, translate p_1 and text accordingly
var tOff = board.create('transform', [() => p0.X(), () => p0.Y()], {type:'translate'});
tOff.bindTo(txt);
tOff.bindTo(p1);

// Rotate text around p_0 by dragging point p_1
var tRot = board.create('transform', [
    () => Math.atan2(p1.Y() - p0.Y(), p1.X() - p0.X()), p0], {type:'rotate'});
tRot.bindTo(txt);

// Scale text by dragging point "p_1"
// We do this by
// - moving text by -p_0 (inverse of transformation tOff),
// - scale the text (because scaling is relative to (0,0))
// - move the text back by +p_0
var tOffInv = board.create('transform', [
        () => -p0.X(),
        () => -p0.Y()
], {type:'translate'});
var tScale = board.create('transform', [
        // Some scaling factor
        () => p1.Dist(p0) / 3,
        () => p1.Dist(p0) / 3
], {type:'scale'});
tOffInv.bindTo(txt); tScale.bindTo(txt); tOff.bindTo(txt);

Methods