# Cubic bezier curve segment

If I have the 4 points describing a Bezier curve P1, P2, P3, P4 (where P1 and P4 are the end points of the curve and P2 and P3 are the control points of the curve), how could I find the points that describes only a segment of this bezier curve?

I found this answer which is exactly what I am looking for but the answer seems wrong. If I set t0=0 and t1=1 in the equations which should represent the entire bezier curve, the resulting points are not valid. They are not equal to the original points.

It seems that the solution is related to the De Casteljau's algorithm, but I can't understand how it works.

-

Yes, De Casteljau's algorithm is the way to go.

# Parametrization

If your curve isn't correctly parametrized from t=0 trough t=1, then it seems you're using the wrong equation to descibe your curve. Wikipedia has the correct formula for you:

B(t) = (1−t)3 P1 + 3(1−t)2t P2 + 3(1−t)t2 P3 + t3 P4

[I adjusted the indices from the zero-based form in Wikipedia to the one-based from your question.]

If you set t=0, you get P1, your starting point. If you set t=1, you get P4, your endpoint. In between, the shape of the curve is determined by those points and the two control points P2 and P3.

# De Casteljau's algorithm

Let t be the parameter where you want to cut your curve. Let's say you want to keep only the initial part. You draw the three lines from P1 to P2, from there to P3 and from there to P4. Each of these lines you divide at a the fraction t of its length, i.e. the length of the line before the dividing point relates to the entire length as t : 1. You now have three new points P12 through P34. Do the same again to obtain two points P123 and P234, and again to obtain the single point P1234. This final point is B(t), the endpoint of your truncated curve. The startpoint is P1 as before. The new control points are P12 and P123 the way we just constructed them.

Removing an initial part of the curve works the same way. So in two steps, you can trim both ends of your curve. You obtain a new set of control points which exactly (up to the numeric precision you use) describe a segment of your original curve, with no approximation or similar involved.

You can translate all of the geometric descriptions above into algebraic formulas, and in a perfect world you should come up with the results from this answer to the question you quoted.

Alas, this doesn't appear to be a perfect world. At the time of this writing, those formulas only used polynoms of degree two, so they could not describe endpoints on a third degree curve. The correct formula should be the following:

• P'1 = u0u0u0 P1 + (t0u0u0 + u0t0u0 + u0u0t0) P2 + (t0t0u0 + u0t0t0 + t0u0t0) P3 + t0t0t0 P4
• P'2 = u0u0u1 P1 + (t0u0u1 + u0t0u1 + u0u0t1) P2 + (t0t0u1 + u0t0t1 + t0u0t1) P3 + t0t0t1 P4
• P'3 = u0u1u1 P1 + (t0u1u1 + u0t1u1 + u0u1t1) P2 + (t0t1u1 + u0t1t1 + t0u1t1) P3 + t0t1t1 P4
• P'4 = u1u1u1 P1 + (t1u1u1 + u1t1u1 + u1u1t1) P2 + (t1t1u1 + u1t1t1 + t1u1t1) P3 + t1t1t1 P4

where u0 = 1 − t0 and u1 = 1 − t1.

Note that in the parenthesized expressions, at least some of the terms are equal and can be combined. I did not do so as the formula as stated here will make the pattern clearer, I believe. You can simply execute those computations independently for the x and y directions to compute your new control points.

-
Thanks for the great explanation. But if I use the equations that you are referring to and that I use t0=0 and t1=1, I should have the complete bezier curve, so the 4 calculated points should be equal to the original 4 points but they are not. You get soemthing like this: xa=x1 (OK), xb=bx2 (bad), xc=bx1 (bad), xd=x2 (OK). I use HTML5 canvas method to draw the bezier curve by passing the 4 points and the curve is not right. Is there an error in the equations? – Absolom Jul 28 '12 at 21:30
@Absolom, indeed there seems to be an error in that answer I linked to. Correct formula should now be included. – MvG Jul 28 '12 at 23:20
It works perfectly! Big thanks for taking the time to write all the formulas down. It might help other people as well. Thanks! – Absolom Jul 28 '12 at 23:57
@MvG, thanks for pointing out that there was an error in my old answer (referenced by the asker). I have now fixed the error. – Naaff Jul 30 '12 at 2:00
C macros for copy pasting: gist.github.com/ianterrell/5978833 – Ian Terrell Jul 11 '13 at 20:16
The text passage contains a mathematical question about finding the points that describe a segment of a cubic Bezier curve, and it also provides an answer using De Casteljau's algorithm and the correct parametric formula for a cubic Bezier curve.
single_question_with_answer
Given a text passage, determine:
    1. If it contains a mathematical question (including word problems or calculations)
    2. If an answer to that mathematical question is provided in the text

First, describe the content structure you found in 1-2 sentences.

