I need to find a point and its angle on a cubic Bezier curve that can be dynamically changed using JavaScript.
I asked ChatGPT about this, to which it generated the following code, but the angle is not calculated correctly, where am I or is ChatGPT wrong?
// Initialize with some initial control points
let points = [
{ x: 50, y: 100 }, // Start point
{ x: 150, y: 50 }, // First control point
{ x: 250, y: 150 }, // Second control point
{ x: 350, y: 100 } // End point
];
function deCasteljau(points, t) {
if (points.length === 1) {
return points[0];
}
const newPoints = [];
for (let i = 0; i < points.length - 1; i++) {
const x = (1 - t) * points[i].x + t * points[i + 1].x;
const y = (1 - t) * points[i].y + t * points[i + 1].y;
newPoints.push({ x, y });
}
return deCasteljau(newPoints, t);
}
function cubicBezierDerivative(points, t) {
const derivativePoints = [];
const n = points.length - 1;
for (let i = 0; i < n; i++) {
const dx = n * (points[i + 1].x - points[i].x);
const dy = n * (points[i + 1].y - points[i].y);
derivativePoints.push({ x: dx, y: dy });
}
return derivativePoints;
}
function bezierAngle(points, t) {
const dPoints = cubicBezierDerivative(points, t);
const point = deCasteljau(points, t);
const dx = dPoints[0].x;
const dy = dPoints[0].y;
const radian = Math.atan2(dy, dx);
//const angle = radian*180/Math.PI;
return radian;
}
const point = deCasteljau(points, 0.9);
const angle = bezierAngle(points, 0.9);
live demo:
const canvas = document.getElementById('splineCanvas');
const ctx = canvas.getContext('2d');
let points = []; // Array to hold control points
let selectedPointIndex = -1; // Index of the currently selected control point
// Event listener for mouse down to select control point
canvas.addEventListener('mousedown', function(event) {
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
// Check if mouse is over any control point
for (let i = 0; i < points.length; i++) {
const dx = points[i].x - mouseX;
const dy = points[i].y - mouseY;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 6) { // 6 is the radius for selecting control point
selectedPointIndex = i;
canvas.addEventListener('mousemove', onMouseMove);
canvas.addEventListener('mouseup', onMouseUp);
break;
}
}
});
// Event listener for mouse move to update control point position
function onMouseMove(event) {
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
points[selectedPointIndex].x = mouseX;
points[selectedPointIndex].y = mouseY;
drawSpline();
}
// Event listener for mouse up to stop updating control point position
function onMouseUp() {
canvas.removeEventListener('mousemove', onMouseMove);
canvas.removeEventListener('mouseup', onMouseUp);
selectedPointIndex = -1;
}
let testAngle = 65;
// Draw spline function
function drawSpline() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length - 2; i+=3) {
ctx.bezierCurveTo(
points[i].x,
points[i].y,
points[i+1].x,
points[i+1].y,
points[i+2].x,
points[i+2].y,
);
}
ctx.stroke();
// Draw control points
for (const point of points) {
ctx.beginPath();
ctx.arc(point.x, point.y, 6, 0, Math.PI * 2);
ctx.fillStyle = "#ff0000";
ctx.fill();
ctx.closePath();
}
const point = deCasteljau(points, 0.9);
//console.log('point = ', point);
const angle = bezierAngle(points, 0.9);
ctx.save();
ctx.translate(point.x, point.y);
ctx.rotate(angle);
ctx.translate(-point.x, -point.y);
ctx.fillStyle = "green";
ctx.fillRect(point.x-5, point.y-5, 10, 10);
ctx.restore();
}
// Initialize with some initial control points
points = [
{ x: 50, y: 100 }, // Start point
{ x: 150, y: 50 }, // First control point
{ x: 250, y: 150 }, // Second control point
{ x: 350, y: 100 } // End point
];
function deCasteljau(points, t) {
if (points.length === 1) {
return points[0];
}
const newPoints = [];
for (let i = 0; i < points.length - 1; i++) {
const x = (1 - t) * points[i].x + t * points[i + 1].x;
const y = (1 - t) * points[i].y + t * points[i + 1].y;
newPoints.push({ x, y });
}
return deCasteljau(newPoints, t);
}
function cubicBezierDerivative(points, t) {
const derivativePoints = [];
const n = points.length - 1;
for (let i = 0; i < n; i++) {
const dx = n * (points[i + 1].x - points[i].x);
const dy = n * (points[i + 1].y - points[i].y);
derivativePoints.push({ x: dx, y: dy });
}
return derivativePoints;
}
function bezierAngle(points, t) {
const dPoints = cubicBezierDerivative(points, t);
const point = deCasteljau(points, t);
const dx = dPoints[0].x;
const dy = dPoints[0].y;
const radian = Math.atan2(dy, dx);
//const angle = radian*180/Math.PI;
return radian;
}
drawSpline();<canvas id="splineCanvas" width="600" height="300"></canvas>
2
Answers
Just from a math perspective I question what you mean by "finding a point and its angle" points in 2D space, like you represented in the points array, are just
{x, y}there is no angle …What we can do is calculate the angle between two points, and looks like that is what the functions
cubicBezierDerivative&bezierAngleattempted to do, I’m assuming that is what you need/ask, I would base my code below on that, also I’m going to assume that the point returned byfunction deCasteljauis correct, I’m not going to spend any research time into how is that doing what is doing.So we can modify the
function bezierAngleto return the angle between two given points, the current point and and what I call "next" point:with the angle between those two the square we draw is "facing" the right way.
In the code below you will see a new function
drawRectthat is where we draw the squares, and since it is now a function we can have multiple square with different colorsPrecise tangent at unit position on curve
Example code below gives exact tangent of curve at unit position on bezier.
The example normalizes the tangent to be more useful for various rendering tasks.
Solutions includes quadratic and cubic curves.
To convert the tangent to an angle just use
Math.atan2(tangent.y, tangent.x);though there is no need as a matrix can be constructed directly from the tangent (no need to mess with rotations, translations, etc…) E.G.ctx.setTransform(tangent.x, tangent.y, -tangent.y, tangent.x, pos.x, pos.y);whereposis the position on the curve.