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.

Class Index | File Index

Elements
Classes

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


				
                

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 Jan 27 2023 10:57:46 GMT+0100 (Mitteleuropäische Normalzeit)