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

Class Index | File Index

Elements

Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.PrefixParser
- JXG.Server
- JXG.Server.modules
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML
- Label
- Legend
- Line
- Line3D
- Locus
- MajorArc
- MajorSector
- Measurement
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

# 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(parameters) 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(parameters)
A transformation consists of a 3x3 matrix, i.e. it is a projective transformation.

Internally, a transformation is applied to an element by multiplying the 3x3 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

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

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.

Parameters:
{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, -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);

Documentation generated by JsDoc Toolkit 2.4.0 on Thu Feb 15 2024 17:48:02 GMT+0000 (Coordinated Universal Time)