Как найти среднюю точку кривой Бизера?

Question

Я хочу сделать «именованную» кривую Безье. Я хочу, чтобы он назывался одним словом, поэтому мне не нужно беспокоиться о переносе слов.

Я делаю кривую Безье с помощью функции P5 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey) и хочу, чтобы в середине кривой Безье отображалась строка. Но я не знаю, как найти «середину» кривой.

Пока мой результат выглядит так (Я не знаю, где начать решать эту проблему, поэтому я выбрал более простой способ печати текста в начале кривой):

Но я хочу, чтобы это выглядело так:

Это означает, что мне нужны координаты P1 и P2:

Извините за краску, но у меня еще нет своего кода. Как только у меня появятся руки, я добавлю это сюда.

Вот код, который рисует кривую:

let
b = dest.inTriangle.middle, // destination triangle
g = this.outTriangle.p3,    // tip of out triangle
c = {x:b.x-g.x,y:b.y-g.y},  // distance between objects
r1 = {},                    // bezier point 1
r2 = {};                    // bezier point 2
if(c.x > 0){
    // b is on left
    r1 = {
        x: g.x + c.x/2,
        y: g.y
    };
    r2 = {
        x: b.x - c.x/2,
        y: b.y
    };
    }
else {
    // b is on right
    r1 = {
        x: g.x - c.x/2,
        y: g.y + c.y
    };
    r2 = {
        x: b.x + c.x/2,
        y: b.y - c.y
    };
}
noFill();
stroke(0);
bezier(
    g.x, g.y,
    r1.x, r1.y,
    r2.x, r2.y,
    b.x, b.y
);
noStroke();
fill(0);
text(this.name, g.x, (g.y-this.h/2))

Answer 1

Вы можете использовать функцию bezierPoint(), которая поставляется с P5.js.

От ссылка :

noFill();
var x1 = 85,
 x2 = 10,
 x3 = 90,
 x4 = 15;
var y1 = 20,
 y2 = 10,
 y3 = 90,
 y4 = 80;
bezier(x1, y1, x2, y2, x3, y3, x4, y4);
fill(255);
var steps = 10;
for (var i = 0; i <= steps; i++) {
  var t = i / steps;
  var x = bezierPoint(x1, x2, x3, x4, t);
  var y = bezierPoint(y1, y2, y3, y4, t);
  ellipse(x, y, 5, 5);
}

Возможно, вы захотите использовать значение 0.5 для t, чтобы получить среднюю точку.

Answer 2

Итак, формула для перевода 4-х точек в функцию во времени выглядит следующим образом (изображение из Википедии):

Так как вам нужно среднее значение, а t находится в диапазоне от 0 до 1, вам просто нужно установить t = 1/2

Итак

B (1/2) = 1/8 P0 + 3/8 P1 + 3/8 P2 + 1/8 P3