Published
Edited
Jan 4, 2021
ctrlPoints = [
[20, 20],
[80, 195],
[180, 80],
[220, 190],
]
{
const canvas = DOM.canvas(300, 200);
const ctx = canvas.getContext('2d');
const samples = 100;
const tension = 0.25;
const interp = new lib.CurveInterpolator(ctrlPoints, { tension, closed: false });
// draw a polyline on a canvas
ctx.lineWidth = 1.5;
ctx.strokeStyle = 'blue';
ctx.beginPath();
ctx.moveTo(ctrlPoints[0][0], ctrlPoints[0][1]);
// get interpolated points from the curve interpolator instance
interp.getPoints(samples).forEach(p => {
ctx.lineTo(p[0], p[1]);
});
ctx.stroke();
// get vecors at a specific position/time along the curve
const t = position; // time along curve (0-1)
const length = 50; // length of vector lines
const pos = interp.getPointAt(t);
const vTan = interp.getTangentAt(t);
// in 2d the normal can be determined by flipping and negating one of the components
// (depending on orientation preferences)
const vNorm = [vTan[1], -vTan[0]];
// draw the tangent vector on the canvas
ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.moveTo(pos[0], pos[1]);
ctx.lineTo(pos[0] + vTan[0] * length, pos[1] + vTan[1] * length);
ctx.stroke();
// draw the normal vector on the canvas
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(pos[0], pos[1]);
ctx.lineTo(pos[0] + vNorm[0] * length, pos[1] + vNorm[1] * length);
ctx.stroke();
return canvas;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
