I'm trying to divide a bezier curve into equal distance, so that I can treat the coordinates/positions of the points on the curve. I've searched some prior researchs and checked some questions, but I've failed to achieve the goal.
Here is the links that I refered,
1. Cubic Bezier Curve Segement
2. Determine Arc-length of a Catmull-Rom Spline to Move at a Constant Speed
and also I found the answers that implement what I want to do, but through the language that I can't grasp.
3. Dividing a Bezier Curve Into Equal Segments
4. How Do I Split Up a Curve Into Chords of Equal Length?
I'm using javascript, especially P5.js, here is my codes that I tried to put in the effort.
const x1 = 50;
const y1 = 50;
const x2 = 100;
const y2 = 50;
const x3 = 200;
const y3 = 100;
const x4 = 100;
const y4 = 200;
const value = 20;
function setup() {
createCanvas(window.innerWidth, window.innerHeight);
}
function draw() {
background(0);
translate(0, 0);
// bezier curve
noFill();
stroke(0, 0, 255);
beginShape();
vertex(x1, y1);
bezierVertex(x2, y2, x3, y3, x4, y4);
endShape();
for (let i = 0; i <= 4; i++) {
const x = pointOnCubeBezier(x1, y1, x2, y2, x3, y3, x4, y4, i / 4).x;
const y = pointOnCubeBezier(x1, y1, x2, y2, x3, y3, x4, y4, i / 4).y;
const angle = pointOnCubeBezier(x1, y1, x2, y2, x3, y3, x4, y4, i / 4).rotation;
noStroke();
fill(0, 255, 255);
push();
translate(x, y);
rotate(angle);
beginShape();
vertex(-value, -value);
vertex(value, -value);
vertex(value, value);
vertex(-value, value);
endShape();
pop();
noFill();
stroke(255, 0, 0);
point(x, y);
}
}
function pointOnCubeBezier(x1, y1, x2, y2, x3, y3, x4, y4, t) {
const x = cubicBezierValue(x1, x2, x3, x4, t);
const y = cubicBezierValue(y1, y2, y3, y4, t);
const nx = cubicBezierValue(x1, x2, x3, x4, t + 0.1);
const ny = cubicBezierValue(y1, y2, y3, y4, t + 0.1);
const rotation = Math.atan2(ny - y, nx - x) + PI * 2;
return { x: x, y: y, rotation: rotation };
}
function cubicBezierValue(p0, p1, p2, p3, t) {
return (Math.pow((1 - t), 3) * p0) + (3 * Math.pow((1 - t), 2) * t * p1) + (3 * (1 - t) * Math.pow(t, 2) * p2) + (Math.pow(t, 3) * p3);
}
// ↓ not used
function cubicTangent(a, b, c, d, t) {
return a + (-2 * a + 3 * b) * t + (2 * a - 6 * b + 3 * c) * t * t + (-a + 3 * b - 3 * c + d) * t * t * t;
}
// ↓ I tried to make constant speed, following the idea from "Determine Arc-length of a Catmull-Rom Spline to Move at a Constant Speed", but failed. I can't understand.
function cubicDerivative(a, b, c, d, t) {
return (-3 * a * Math.pow((1 - t), 2)) + (b * 3 * (Math.pow((1 - t), 2))) - (6 * (1 - t) * t) + (c * 6 * (1 - t) * t - 3 * (Math.pow(t, 2))) + (3 * d * Math.pow(t, 2));
// return 6 * (1 - t) * (c - 2 * b + a) + 6 * t * (d - 2 * c + b);
}
So, this is the result from the code. It's not the equal segment. What should I do? I think I'll be perfectly happy if this problem is solved.