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 each new control point looks almost like a point on the quadratic Bézier Equation 6 except that the parameter values are not always the same—they are a mix of and . Since this pattern is common enough, we are drawn to a more compact notation. Looking at Equation 7, the following notation calls out to us:

After some careful thought, we can define this properly with an inductive definition

where the base case is simply . Our new compact notation encompasses as well as the two-layer waterfalls we’ve been seeing. Note that

because of the commutativity property Equation 5; the order of the interpolation parameters doesn’t matter.

Our trimmed quadratic Bézier can now be written more compactly as

Generalising to cubic Bézier curves

Purely by looking at Equation 8, our solution to trimming a quadratic Bézier curve, it is easy to spot a patter which suggests how our solution generalises to cubic Béziers.

Given a cubic Bézier,

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

with control points

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:

In praise of bespoke notations!

We got this far mostly by inventing goofy notations that helped make patterns stand out. Inventing notations can be a fun way to approach mathematical problems: you create your own game and then discover the rules. You get to inject some visual personality. And the solution feels more your own—even though in this case it is not at all novel.