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

Class Index | File Index

## Elements

## Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Button
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Conic
- Curve
- Ellipse
- Functiongraph
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Dump
- JXG.EventEmitter
- JXG.GeometryElement
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Line
- JXG.Math
- JXG.Math.Geometry
- JXG.Math.Numerics
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.Statistics
- JXG.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Point
- JXG.Polygon
- JXG.Server
- JXG.Server.modules
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.VMLRenderer
- JXG.XML
- Label
- Line
- Locus
- MajorArc
- MajorSector
- Midpoint
- MinorArc
- MinorSector
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelpoint
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- PolarLine
- PolePoint
- Polygon
- Quadtree
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopetriangle
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle

# Class Transformation

JXG.Transformation
↳ Transformation

This element is used to provide projective transformations.
Defined in: transformation.js.
Extends JXG.Transformation.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Transformation(The) A transformation consists of a 3x3 matrix, i.e.

Methods borrowed from class JXG.Transformation:
  apply, applyOnce, bindTo, melt, setAttribute, setMatrix, setProperty, update

Class Detail
Transformation(The)
A transformation consists of a 3x3 matrix, i.e. it is a projective transformation.

Parameters:
{number|function} 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.

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

Documentation generated by JsDoc Toolkit 2.4.0 on Wed Aug 23 2017 17:12:48 GMT-0000 (UTC)