How to trim Bézier curves

Suppose you want to trim a Bézier curve, like so:

How do you find the control points of the new curve?

Of course, this question of has a well-known answer, which is implemented in nearly every piece of graphics software capable of rendering dashed curves. But let’s treat it like a puzzle. This post shows one solution which is hopefully fun and visual.

How Bézier curves work

As a reminder, a (cubic) Bézier with parameter is defined by four control points, combined using de Casteljau’s algorithm: the point is obtained by linearly interpolating neighboring control points again and again until one point is left:

The figure shows this process for varying . This was a cubic Bézier curve, with three starting edges (four control points); quadratic Béziers have two starting edges (three control points), and so on.

Mathematically, the linear interpolation of vectors and by parameter value is

so the final Bézier curve is given by:

This long expression can be expanded and reduced to a polynomial in and … doing that doesn’t sound fun. Instead, let’s define a cuter notation for linear interpolations to make things nicer to behold.

Now, our cubic Bézier curve looks like a waterfall:

Better! Maybe our new notation will even facilitate algebraic manipulations later.

Problem statement

Our task is to find the curve obtained by trimming an existing Bézier curve so that its parameter ranges between some limits, . Describing this curve is easy: it’s just the original curve with rescaled appropriately:

We can linearly interpolate the parameter itself by replacing

so the entire expression for the trimmerd curve is

for .

The hard part, however, is converting Equation 2 into a standard Bézier curve by finding appropriate control points .

Algebraically, this means manipulating Equation 2 so it is of the form:

Some identities for later

Before we can do anything with our new notation, we need to figure out the rules of the game.

It is easy to notice a few “linearity properties”

whose proofs are just a matter of expanding the definition in Equation 1:

Glancing at Equation 2, we know we will have to deal with nested expressions of the form . This motivates us to discover the “splitting property”

which can be proven by evaluating the left-hand side at and and then reasoning that the values inbetween be a linear interpolation of the two, since everything is linear in .

Finally, we can also come up with a “commutation property”

which basically says that the order in which you perform a 2d linear interpolation doesn’t matter — interpolating along then or then give the same thing. (Note that and swap places!) You can prove the commutation property using the linearity properties from Equation 3:

Finding the control points

Now, we can go about manipulating Equation 2. First, let’s try a simpler case: trimming a quadratic Bézier curve. The expression for this curve is

Using the splitting property Equation 4 once on the bottom layers, we get

…and splitting the top layer gives

…which might look unwieldy, but bare with me. Next, use the commutation property Equation 5 to bubble the variables up to the top:

We are done—this is the standard form of a quadratic Bézier with new control points:

One more notational trick

By looking at Equation 7, you might notice a pattern: the formula for new control point , and looks almost like a point on the quadratic Bézier Equation 6 except for the parameter values. Since this pattern keeps recurring, we can define the notation

with the base case . Our notation encompasses as well as the two-layer patterns we see from above:

Note that

because of the commutativity property Equation 5, and more generally, the order of the parameters doesn’t matter.

The solution to the trimmed quadratic Bézier above can now be written more compactly as

The cubic case

By now, hopefully it is clear from Equation 8 how the Bézier trimming problem generalises from quadratic curves to cubic!

Given a cubic Bézier,

the curve obtained by reparametrising to the interval to is the cubic Bézier

with control points

In praise of bespoke notations

I solved this problem in a fun way by inventing a goofy notation. While it isn’t a rigorous derivation, the notation helped with spotting the correct patterns early on. Try to solve your next problem in this way.

To finish, the formula for a trimmed order Bézier curve through points is easily guessed by extrapolating the patterns from the quadratic and cubic cases above: