1

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.

enter image description here

F. Müller
  • 3,969
  • 8
  • 38
  • 49
HAPPY
  • 25
  • 4

0 Answers0