Curve - Documentation

Usage (signatures)

board.create('curve', [x, y, aopt, bopt]);

Default values are a=-10 and b=10 ???

Parameters

Name	Type	Attributes	Default	Description
`x`	function \| Number \| String			describes the x-coordinate of the curve. It may be a function term in one variable, e.g. x(t). In case of x being of type number, x(t) is set to a constant function. this function at the values of the array. In case of x being a String, it is given in JessieCode syntax.
`y`	function \| Number \| String			describes the y-coordinate of the curve. In case of a number, y(t) is set to the constant function returning this number. In case of y being a String, it is given in JessieCode syntax.
`a`	function \| Number	<optional>	`-Infinity`	left interval border
`b`	function \| Number	<optional>	`Infinity`	right interval border

Example

Parametric curve

// Create a curve of the form (t-sin(t), 1-cos(t), i.e.
// the cycloid curve.
  var graph = board.create('curve',
        [(t) => t-Math.sin(t),
         (t) => 1-Math.cos(t),
         0, 2*Math.PI]
     );

board.create('curve', [x, y]);

Data plots. x and y are arrays contining the x and y coordinates of the data points which are connected by line segments. The individual entries of x and y may also be functions. In case of x being an array, the curve type is data plot, regardless of the second parameter and if additionally the second parameter y is a function term the data plot evaluates.

Parameters

Name	Type	Description
`x`	Array
`y`	Array \| Number \| function

Examples

Data plot x-coordinates, y-coordinates

// Connect a set of points given by coordinates with dashed line segments.
// The x- and y-coordinates of the points are given in two separate
// arrays.
var x = [0,1,2,3,4,5,6,7,8,9];
var y = [9.2,1.3,7.2,-1.2,4.0,5.3,0.2,6.5,1.1,0.0];
var graph = board.create('curve', [x,y], {dash:2});

