Have also a look at "Bezier curves".
The red points are connected by a cubic Bezier curve. The blue points are the control points.
Here, the Bezier curve together with its scaffolds is shown. The black points are always the midpoints of their line segment. For test purposes, the canvas renderer is used (instead of SVG).
// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-4, 4, 4, -4],
keepaspectratio: true,
axis: true,
renderer: 'canvas'
});
var col,
p = [],
l = [],
m = [];
col = 'red';
p.push(board.create('point', [2, -1], {
color: col
})); // data point
col = 'blue';
p.push(board.create('point', [0.75, 2.5], {
color: col
})); // control point
p.push(board.create('point', [-1.5, 2.4], {
color: col
})); // control point
col = 'red';
p.push(board.create('point', [-3, -2], {
color: col
})); // data point
l.push(board.create('segment', [p[0], p[1]], {
strokeOpacity: 0.5
}));
l.push(board.create('segment', [p[1], p[2]], {
strokeOpacity: 0.5
}));
l.push(board.create('segment', [p[2], p[3]], {
strokeOpacity: 0.5
}));
col = 'black';
m.push(board.create('midpoint', [l[0]], {
size: 1,
color: col,
name: ''
}));
m.push(board.create('midpoint', [l[1]], {
size: 1,
color: col,
name: ''
}));
m.push(board.create('midpoint', [l[2]], {
size: 1,
color: col,
name: ''
}));
l.push(board.create('segment', [m[0], m[1]], {
strokeOpacity: 0.5
}));
l.push(board.create('segment', [m[1], m[2]], {
strokeOpacity: 0.5
}));
m.push(board.create('midpoint', [l[3]], {
size: 1,
color: col,
name: ''
}));
m.push(board.create('midpoint', [l[4]], {
size: 1,
color: col,
name: ''
}));
l.push(board.create('segment', [m[3], m[4]], {
strokeOpacity: 0.5
}));
m.push(board.create('midpoint', [l[5]], {
size: 1,
color: col,
name: ''
}));
var c = board.create('curve', JXG.Math.Numerics.bezier(p), {
strokecolor: 'blue',
strokeOpacity: 0.6,
strokeWidth: 5
});
This example is licensed under a Creative Commons Attribution 4.0 International License.
Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.