17

Assuming I'm using some graphic API which allows me to draw bezier curves by specifying the 4 necessary points: start, end, two control points.

Can I reuse this function to draw x percent of the 'original' curve (by adjusting the control points and the end point)?

Or is it impossible?

Unnecessary information, should someone care:

  • I need the whole thing to draw every n % of the original
    bezier curve with different color and/or line style
  • I'm using Java's Path2D to draw bezier curves:

    Path2D p = new GeneralPath();
    p.moveTo(x1, y1);
    p.curveTo(bx1, by1, bx2, by2, x2, y2);
    g2.draw(p);
    

2 Answers 2

24

What you need is the De Casteljau algorithm. This will allow you to split your curve into whatever segments you'd like.

However, since you're dealing with just cubic curves, I'd like to suggest a slightly easier to use formulation that'll give you a segment from t0 to t1 where 0 <= t0 <= t1 <= 1. Here's some pseudocode:

u0 = 1.0 - t0
u1 = 1.0 - t1

qxa =  x1*u0*u0 + bx1*2*t0*u0 + bx2*t0*t0
qxb =  x1*u1*u1 + bx1*2*t1*u1 + bx2*t1*t1
qxc = bx1*u0*u0 + bx2*2*t0*u0 +  x2*t0*t0
qxd = bx1*u1*u1 + bx2*2*t1*u1 +  x2*t1*t1

qya =  y1*u0*u0 + by1*2*t0*u0 + by2*t0*t0
qyb =  y1*u1*u1 + by1*2*t1*u1 + by2*t1*t1
qyc = by1*u0*u0 + by2*2*t0*u0 +  y2*t0*t0
qyd = by1*u1*u1 + by2*2*t1*u1 +  y2*t1*t1

xa = qxa*u0 + qxc*t0
xb = qxa*u1 + qxc*t1
xc = qxb*u0 + qxd*t0
xd = qxb*u1 + qxd*t1

ya = qya*u0 + qyc*t0
yb = qya*u1 + qyc*t1
yc = qyb*u0 + qyd*t0
yd = qyb*u1 + qyd*t1

Then just draw the Bézier curve formed by (xa,ya), (xb,yb), (xc,yc) and (xd,yd).

Note that t0 and t1 are not exactly percentages of the curve distance but rather the curves parameter space. If you absolutely must have distance then things are much more difficult. Try this out and see if it does what you need.

Edit: It's worth noting that these equations simplify quite a bit if either t0 or t1 is 0 or 1 (i.e. you only want to trim from one side).

Also, the relationship 0 <= t0 <= t1 <= 1 isn't a strict requirement. For example t0 = 1 and t1 = 0 can be used to "flip" the curve backwards, or t0 = 0 and t1 = 1.5 could be used to extend the curve past the original end. However, the curve might look different than you expect if you try to extend it past the [0,1] range.

Edit2: More than 3 years after my original answer, MvG pointed out an error in my equations. I forgot the last step (an extra linear interpolation to get the final control points). The equations above have been corrected.

7
  • 1
    +1 Some commentary stating explicitly that points a and d are points on the original curve that define the extent of a new partial curve would be helpful. Also, points b and c are newly defined control points (i.e., only loosely related to the original control points).
    – Bob Cross
    May 18, 2009 at 19:14
  • @Bob Cross: Noted. For the curious, point b lies along the tangent of the curve at point a and point c lies along the tangent of the curve at point d. In fact, a=p(t0), b=a+p'(t0)/3, c=d-p'(t1)/3 and d=p(t1), where p(t) is the point on the curve at t, and p'(t) is the 1st derivative of the curve at t.
    – Naaff
    May 18, 2009 at 19:48
  • 1
    @Naaff, your curve only uses polynomials of degree two, so it cannot describe points on a degree three curve (i.e. cubic bezier curve) exactly. Noticed this when another question tried to build on this.
    – MvG
    Jul 28, 2012 at 23:23
  • @MvG, You're right. I had inadvertently left off the linear interpolation step (which, when combined with the quadratic equations is equivalent to a cubic). Thanks, I've fixed this above.
    – Naaff
    Jul 30, 2012 at 1:51
  • For those interested, here is a geometric interpretation of the equations above: Qa=(qxa,qya) and Qb=(qxb,qyb) are on the quadratic curve formed by the first three cubic control points. Similarly, Qc=(qxc,qyc) and Qd=(qxd,qyd) are on the quadratic curve formed by the last three cubic control points. (xa,ya) and (xb,yb) are on the line between Qa and Qc, while (xc,yc) and (xd,yd) are on the line between Qb and Qd.
    – Naaff
    Jul 30, 2012 at 1:57
15
+50

In an answer to another question I just included some formulas to compute control points for a section of a cubic curve. With u = 1 − t, a cubic bezier curve is described as

B(t) = u3 P1 + 3u2t P2 + 3ut2 P3 + t3 P4

P1 is the start point of the curve, P4 its end point. P2 and P3 are the control points.

Given two parameters t0 and t1 (and with u0 = (1 − t0), u1 = (1 − t1)), the part of the curve in the interval [t0, t1] is described by the new control points

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

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.

Note that a given percentage of the parameter range for t in general will not correspond to that same percentage of the length. So you'll most likely have to integrate over the curve to turn path lengths back into parameters. Or you use some approximation.

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.