# 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 JXG.Curve

JXG.GeometryElement
↳ JXG.Curve

Creates a new curve object. Do not use this constructor to create a curve. Use JXG.Board#create with type Curve, or Functiongraph instead.
Defined in: curve.js.
Extends JXG.GeometryElement.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| JXG.Curve(board, parents, attributes) Curves are the common object for function graphs, parametric curves, polar curves, and data plots.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel

Field Summary
Field Attributes | Field Name and Description
--- | ---
| dataX Array holding the x-coordinates of a data plot.
| dataY Array holding the y-coordinates of a data plot.
| numberPoints Number of points on curves.
| qdt Stores a quad tree if it is required.

Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel

Method Summary
Method Attributes | Method Name and Description
--- | ---
<private> | _borderCase(a, b, c, ta, tb, tc, depth) Investigate a function term at the bounds of intervals where the function is not defined, e.g.
<private> | _insertPoint(pnt) Add a point to the curve plot.
<private> | _intersectWithBorder(asymptote, box, direction) Find the intersection of the asymptote for e.g.
<private> | _isOutside(a, ta, b, tb) Decide if a path segment is too far from the canvas that we do not need to draw it.
<private> | _isUndefined(a, ta, b, tb) Test if the function is undefined on an interval: If the interval borders a and b are undefined, 20 random values are tested if they are undefined, too.
<private> | _plotRecursive(a, ta, b, tb, depth, delta) Recursive interval bisection algorithm for curve plotting.
<private> | _triangleDists(a, b, c) Compute distances in screen coordinates between the points ab, ac, cb, and cd, where d = (a + b)/2.
| addTransform(transform) Add transformations to this curve.
| allocatePoints() Allocate points in the Coords array this.points
| checkReal() Check if at least one point on the curve is finite and real.
| generateTerm(varname, xterm, yterm, mi, ma) Converts the GEONExT syntax of the defining function term into JavaScript.
| hasPoint(x, y, start) Checks whether (x,y) is near the curve.
<private> | interpolationFunctionFromArray(which) Generate the method curve.X() in case curve.dataX is an array and generate the method curve.Y() in case curve.dataY is an array.
<private> | isDistOK(dx, dy, MAXX, MAXY) Compares the absolute value of `dx` with `MAXX` and the absolute value of `dy` with `MAXY`.
<private> | isSegmentDefined(x0, y0, x1, y1)
<private> | isSegmentOutside(x0, y0, x1, y1) Crude and cheap test if the segment defined by the two points `(x0, y0)` and `(x1, y1)` is outside the viewport of the board.
| maxX() Gives the default value of the right bound for the curve.
| minX() Gives the default value of the left bound for the curve.
| notifyParents(contentStr) Finds dependencies in a given term and notifies the parents by adding the dependent object to the found objects child elements.
| update() Computes for equidistant points on the x-axis the values of the function
| updateCurve() Computes for equidistant points on the x-axis the values of the function.
| updateDataArray() For dynamic dataplots updateCurve can be used to compute new entries for the arrays JXG.Curve#dataX and JXG.Curve#dataY.
| updateParametricCurve(mi, ma) Updates the data points of a parametric curve.
| updateParametricCurveNaive(mi, ma, len) Updates the data points of a parametric curve.
| updateParametricCurveOld(mi, ma) Updates the data points of a parametric curve.
| updateRenderer() Updates the visual contents of the curve.
| updateTransform(p) Applies the transformations of the curve to the given point `p`.
| X(t, suspendUpdate) The parametric function which defines the x-coordinate of the curve.
| Y(t, suspendUpdate) The parametric function which defines the y-coordinate of the curve.
| Z(t) Treat the curve as curve with homogeneous coordinates.

Methods borrowed from class JXG.GeometryElement:
  _set, addChild, addDescendants, addParents, addRotation, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getTextAnchor, getType, handleSnapToGrid, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeChild, removeDescendants, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, showElement, snapToPoints, updateVisibility

