JSXGraph Reference - Transformation

Element Summary
Constructor Attributes	Constructor Name and Description
	Transformation A transformation consists of a 3x3 matrix, i.e.

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

JSXGraph 1.5.0 Reference

JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Element Transformation