How to find a middle point of a beizer curve?
So, the formula to translate the 4 points in a function over time is the following (image from wikipedia):
Since you want the middle, and t
ranges from 0 to 1, you just have to set t = 1/2
So
B(1/2) = 1/8 P0 + 3/8 P1 + 3/8 P2 + 1/8 P3
You can use the bezierPoint()
function that comes with P5.js.
From the reference:
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);
}
You'd probably want to use a value of 0.5
for t
to get the midpoint.