Events borrowed from class JXG.GeometryElement:
  attribute, attribute:<attribute><attribute>, down, drag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, touchdown, touchdrag, touchup, up

Class Detail
JXG.Curve(board, parents, attributes)
Curves are the common object for function graphs, parametric curves, polar curves, and data plots.

Parameters:
{String|JXG.Board} board
  The board the new curve is drawn on.
{Array} parents
  defining terms An array with the functon terms or the data points of the curve.
{Object} attributes
  Defines the visual appearance of the curve.

See:
  JXG.Board#generateName
  JXG.Board#addCurve

Field Detail
dataX
Array holding the x-coordinates of a data plot. This array can be updated during run time by overwriting the method JXG.Curve#updateDataArray.

dataY
Array holding the y-coordinates of a data plot. This array can be updated during run time by overwriting the method JXG.Curve#updateDataArray.

numberPoints
Number of points on curves. This value changes between numberPointsLow and numberPointsHigh. It is set in JXG.Curve#updateCurve.

qdt
Stores a quad tree if it is required. The quad tree is generated in the curve updates and can be used to speed up the hasPoint method.
Method Detail
<private> {JXG.Boolean} _borderCase(a, b, c, ta, tb, tc, depth)
Investigate a function term at the bounds of intervals where the function is not defined, e.g. log(x) at x = 0. c is inbetween a and b

Parameters:
{Array} a
  Screen coordinates of the left interval bound
{Array} b
  Screen coordinates of the right interval bound
{Array} c
  Screen coordinates of the bisection point at (ta + tb) / 2
{Number} ta
  Parameter which evaluates to a, i.e. [1, X(ta), Y(ta)] = a in screen coordinates
{Number} tb
  Parameter which evaluates to b, i.e. [1, X(tb), Y(tb)] = b in screen coordinates
{Number} tc
  (ta + tb) / 2 = tc. Parameter which evaluates to b, i.e. [1, X(tc), Y(tc)] = c in screen coordinates
{Number} depth
  Actual recursion depth. The recursion stops if depth is equal to 0.

Returns:
  {JXG.Boolean} true if the point is inserted and the recursion should stop, false otherwise.

<private> _insertPoint(pnt)
Add a point to the curve plot. If the new point is too close to the previously inserted point, it is skipped. Used in JXG.Curve._plotRecursive.

Parameters:
{JXG.Coords} pnt
  Coords to add to the list of points

<private> {Array} _intersectWithBorder(asymptote, box, direction)
Find the intersection of the asymptote for e.g. a log function with the canvas.

Parameters:
{Array} asymptote
  Asymptote line in standard form
{Array} box
  Bounding box of the canavs
{Number} direction
  horizontal direction of the asymptote. If < 0 the asymptote goes to the left, otherwise to the right.

Returns:
  {Array} Homogeneous coordinate array of the intersection point.

<private> {Boolean} _isOutside(a, ta, b, tb)
Decide if a path segment is too far from the canvas that we do not need to draw it.

Parameters:
{Array} a
  Screen coordinates of the start point of the segment
{Array} ta
  Curve parameter of a.
{Array} b
  Screen coordinates of the end point of the segment
{Array} tb
  Curve parameter of b.

Returns:
  {Boolean} True if the segment is too far away from the canvas, false otherwise.

<private> _isUndefined(a, ta, b, tb)
Test if the function is undefined on an interval: If the interval borders a and b are undefined, 20 random values are tested if they are undefined, too. Only if all values are undefined, we declare the function to be undefined in this interval.

Parameters:
{Array} a
  Screen coordinates of the left interval bound
{Number} ta
  Parameter which evaluates to a, i.e. [1, X(ta), Y(ta)] = a in screen coordinates
{Array} b
  Screen coordinates of the right interval bound
{Number} tb
  Parameter which evaluates to b, i.e. [1, X(tb), Y(tb)] = b in screen coordinates

