API Docs for: 0.99.4
Show:

Transformation Class

PSEUDO

This element is used to provide projective transformations. A transformation consists of a 3x3 matrix, i.e. it is a projective transformation.

Constructor

Transformation

(
  • The
)

Parameters:

  • The Number,function

    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.

Example:

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

Methods

apply

(
  • p
  • 'self'
)
Array

Transform a GeometryElement: First, the transformation matrix is updated, the do the matrix-vector-multiplication.

Parameters:

  • p JXG.GeometryElement

    element which is transformed

  • 'self' String

    Apply the transformation to the initialCoords instead of the coords if this is set.

Returns:

applyOnce

(
  • p
)
JXG.Transform chainable

Applies a transformation once to a GeometryElement. If it is a free point, then it can be dragged around later and will overwrite the transformed coordinates.

Parameters:

  • p JXG.Point,Array

Returns:

JXG.Transform:

returns pointer to itself

bindTo

(
  • p
)
JXG.Transform chainable

Binds a transformation to a GeometryElement. In every update of the GeometryElement, the transformation is executed.

Parameters:

  • p Array,JXG.Object

    JXG.Object or array of JXG.Object to which the transformation is bound to.

Returns:

JXG.Transform:

returns pointer to itself

melt

(
  • t
)
JXG.Transform chainable

Combine two transformations to one transformations. This only works if the both transformation matrices consist of numbers, solely (and do not contain functions).

Multiplies the transformation with a transformation t from the left. i.e. (this) = (t) join (this)

Parameters:

  • t JXG.Transform

    Transformation which is the left multiplicand

Returns:

JXG.Transform:

returns pointer to itself

setAttribute

(
  • term
)
JXG.Transform chainable

Empty method. Unused.

Parameters:

  • term Object

    Key-value pairs of the attributes.

Returns:

JXG.Transform:

returns pointer to itself

setMatrix

(
  • board
  • type
  • params
  • x,y
  • scale_x,scale_y
  • line|point_pair|"four
  • angle,x,y
  • shear_x,shear_y
  • a,b,c,d,e,f,g,h,i
)
JXG.Transform chainable

Set the transformation matrix for different types of standard transforms.

Parameters:

  • board JXG.Board
  • type String

    Transformation type, possible values are 'translate', 'scale', 'reflect', 'rotate', 'shear', 'generic'.

  • params Array

    Parameters for the various transformation types.

    These are

  • x,y Array

    Shift vector (number or function) in case of 'translate'.

  • scale_x,scale_y Array

    Scale vector (number or function) in case of 'scale'.

  • line|point_pair|"four Array

    coordinates" In case of 'reflect' the parameters could be a line, a pair of points or four number (or functions) p_x, p_y, q_x, q_y, determining a line through points (p_x, p_y) and (q_x, q_y).

  • angle,x,y Array

    In case of 'rotate' the parameters are an angle or angle function, returning the angle in Radians and - optionally - a coordinate pair or a point defining the returning the angle in Radians and - optionally - a coordinate pair defining the reotation center. If the rotation center is not given, the transformation rotates around (0,0).

  • shear_x,shear_y Array

    Shear vector (number or function) in case of 'shear'.

  • a,b,c,d,e,f,g,h,i Array

    Nine matrix entries (numbers or functions) for a generic projective transformation in case of 'generic'.

    A transformation with a generic matrix looks like:

                        ( a  b  c )   ( z )
                        ( d  e  f ) * ( x )
                        ( g  h  i )   ( y )
                        

Returns:

JXG.Transform:

returns pointer to itself

setProperty

(
  • term
)
deprecated

Unused. USe setAttribute.

Parameters:

update

() JXG.Transform private chainable

Returns:

JXG.Transform:

returns pointer to itself