Then provide your analysis in the following format:
TYPE: <one of the following values>
- NO_QUESTION
- SINGLE_QUESTION
- SINGLE_QUESTION_WITH_ANSWER
- MULTIPLE_QUESTIONS
- MULTIPLE_QUESTIONS_WITH_ANSWERS
system
# Cubic bezier curve segment

If I have the 4 points describing a Bezier curve P1, P2, P3, P4 (where P1 and P4 are the end points of the curve and P2 and P3 are the control points of the curve), how could I find the points that describes only a segment of this bezier curve?

I found this answer which is exactly what I am looking for but the answer seems wrong. If I set t0=0 and t1=1 in the equations which should represent the entire bezier curve, the resulting points are not valid. They are not equal to the original points.

It seems that the solution is related to the De Casteljau's algorithm, but I can't understand how it works.

-

Yes, De Casteljau's algorithm is the way to go.

# Parametrization

If your curve isn't correctly parametrized from t=0 trough t=1, then it seems you're using the wrong equation to descibe your curve. Wikipedia has the correct formula for you:

B(t) = (1−t)3 P1 + 3(1−t)2t P2 + 3(1−t)t2 P3 + t3 P4

[I adjusted the indices from the zero-based form in Wikipedia to the one-based from your question.]

If you set t=0, you get P1, your starting point. If you set t=1, you get P4, your endpoint. In between, the shape of the curve is determined by those points and the two control points P2 and P3.

# De Casteljau's algorithm

Let t be the parameter where you want to cut your curve. Let's say you want to keep only the initial part. You draw the three lines from P1 to P2, from there to P3 and from there to P4. Each of these lines you divide at a the fraction t of its length, i.e. the length of the line before the dividing point relates to the entire length as t : 1. You now have three new points P12 through P34. Do the same again to obtain two points P123 and P234, and again to obtain the single point P1234. This final point is B(t), the endpoint of your truncated curve. The startpoint is P1 as before. The new control points are P12 and P123 the way we just constructed them.

Removing an initial part of the curve works the same way. So in two steps, you can trim both ends of your curve. You obtain a new set of control points which exactly (up to the numeric precision you use) describe a segment of your original curve, with no approximation or similar involved.

You can translate all of the geometric descriptions above into algebraic formulas, and in a perfect world you should come up with the results from this answer to the question you quoted.

Alas, this doesn't appear to be a perfect world. At the time of this writing, those formulas only used polynoms of degree two, so they could not describe endpoints on a third degree curve. The correct formula should be the following:

• P'1 = u0u0u0 P1 + (t0u0u0 + u0t0u0 + u0u0t0) P2 + (t0t0u0 + u0t0t0 + t0u0t0) P3 + t0t0t0 P4
• P'2 = u0u0u1 P1 + (t0u0u1 + u0t0u1 + u0u0t1) P2 + (t0t0u1 + u0t0t1 + t0u0t1) P3 + t0t0t1 P4
• P'3 = u0u1u1 P1 + (t0u1u1 + u0t1u1 + u0u1t1) P2 + (t0t1u1 + u0t1t1 + t0u1t1) P3 + t0t1t1 P4
• P'4 = u1u1u1 P1 + (t1u1u1 + u1t1u1 + u1u1t1) P2 + (t1t1u1 + u1t1t1 + t1u1t1) P3 + t1t1t1 P4

where u0 = 1 − t0 and u1 = 1 − t1.

Note that in the parenthesized expressions, at least some of the terms are equal and can be combined. I did not do so as the formula as stated here will make the pattern clearer, I believe. You can simply execute those computations independently for the x and y directions to compute your new control points.

-
Thanks for the great explanation. But if I use the equations that you are referring to and that I use t0=0 and t1=1, I should have the complete bezier curve, so the 4 calculated points should be equal to the original 4 points but they are not. You get soemthing like this: xa=x1 (OK), xb=bx2 (bad), xc=bx1 (bad), xd=x2 (OK). I use HTML5 canvas method to draw the bezier curve by passing the 4 points and the curve is not right. Is there an error in the equations? – Absolom Jul 28 '12 at 21:30
@Absolom, indeed there seems to be an error in that answer I linked to. Correct formula should now be included. – MvG Jul 28 '12 at 23:20
It works perfectly! Big thanks for taking the time to write all the formulas down. It might help other people as well. Thanks! – Absolom Jul 28 '12 at 23:57
@MvG, thanks for pointing out that there was an error in my old answer (referenced by the asker). I have now fixed the error. – Naaff Jul 30 '12 at 2:00
C macros for copy pasting: gist.github.com/ianterrell/5978833 – Ian Terrell Jul 11 '13 at 20:16
user
The text passage contains a mathematical question about finding the points that describe a segment of a cubic Bezier curve, and it also provides an answer using De Casteljau's algorithm and the correct parametric formula for a cubic Bezier curve.

TYPE: SINGLE_QUESTION_WITH_ANSWER