<private> {JXG.Curve} _plotRecursive(a, ta, b, tb, depth, delta)
Recursive interval bisection algorithm for curve plotting. Used in JXG.Curve.updateParametricCurve.

Parameters:
{Array} a
  Screen coordinates of the left interval bound
{Number} ta
  Parameter which evaluates to a, i.e. [1, X(ta), Y(ta)] = a in screen coordinates
{Array} b
  Screen coordinates of the right interval bound
{Number} tb
  Parameter which evaluates to b, i.e. [1, X(tb), Y(tb)] = b in screen coordinates
{Number} depth
  Actual recursion depth. The recursion stops if depth is equal to 0.
{Number} delta
  If the distance of the bisection point at (ta + tb) / 2 from the point (a + b) / 2 is less then delta, the segment [a,b] is regarded as straight line.

Returns:
  {JXG.Curve} Reference to the curve object.

<private> {Array} _triangleDists(a, b, c)
Compute distances in screen coordinates between the points ab, ac, cb, and cd, where d = (a + b)/2. cd is used for the smoothness test, ab, ac, cb are used to detect jumps, cusps and poles.

Parameters:
{Array} a
  Screen coordinates of the left interval bound
{Array} b
  Screen coordinates of the right interval bound
{Array} c
  Screen coordinates of the bisection point at (ta + tb) / 2

Returns:
  {Array} array of distances in screen coordinates between: ab, ac, cb, and cd.

{JXG.Curve} addTransform(transform)
Add transformations to this curve.

Parameters:
{JXG.Transformation|Array} transform
  Either one JXG.Transformation or an array of JXG.Transformations.

Returns:
  {JXG.Curve} Reference to the curve object.

allocatePoints()
Allocate points in the Coords array this.points

checkReal()
Check if at least one point on the curve is finite and real.

generateTerm(varname, xterm, yterm, mi, ma)
Converts the GEONExT syntax of the defining function term into JavaScript. New methods X() and Y() for the Curve object are generated, further new methods for minX() and maxX().

Parameters:
varname
xterm
yterm
mi
ma

See:
  JXG.GeonextParser.geonext2JS.

{Boolean} hasPoint(x, y, start)
Checks whether (x,y) is near the curve.

Parameters:
{Number} x
  Coordinate in x direction, screen coordinates.
{Number} y
  Coordinate in y direction, screen coordinates.
{Number} start
  Optional start index for search on data plots.

Returns:
  {Boolean} True if (x,y) is near the curve, False otherwise.

<private> {function} interpolationFunctionFromArray(which)
Generate the method curve.X() in case curve.dataX is an array and generate the method curve.Y() in case curve.dataY is an array.

Parameters:
{String} which
  Either 'X' or 'Y'

Returns:
  {function}

<private> {Boolean} isDistOK(dx, dy, MAXX, MAXY)
Compares the absolute value of `dx` with `MAXX` and the absolute value of `dy` with `MAXY`.

Parameters:
{Number} dx
{Number} dy
{Number} MAXX
{Number} MAXY

Returns:
  {Boolean} `true`, if `|dx| < MAXX` and `|dy| < MAXY`.

<private> isSegmentDefined(x0, y0, x1, y1)

Parameters:
x0
y0
x1
y1

<private> {Boolean} isSegmentOutside(x0, y0, x1, y1)
Crude and cheap test if the segment defined by the two points `(x0, y0)` and `(x1, y1)` is outside the viewport of the board. All parameters have to be given in screen coordinates.

Parameters:
{Number} x0
{Number} y0
{Number} x1
{Number} y1

Returns:
  {Boolean} `true` if the given segment is outside the visible area.

{Number} maxX()
Gives the default value of the right bound for the curve. May be overwritten in JXG.Curve#generateTerm.

Returns:
  {Number} Right bound for the curve.

