Bezier curves
Have also a look at "Approximate circular arc by a Bézier curve"or "Bezier curves by scaffolding".
The red points are connected by a cubic Bézier curve. The blue points are the control points.
<button onClick="addSegment();">Add segment</button>
<button onClick="removeSegment();">Remove last segment</button>
// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-4, 4, 4, -4],
keepaspectratio: true,
axis: true
});
// Create initial points
var p = [];
var 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', [-0.3, 0.3], {color: col})); // control point
col = 'red';
p.push(board.create('point', [-3, 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.8], {color: col})); // control point
col = 'red';
p.push(board.create('point', [2, -0.5], {color: col})); // data point
// Bezier curve
var c = board.create('curve', JXG.Math.Numerics.bezier(p), {
strokecolor: 'blue',
strokeOpacity: 0.6,
strokeWidth: 5
});
var addSegment = function() {
col = 'blue';
p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], {
strokeColor: col,
fillColor: col
})); // control point
p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], {
strokeColor: col,
fillColor: col
})); // control point
col = 'red';
p.push(board.create('point', [Math.random() * 8 - 4, Math.random() * 8 - 4], {
strokeColor: col,
fillColor: col
})); // data point
board.update();
};
var removeSegment = function() {
if (p.length > 4) {
board.removeObject(p[p.length - 1]);
board.removeObject(p[p.length - 2]);
board.removeObject(p[p.length - 3]);
p.splice(p.length - 3, 3);
}
board.update();
};
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.