Draggable Bezier curve

 var col, p, c;
 col = 'blue';
 p = [];
 p.push(board.create('point',[-2, -1 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[1, 2.5 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[-1, -2.5 ], {size: 5, strokeColor:col, fillColor:col}));
 p.push(board.create('point',[2, -2], {size: 5, strokeColor:col, fillColor:col}));

 c = board.create('curve', JXG.Math.Numerics.bezier(p),
             {strokeColor:'red', name:"curve", strokeWidth:5, fixed: false}); // Draggable curve
 c.addParents(p);

board.create('curve', [points]);

Data plot with array of coordinates. Each coordinate is given as pair [x, y].

Parameters

Name	Type	Description
`points`	Array	Array of coordinate pairs `[[x1,y1], [x2,y2], ...]`

Example

Data plot [x,y]-pairs

var cu = board.create('curve', [
    [[-1, 1], [0, 2], [1, 0], [2, 1]]
]);

board.create('curve', [r, offsetopt, aopt, bopt]);

Parent elements for polar curves.

Parameters

Name	Type	Attributes	Default	Description
`r`	function			Function term `r(phi)` describing the polar curve
`offset`	Array \| Number \| function	<optional>	`[0,0]`	Offset of the curve. It has to be an array containing numbers or functions describing the offset. Default value is the origin [0,0].
`a`	Number \| function	<optional>		Left interval border a of the domain of r
`b`	Number \| function	<optional>		Right interval border a of the domain of r

Example

Polar plot

// Create a curve with the equation r(phi)= a*(1+phi), i.e.
// a cardioid.
  var a = board.create('slider',[[0,2],[2,2],[0,1,2]]);
  var graph = board.create('curve',
       [(phi) => a.Value()*(1-Math.cos(phi)),
        [1,0],
        0, 2*Math.PI],
        {curveType: 'polar'}
    );

board.create('curve', [c, t]);

Additionally, a curve can be created by providing a curve and a transformation (or an array of transformations). The result is a curve which is the transformation of the supplied curve.

Parameters

Name	Type	Description
`c`	Curve
`t`	Transformation

Example

// The curve cu2 is the reflection of cu1 against line li
var li = board.create('line', [1,1,1], {strokeColor: '#aaaaaa'});
var reflect = board.create('transform', [li], {type: 'reflect'});
var cu1 = board.create('curve', [[-1, -1, -0.5, -1, -1, -0.5], [-3, -2, -2, -2, -2.5, -2.5]]);
var cu2 = board.create('curve', [cu1, reflect], {strokeColor: 'red'});

Attributes

Own

RDPsmoothing

Description

Polyline simplification, i.e. remove data points from the curve which do not influence its appearance. In some cases this makes JSXGraph run much faster. The "smoothing" in the name is misleading, actually it does the contrary. But for historical reasons we stay with it. A better name would be RDPsimplification.

In certain cases this attribute causes problems, like for conic elements, curve intersection/union/difference

Implements the Ramer-Douglas-Peucker algorithm.

Type

Boolean

Default Value

false

See

Curve#RDPthreshold

Source

options.js, line 5376

RDPthreshold

Description

Threshold when to stop eliminating points in polyline simplification with the Ramer-Douglas-Peucker algorithm. This number affects simplification with user coordinates, but corresponds to the distance of a point to a line in pixel if the JSXGraph board has size 800x800 pixel and the pixel per unit both horizontally and vertically are roughly equal (For the latter, the geometric mean is taken).

Type

Number

Default Value

0.2

See

Curve#RDPsmoothing

Source

options.js, line 5397

curveType

Description

The curveType is set in JXG.Curve#generateTerm and used in JXG.Curve#updateCurve. Possible values are

'none'
'plot': Data plot
'parameter': we can not distinguish function graphs and parameter curves
'functiongraph': function graph
'polar'
'implicit' (not yet)

Only parameter and plot are set directly. Polar is set with JXG.GeometryElement#setAttribute only.

Type

String

Default Value

null

Source

options.js, line 5226

doAdvancedPlot

Description: If true use a recursive bisection algorithm. It is slower, but usually the result is better. It tries to detect jumps and singularities.
Type: Boolean
Default Value: true
Source: options.js, line 5245

doAdvancedPlotOld

Description

If true use the algorithm by Gillam and Hohenwarter, which was default until version 0.98.

Type

Boolean

Deprecated

Yes

Default Value

false

See

Curve#doAdvancedPlot

Source

options.js, line 5257

firstArrow

Description

Configure arrow head at the start position for curve. Recommended arrow head type is 7. For available values see Line#firstArrow.

Type

Boolean | Object

Default Value

false

See

Line#firstArrow

Source

options.js, line 5269

handDrawing

Description: The data points of the curve are not connected with straight lines but with bezier curves.
Type: Boolean
Default Value: false
Source: options.js, line 5282

label

Description: Attributes for curve label.
Type: Label
Source: options.js, line 5291

lastArrow

Description

Configure arrow head at the end position for curve. Recommended arrow head type is 7. For available values see Line#lastArrow.

Type

Boolean | Object

Default Value

false

See

Line#lastArrow

Source

options.js, line 5302

numberPointsHigh

Description

Number of points used for plotting triggered by up events (i.e. high quality plotting) in case Curve#doAdvancedPlot is false.

Type

Number

Default Value

1600

See

Curve#doAdvancedPlot

Source

options.js, line 5330

numberPointsLow

Description

Number of points used for plotting triggered by move events (i.e. lower quality plotting but fast) in case Curve#doAdvancedPlot is false.

Type

Number

Default Value

400

See

Curve#doAdvancedPlot

Source

options.js, line 5343

plotVersion

Description

Select the version of the plot algorithm.

Version 1 is very outdated
Version 2 is the default version in JSXGraph v0.99.*, v1.0, and v1.1, v1.2.0
Version 3 is an internal version that was never published in a stable version.
Version 4 is available since JSXGraph v1.2.0

Version 4 plots correctly logarithms if the function term is supplied as string (i.e. as JessieCode)

Type

Number

Default Value

Example

var c = board.create('functiongraph', ["log(x)"]);

Source

options.js, line 5356

recursionDepthHigh

Description

Configure arrow head at the start position for curve. Recommended arrow head type is 7.

Type

Number

Default Value

See

Curve#doAdvancedPlot

Source

options.js, line 5411

recursionDepthLow

Description

Number of points used for plotting triggered by move events in case (i.e. lower quality plotting but fast) Curve#doAdvancedPlot is true.

Type

Number

Default Value

See

Curve#doAdvancedPlot

Source

options.js, line 5423

Inherited

gradientSecondOpacity

highlightStrokeOpacity

highlightStrokeWidth

ignoreForLabelAutoposition

Members

Own

none

Inherited

Methods

Own

none

Inherited

addParentsFromJCFunctions

getTransformationSource

interpolationFunctionFromArray

Events

Own

none

Inherited

Details

Type

JXG.Curve

See

Source

base/curve.js, line 1513

Extends

JXG.Curve