{Number} minX()
Gives the default value of the left bound for the curve. May be overwritten in JXG.Curve#generateTerm.

Returns:
  {Number} Left bound for the curve.

notifyParents(contentStr)
Finds dependencies in a given term and notifies the parents by adding the dependent object to the found objects child elements.

Parameters:
{String} contentStr
  String containing dependencies for the given object.

{JXG.Curve} update()
Computes for equidistant points on the x-axis the values of the function

Returns:
  {JXG.Curve} Reference to the curve object.

See:
  JXG.Curve#updateCurve

{JXG.Curve} updateCurve()
Computes for equidistant points on the x-axis the values of the function. If the mousemove event triggers this update, we use only few points. Otherwise, e.g. on mouseup, many points are used.

Returns:
  {JXG.Curve} Reference to the curve object.

See:
  JXG.Curve#update

updateDataArray()
For dynamic dataplots updateCurve can be used to compute new entries for the arrays JXG.Curve#dataX and JXG.Curve#dataY. It is used in JXG.Curve#updateCurve. Default is an empty method, can be overwritten by the user.

Examples:

    // This example overwrites the updateDataArray method.
    // There, new values for the arrays JXG.Curve.dataX and JXG.Curve.dataY
    // are computed from the value of the slider N

    var N = board.create('slider', [[0,1.5],[3,1.5],[1,3,40]], {name:'n',snapWidth:1});
    var circ = board.create('circle',[[4,-1.5],1],{strokeWidth:1, strokecolor:'black', strokeWidth:2,
    		fillColor:'#0055ff13'});

    var c = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:2});
    c.updateDataArray = function() {
            var r = 1, n = Math.floor(N.Value()),
                x = [0], y = [0],
                phi = Math.PI/n,
                h = r*Math.cos(phi),
                s = r*Math.sin(phi),
                i, j,
                px = 0, py = 0, sgn = 1,
                d = 16,
                dt = phi/d,
                pt;

            for (i = 0; i < n; i++) {
                for (j = -d; j <= d; j++) {
                    pt = dt*j;
                    x.push(px + r*Math.sin(pt));
                    y.push(sgn*r*Math.cos(pt) - (sgn-1)*h*0.5);
                }
                px += s;
                sgn *= (-1);
            }
            x.push((n - 1)*s);
            y.push(h + (sgn - 1)*h*0.5);
            this.dataX = x;
            this.dataY = y;
        }

    var c2 = board.create('curve', [[0],[0]],{strokecolor:'red', strokeWidth:1});
    c2.updateDataArray = function() {
            var r = 1, n = Math.floor(N.Value()),
                px = circ.midpoint.X(), py = circ.midpoint.Y(),
                x = [px], y = [py],
                phi = Math.PI/n,
                s = r*Math.sin(phi),
                i, j,
                d = 16,
                dt = phi/d,
                pt = Math.PI*0.5+phi;

            for (i = 0; i < n; i++) {
                for (j= -d; j <= d; j++) {
                    x.push(px + r*Math.cos(pt));
                    y.push(py + r*Math.sin(pt));
                    pt -= dt;
                }
                x.push(px);
                y.push(py);
                pt += dt;
            }
            this.dataX = x;
            this.dataY = y;
        }
        board.update();

    // This is an example which overwrites updateDataArray and produces
    // a Bezier curve of degree three.
    var A = board.create('point', [-3,3]);
    var B = board.create('point', [3,-2]);
    var line = board.create('segment', [A,B]);

    var height = 0.5; // height of the curly brace

    // Curly brace
    var crl = board.create('curve', [[0],[0]], {strokeWidth:1, strokeColor:'black'});
    crl.bezierDegree = 3;
    crl.updateDataArray = function() {
        var d = [B.X()-A.X(), B.Y()-A.Y()],
            dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
            mid = [(A.X()+B.X())*0.5, (A.Y()+B.Y())*0.5];

        d[0] *= height/dl;
        d[1] *= height/dl;

        this.dataX = [ A.X(), A.X()-d[1], mid[0], mid[0]-d[1], mid[0], B.X()-d[1], B.X() ];
        this.dataY = [ A.Y(), A.Y()+d[0], mid[1], mid[1]+d[0], mid[1], B.Y()+d[0], B.Y() ];
    };

    // Text
    var txt = board.create('text', [
                        function() {
                            var d = [B.X()-A.X(), B.Y()-A.Y()],
                                dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                                mid = (A.X()+B.X())*0.5;

                            d[1] *= height/dl;
                            return mid-d[1]+0.1;
                        },
                        function() {
                            var d = [B.X()-A.X(), B.Y()-A.Y()],
                                dl = Math.sqrt(d[0]*d[0]+d[1]*d[1]),
                                mid = (A.Y()+B.Y())*0.5;

                            d[0] *= height/dl;
                            return mid+d[0]+0.1;
                        },
                        function() { return "length=" + JXG.toFixed(B.Dist(A), 2); }
                    ]);

    board.update(); // This update is necessary to call updateDataArray the first time.

