Creating points on a Bezier curve

Bezier curves are drawing by four points: two main points (p0, p1) and two handle points (p0_hr, ​​p1_hl).

To add an additional point p2 to a curve at a moment t, with t changes from 0 to 1 and represents the ratio of the p2 point location to the total length of the curve, we need to do the following:

What we have to start:

  • coordinates of the p0 and p1 points
  • p0_hr – coordinates of the right handle point for p0
  • p1_hl – coordinates of the left handle point for p1
  • t ratio

We need to find:

  • coordinates of the new p2 point
  • coordinates of its two handle points (left and right)
  • new p0_hr and p1_hl control points coordinates

Let’s divide the segments [p0, p0_hr], [p0_hr, ​​p1_hl] and [p1_hl, p1] with the t1, t2, and t3 points in the ratio t along their length.

The coordinates of these points can be found with vector math. The point coordinates data is the vector from the world origin (0,0,0) to this point.

How it looks for the t1 point:

Having the original vectors (p0) and (p0_hr) we can find the (v1) vector as the difference of (p0) and (p0_hr):

Having the t ratio, we can get the (v2) vector:

The addition of the (v2) and (p0) vectors gives us the desired vector (t1):

Combine all for t1:

Similarly for t2 and t3 points:

We found the t1 and t3 points which are the coordinates of the new positions of the handle points for p0 and p1.

Next, find the coordinates of the handle points for p2.

Connect the t1, t2 and t2, t3 points. Now we can get handle points for p2, by the same t ratio.

It remains to find the p2 point coordinates.

Connect the p2_hl and p2_hr points. We can find the desired p2 point by the same t ratio.

We found all expressions to get all the necessary points. Now we can leave the math and write a function to find an additional point on the Bezier curve with all the necessary handle points.

Now we can add a new point to the Bezier curve and configure the coordinates of all the necessary points.

0 0 votes
Article Rating
Subscribe
Notify of
guest

2 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Paul Miller
Paul Miller
8 months ago

Thank you for a nice visualisation. Just one little error I found: diagram 5-1 the ‘t’ between t2 and t3 is on the wrong side of p2_hr.