{JXG.Curve} updateParametricCurve(mi, ma)
Updates the data points of a parametric curve. This version is used if JXG.Curve#doadvancedplot is `true`.

Parameters:
{Number} mi
  Left bound of curve
{Number} ma
  Right bound of curve

Returns:
  {JXG.Curve} Reference to the curve object.

{JXG.Curve} updateParametricCurveNaive(mi, ma, len)
Updates the data points of a parametric curve. This version is used if JXG.Curve#doadvancedplot is `false`.

Parameters:
{Number} mi
  Left bound of curve
{Number} ma
  Right bound of curve
{Number} len
  Number of data points

Returns:
  {JXG.Curve} Reference to the curve object.

{JXG.Curve} updateParametricCurveOld(mi, ma)
Updates the data points of a parametric curve. This version is used if JXG.Curve#doadvancedplot is `true`. Since 0.99 this algorithm is deprecated. It still can be used if JXG.Curve#doadvancedplotold is `true`.

Parameters:
{Number} mi
  Left bound of curve
{Number} ma
  Right bound of curve

Returns:
  {JXG.Curve} Reference to the curve object.

{JXG.Curve} updateRenderer()
Updates the visual contents of the curve.

Returns:
  {JXG.Curve} Reference to the curve object.

{JXG.Point} updateTransform(p)
Applies the transformations of the curve to the given point `p`. Before using it, JXG.Curve#updateTransformMatrix has to be called.

Parameters:
{JXG.Point} p

Returns:
  {JXG.Point} The given point.

{Number} X(t, suspendUpdate)
The parametric function which defines the x-coordinate of the curve.

Parameters:
{Number} t
  A number between JXG.Curve#minX and JXG.Curve#maxX.
{Boolean} suspendUpdate
  A boolean flag which is false for the first call of the function during a fresh plot of the curve and true for all other calss of the function. This may be used to speed up the plotting of the curve, if the e.g. the curve depends on some input elements.

Returns:
  {Number} x-coordinate of the curve at t.

{Number} Y(t, suspendUpdate)
The parametric function which defines the y-coordinate of the curve.

Parameters:
{Number} t
  A number between JXG.Curve#minX and JXG.Curve#maxX.
{Boolean} suspendUpdate
  A boolean flag which is false for the first call of the function during a fresh plot of the curve and true for all other calss of the function. This may be used to speed up the plotting of the curve, if the e.g. the curve depends on some input elements.

Returns:
  {Number} y-coordinate of the curve at t.

{Number} Z(t)
Treat the curve as curve with homogeneous coordinates.

Parameters:
{Number} t
  A number between JXG.Curve#minX and JXG.Curve#maxX.

Returns:
  {Number} Always 1.0

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