If you enjoyed this book, or you simply found it useful for something you were trying to get done, and you were wondering how to let me know you appreciated this book, you have two options: you can either head on over to the Patreon page for this book, or if you prefer to make a one-time donation, head on over to the buy Pomax a coffee page. This work has grown from a small primer to a 100-plus print-page-equivalent reader on the subject of Bézier curves over the years, and a lot of coffee went into the making of it. I don't regret a minute I spent on writing it, but I can always do with some more coffee to keep on writing!

If you have suggestions for new sections, hit up the Github issue tracker (also reachable from the repo linked to in the upper right). If you have questions about the material, there's currently no comment section while I'm doing the rewrite, but you can use the issue tracker for that as well. Once the rewrite is done, I'll add a general comment section back in, and maybe a more topical "select this section of text and hit the 'question' button to ask a question about it" system. We'll see.

Most of the mathematics in this Primer are early high school maths. If you understand basic arithmetic, and you know how to read English, you should be able to get by just fine. There will at times be far more complicated maths, but if you don't feel like digesting them, you can safely skip over them by either skipping over the "detail boxes" in section or by just jumping to the end of a section with maths that looks too involving. The end of sections typically simply list the conclusions so you can just work with those values directly.

This book is an open source software project, and lives on two github repositories. The first is https://github.com/pomax/bezierinfo and is the purely-for-presentation version you are viewing right now. The other repository is https://github.com/pomax/BezierInfo-2 , which is the development version, housing all the code that gets turned into the web version, and is also where you should file issues if you find bugs or have ideas on what to change or add to the primer.

This page uses interactive examples, relying heavily on Bezier.js , as well as maths formulae which are typeset into SVG using the XeLaTeX typesetting system and pdf2svg by David Barton .

But what if you need to program them yourself? What are the pitfalls? How do you draw them? What are the bounding boxes, how do you determine intersections, how can you extrude a curve, in short: how do you do everything that you might want to do with these curves? That's what this page is for. Prepare to be mathed!

Anyway, that's mostly trivia, what you are more likely to care about is that these curves are handy: you can link up multiple Bézier curves so that the combination looks like a single curve. If you've ever drawn Photoshop "paths" or worked with vector drawing programs like Flash, Illustrator or Inkscape, those curves you've been drawing are Bézier curves.

They're named after Pierre Bézier , who is principally responsible for making them known to the world as a curve well-suited for design work (publishing his investigations in 1962 while working for Renault), although he was not the first, or only one, to "invent" these type of curves. One might be tempted to say that the mathematician Paul de Casteljau was first, as he began investigating the nature of these curves in 1959 while working at Citroën, and came up with a really elegant way of figuring out how to draw them. However, de Casteljau did not publish his work, making the question "who was first" hard to answer in any absolute sense. Or is it? Bézier curves are, at their core, "Bernstein polynomials", a family of mathematical functions investigated by Sergei Natanovich Bernstein , whose publications on them date back at least as far as 1912.

Curves, however, are a much bigger problem. While we can draw curves with ridiculous ease freehand, computers are a bit handicapped in that they can't draw curves unless there is a mathematical function that describes how it should be drawn. In fact, they even need this for straight lines, but the function is ridiculously easy, so we tend to ignore that as far as computers are concerned; all lines are "functions", regardless of whether they're straight or curves. However, that does mean that we need to come up with fast-to-compute functions that lead to nice looking curves on a computer. There are a number of these, and in this article we'll focus on a particular function that has received quite a bit of attention and is used in pretty much anything that can draw curves: Bézier curves.

In order to draw things in 2D, we usually rely on lines, which typically get classified into two categories: straight lines, and curves. The first of these are as easy to draw as they are easy to make a computer draw. Give a computer the first and last point in the line, and BAM! straight line. No questions asked.

First commit for the bezierinfo site, based on the pre-Primer webpage that covered the basics of Bezier curves in HTML with Processing.js examples.

Removed the need for client-side LaTeX parsing entirely, so the site doesn't take a full minute or more to load all the graphics.

Completely overhauled the site: the Primer is now a normal web page that works fine with JS disabled, but obviously better with JS turned on.

This primer is a living document, and so depending on when you last look at it, there may be new content. Click the following link to expand this section to have a look at what got added, when, or click through to the News posts for more detailed updates. ( RSS feed available)

next A lightning introduction Let's start with the good stuff: when we're talking about Bézier curves, we're talking about the things that you can see in the following graphics. They run from some start point to some end point, with their curvature influenced by one or more "intermediate" control points. Now, because all the graphics on this page are interactive, go manipulate those curves a bit: click-drag the points, and see how their shape changes based on what you do. Scripts are disabled. Showing fallback image. A quadratic Bézier curve Scripts are disabled. Showing fallback image. A cubic Bézier curve These curves are used a lot in computer aided design and computer aided manufacturing (CAD/CAM) applications, as well as in graphic design programs like Adobe Illustrator and Photoshop, Inkscape, GIMP, etc. and in graphic technologies like scalable vector graphics (SVG) and OpenType fonts (TTF/OTF). A lot of things use Bézier curves, so if you want to learn more about them... prepare to get your learn on!

previousnext So what makes a Bézier Curve? Playing with the points for curves may have given you a feel for how Bézier curves behave, but what are Bézier curves, really? There are two ways to explain what a Bézier curve is, and they turn out to be the entirely equivalent, but one of them uses complicated maths, and the other uses really simple maths. So... let's start with the simple explanation: Bézier curves are the result of linear interpolations. That sounds complicated but you've been doing linear interpolation since you were very young: any time you had to point at something between two other things, you've been applying linear interpolation. It's simply "picking a point between two points". If we know the distance between those two points, and we want a new point that is, say, 20% the distance away from the first point (and thus 80% the distance away from the second point) then we can compute that really easily: So let's look at that in action: the following graphic is interactive in that you can use your up and down arrow keys to increase or decrease the interpolation ratio, to see what happens. We start with three points, which gives us two lines. Linear interpolation over those lines gives us two points, between which we can again perform linear interpolation, yielding a single point. And that point —and all points we can form in this way for all ratios taken together— form our Bézier curve: Scripts are disabled. Showing fallback image. And that brings us to the complicated maths: calculus. While it doesn't look like that's what we've just done, we actually just drew a quadratic curve, in steps, rather than in a single go. One of the fascinating parts about Bézier curves is that they can both be described in terms of polynomial functions, as well as in terms of very simple interpolations of interpolations of [...]. That, in turn, means we can look at what these curves can do based on both "real maths" (by examining the functions, their derivatives, and all that stuff), as well as by looking at the "mechanical" composition (which tells us, for instance, that a curve will never extend beyond the points we used to construct it). So let's start looking at Bézier curves a bit more in depth: their mathematical expressions, the properties we can derive from them, and the various things we can do to, and with, Bézier curves.

previousnext The mathematics of Bézier curves Bézier curves are a form of "parametric" function. Mathematically speaking, parametric functions are cheats: a "function" is actually a well defined term representing a mapping from any number of inputs to a single output. Numbers go in, a single number comes out. Change the numbers that go in, and the number that comes out is still a single number. Parametric functions cheat. They basically say "alright, well, we want multiple values coming out, so we'll just use more than one function". An illustration: Let's say we have a function that maps some value, let's call it x, to some other value, using some kind of number manipulation: The notation f(x) is the standard way to show that it's a function (by convention called f if we're only listing one) and its output changes based on one variable (in this case, x). Change x, and the output for f(x) changes. So far, so good. Now, let's look at parametric functions, and how they cheat. Let's take the following two functions: There's nothing really remarkable about them, they're just a sine and cosine function, but you'll notice the inputs have different names. If we change the value for a, we're not going to change the output value for f(b), since a isn't used in that function. Parametric functions cheat by changing that. In a parametric function all the different functions share a variable, like this: Multiple functions, but only one variable. If we change the value for t, we change the outcome of both f a (t) and f b (t). You might wonder how that's useful, and the answer is actually pretty simple: if we change the labels f a (t) and f b (t) with what we usually mean with them for parametric curves, things might be a lot more obvious: There we go. x/y coordinates, linked through some mystery value t. So, parametric curves don't define a y coordinate in terms of an x coordinate, like normal functions do, but they instead link the values to a "control" variable. If we vary the value of t, then with every change we get two values, which we can use as (x,y) coordinates in a graph. The above set of functions, for instance, generates points on a circle: We can range t from negative to positive infinity, and the resulting (x,y) coordinates will always lie on a circle with radius 1 around the origin (0,0). If we plot it for t from 0 to 5, we get this: Scripts are disabled. Showing fallback image. A (partial) circle: x=sin(t), y=cos(t) Bézier curves are just one out of the many classes of parametric functions, and are characterised by using the same base function for all of the output values. In the example we saw above, the x and y values were generated by different functions (one uses a sine, the other a cosine); but Bézier curves use the "binomial polynomial" for both the x and y outputs. So what are binomial polynomials? You may remember polynomials from high school. They're those sums that look like this: If the highest order term they have is x³, they're called "cubic" polynomials; if it's x², it's a "square" polynomial; if it's just x, it's a line (and if there aren't even any terms with x it's not a polynomial!) Bézier curves are polynomials of t, rather than x, with the value for t being fixed between 0 and 1, with coefficients a, b etc. taking the "binomial" form, which sounds fancy but is actually a pretty simple description for mixing values: I know what you're thinking: that doesn't look too simple! But if we remove t and add in "times one", things suddenly look pretty easy. Check out these binomial terms: Notice that 2 is the same as 1+1, and 3 is 2+1 and 1+2, and 6 is 3+3... As you can see, each time we go up a dimension, we simply start and end with 1, and everything in between is just "the two numbers above it, added together", giving us a simple number sequence known as Pascal's triangle. Now that's easy to remember. There's an equally simple way to figure out how the polynomial terms work: if we rename (1-t) to a and t to b, and remove the weights for a moment, we get this: It's basically just a sum of "every combination of a and b", progressively replacing a's with b's after every + sign. So that's actually pretty simple too. So now you know binomial polynomials, and just for completeness I'm going to show you the generic function for this: And that's the full description for Bézier curves. Σ in this function indicates that this is a series of additions (using the variable listed below the Σ, starting at ...=<value> and ending at the value listed on top of the Σ). How to implement the basis function We could naively implement the basis function as a mathematical construct, using the function as our guide, like this: function Bezier(n,t): sum = 0 for(k=0; k<n; k++): sum += n!/(k!*(n-k)!) * (1-t)^(n-k) * t^(k) return sum I say we could, because we're not going to: the factorial function is incredibly expensive. And, as we can see from the above explanation, we can actually create Pascal's triangle quite easily without it: just start at [1], then [1,1], then [1,2,1], then [1,3,3,1], and so on, with each next row fitting 1 more number than the previous row, starting and ending with "1", with all the numbers in between being the sum of the previous row's elements on either side "above" the one we're computing. We can generate this as a list of lists lightning fast, and then never have to compute the binomial terms because we have a lookup table: lut = [ [1], // n=0 [1,1], // n=1 [1,2,1], // n=2 [1,3,3,1], // n=3 [1,4,6,4,1], // n=4 [1,5,10,10,5,1], // n=5 [1,6,15,20,15,6,1]] // n=6 function binomial(n,k): while(n >= lut.length): s = lut.length nextRow = new array(size=s+1) nextRow[0] = 1 for(i=1, prev=s-1; i<s; i++): nextRow[i] = lut[prev][i-1] + lut[prev][i] nextRow[s] = 1 lut.add(nextRow) return lut[n][k] So what's going on here? First, we declare a lookup table with a size that's reasonably large enough to accommodate most lookups. Then, we declare a function to get us the values we need, and we make sure that if an n/k pair is requested that isn't in the LUT yet, we expand it first. Our basis function now looks like this: function Bezier(n,t): sum = 0 for(k=0; k<=n; k++): sum += binomial(n,k) * (1-t)^(n-k) * t^(k) return sum Perfect. Of course, we can optimize further. For most computer graphics purposes, we don't need arbitrary curves (although we will also provide code for arbitrary curves in this primer); we need quadratic and cubic curves, and that means we can drastically simplify the code: function Bezier(2,t): t2 = t * t mt = 1-t mt2 = mt * mt return mt2 + 2*mt*t + t2 function Bezier(3,t): t2 = t * t t3 = t2 * t mt = 1-t mt2 = mt * mt mt3 = mt2 * mt return mt3 + 3*mt2*t + 3*mt*t2 + t3 And now we know how to program the basis function. Excellent. So, now we know what the basis function looks like, time to add in the magic that makes Bézier curves so special: control points.

previousnext Controlling Bézier curvatures Bézier curves are, like all "splines", interpolation functions. This means that they take a set of points, and generate values somewhere "between" those points. (One of the consequences of this is that you'll never be able to generate a point that lies outside the outline for the control points, commonly called the "hull" for the curve. Useful information!). In fact, we can visualize how each point contributes to the value generated by the function, so we can see which points are important, where, in the curve. The following graphs show the interpolation functions for quadratic and cubic curves, with "S" being the strength of a point's contribution to the total sum of the Bézier function. Click-and-drag to see the interpolation percentages for each curve-defining point at a specific t value. Scripts are disabled. Showing fallback image. Quadratic interpolations Scripts are disabled. Showing fallback image. Cubic interpolations Scripts are disabled. Showing fallback image. 15th degree interpolations Also shown is the interpolation function for a 15th order Bézier function. As you can see, the start and end point contribute considerably more to the curve's shape than any other point in the control point set. If we want to change the curve, we need to change the weights of each point, effectively changing the interpolations. The way to do this is about as straightforward as possible: just multiply each point with a value that changes its strength. These values are conventionally called "weights", and we can add them to our original Bézier function: That looks complicated, but as it so happens, the "weights" are actually just the coordinate values we want our curve to have: for an nth order curve, w 0 is our start coordinate, w n is our last coordinate, and everything in between is a controlling coordinate. Say we want a cubic curve that starts at (110,150), is controlled by (25,190) and (210,250) and ends at (210,30), we use this Bézier curve: Which gives us the curve we saw at the top of the article: Scripts are disabled. Showing fallback image. Our cubic Bézier curve What else can we do with Bézier curves? Quite a lot, actually. The rest of this article covers a multitude of possible operations and algorithms that we can apply, and the tasks they achieve. How to implement the weighted basis function Given that we already know how to implement basis function, adding in the control points is remarkably easy: function Bezier(n,t,w[]): sum = 0 for(k=0; k<=n; k++): sum += w[k] * binomial(n,k) * (1-t)^(n-k) * t^(k) return sum And now for the optimized versions: function Bezier(2,t,w[]): t2 = t * t mt = 1-t mt2 = mt * mt return w[0]*mt2 + w[1]*2*mt*t + w[2]*t2 function Bezier(3,t,w[]): t2 = t * t t3 = t2 * t mt = 1-t mt2 = mt * mt mt3 = mt2 * mt return w[0]*mt3 + 3*w[1]*mt2*t + 3*w[2]*mt*t2 + w[3]*t3 And now we know how to program the weighted basis function.

previousnext Controlling Bézier curvatures, part 2: Rational Béziers We can further control Bézier curves by "rationalising" them: that is, adding a "ratio" value in addition to the weight value discussed in the previous section, thereby gaining control over "how strongly" each coordinate influences the curve. Adding these ratio values to the regular Bézier curve function is fairly easy. Where the regular function is the following: The function for rational Bézier curves has two more terms: In this, the first new term represents an additional weight for each coordinate. For example, if our ratio values are [1, 0.5, 0.5, 1] then ratio 0 = 1 , ratio 1 = 0.5 , and so on, and is effectively identical as if we were just using different weight. So far, nothing too special. However, the second new term is what makes the difference: every point on the curve isn't just a "double weighted" point, it is a fraction of the "doubly weighted" value we compute by introducing that ratio. When computing points on the curve, we compute the "normal" Bézier value and then divide that by the Bézier value for the curve that only uses ratios, not weights. This does something unexpected: it turns our polynomial into something that isn't a polynomial anymore. It is now a kind of curve that is a super class of the polynomials, and can do some really cool things that Bézier curves can't do "on their own", such as perfectly describing circles (which we'll see in a later section is literally impossible using standard Bézier curves). But the best way to show what this does is to do literally that: let's look at the effect of "rationalising" our Bézier curves using an interactive graphic for a rationalised curves. The following graphic shows the Bézier curve from the previous section, "enriched" with ratio factors for each coordinate. The closer to zero we set one or more terms, the less relative influence the associated coordinate exerts on the curve (and of course the higher we set them, the more influence they have). Try to change the values and see how it affects what gets drawn: Scripts are disabled. Showing fallback image. Our rational cubic Bézier curve You can think of the ratio values as each coordinate's "gravity": the higher the gravity, the closer to that coordinate the curve will want to be. You'll also notice that if you simply increase or decrease all the ratios by the same amount, nothing changes... much like with gravity, if the relative strengths stay the same, nothing really changes. The values define each coordinate's influence relative to all other points. How to implement rational curves Extending the code of the previous section to include ratios is almost trivial: function RationalBezier(2,t,w[],r[]): t2 = t * t mt = 1-t mt2 = mt * mt f = [ r[0] * mt2, 2 * r[1] * mt * t, r[2] * t2 ] basis = f[0] + f[1] + f[2] return (f[0] * w[0] + f[1] * w[1] + f[2] * w[2])/basis function RationalBezier(3,t,w[],r[]): t2 = t * t t3 = t2 * t mt = 1-t mt2 = mt * mt mt3 = mt2 * mt f = [ r[0] * mt3, 3 * r[1] * mt2 * t, 3 * r[2] * mt * t2, r[3] * t3 ] basis = f[0] + f[1] + f[2] + f[3] return (f[0] * w[0] + f[1] * w[1] + f[2] * w[2] + f[3] * w[3])/basis And that's all we have to do.

previousnext The Bézier interval [0,1] Now that we know the mathematics behind Bézier curves, there's one curious thing that you may have noticed: they always run from t=0 to t=1 . Why that particular interval? It all has to do with how we run from "the start" of our curve to "the end" of our curve. If we have a value that is a mixture of two other values, then the general formula for this is: The obvious start and end values here need to be a=1, b=0 , so that the mixed value is 100% value 1, and 0% value 2, and a=0, b=1 , so that the mixed value is 0% value 1 and 100% value 2. Additionally, we don't want "a" and "b" to be independent: if they are, then we could just pick whatever values we like, and end up with a mixed value that is, for example, 100% value 1 and 100% value 2. In principle that's fine, but for Bézier curves we always want mixed values between the start and end point, so we need to make sure we can never set "a" and "b" to some values that lead to a mix value that sums to more than 100%. And that's easy: With this we can guarantee that we never sum above 100%. By restricting a to values in the interval [0,1], we will always be somewhere between our two values (inclusively), and we will always sum to a 100% mix. But... what if we use this form, which is based on the assumption that we will only ever use values between 0 and 1, and instead use values outside of that interval? Do things go horribly wrong? Well... not really, but we get to "see more". In the case of Bézier curves, extending the interval simply makes our curve "keep going". Bézier curves are simply segments of some polynomial curve, so if we pick a wider interval we simply get to see more of the curve. So what do they look like? The following two graphics show you Bézier curves rendered "the usual way", as well as the curves they "lie on" if we were to extend the t values much further. As you can see, there's a lot more "shape" hidden in the rest of the curve, and we can model those parts by moving the curve points around. Scripts are disabled. Showing fallback image. Quadratic infinite interval Bézier curve Scripts are disabled. Showing fallback image. Cubic infinite interval Bézier curve In fact, there are curves used in graphics design and computer modelling that do the opposite of Bézier curves; rather than fixing the interval, and giving you freedom to choose the coordinates, they fix the coordinates, but give you freedom over the interval. A great example of this is the "Spiro" curve, which is a curve based on part of a Cornu Spiral, also known as Euler's Spiral. It's a very aesthetically pleasing curve and you'll find it in quite a few graphics packages like FontForge and Inkscape. It has even been used in font design, for example for the Inconsolata typeface.

previousnext Bézier curvatures as matrix operations We can also represent Bézier curves as matrix operations, by expressing the Bézier formula as a polynomial basis function and a coefficients matrix, and the actual coordinates as a matrix. Let's look at what this means for the cubic curve, using P ... to refer to coordinate values "in one or more dimensions": Disregarding our actual coordinates for a moment, we have: We can write this as a sum of four expressions: And we can expand these expressions: Furthermore, we can make all the 1 and 0 factors explicit: And that, we can view as a series of four matrix operations: If we compact this into a single matrix operation, we get: This kind of polynomial basis representation is generally written with the bases in increasing order, which means we need to flip our t matrix horizontally, and our big "mixing" matrix upside down: And then finally, we can add in our original coordinates as a single third matrix: We can perform the same trick for the quadratic curve, in which case we end up with: If we plug in a t value, and then multiply the matrices, we will get exactly the same values as when we evaluate the original polynomial function, or as when we evaluate the curve using progressive linear interpolation. So: why would we bother with matrices? Matrix representations allow us to discover things about functions that would otherwise be hard to tell. It turns out that the curves form triangular matrices, and they have a determinant equal to the product of the actual coordinates we use for our curve. It's also invertible, which means there's a ton of properties that are all satisfied. Of course, the main question is "why is this useful to us now?", and the answer to that is that it's not immediately useful, but you'll be seeing some instances where certain curve properties can be either computed via function manipulation, or via clever use of matrices, and sometimes the matrix approach can be (drastically) faster. So for now, just remember that we can represent curves this way, and let's move on.

previousnext de Casteljau's algorithm If we want to draw Bézier curves, we can run through all values of t from 0 to 1 and then compute the weighted basis function at each value, getting the x/y values we need to plot. Unfortunately, the more complex the curve gets, the more expensive this computation becomes. Instead, we can use de Casteljau's algorithm to draw curves. This is a geometric approach to curve drawing, and it's really easy to implement. So easy, in fact, you can do it by hand with a pencil and ruler. Rather than using our calculus function to find x/y values for t , let's do this instead: treat t as a ratio (which it is). t=0 is 0% along a line, t=1 is 100% along a line.

as a ratio (which it is). t=0 is 0% along a line, t=1 is 100% along a line. Take all lines between the curve's defining points. For an order n curve, that's n lines.

curve, that's lines. Place markers along each of these line, at distance t . So if t is 0.2, place the mark at 20% from the start, 80% from the end.

. So if is 0.2, place the mark at 20% from the start, 80% from the end. Now form lines between those points. This gives n-1 lines.

points. This gives lines. Place markers along each of these line at distance t .

. Form lines between those points. This'll be n-2 lines.

points. This'll be lines. Place markers, form lines, place markers, etc.

Repeat this until you have only one line left. The point t on that line coincides with the original curve point at t . To see this in action, mouse-over the following sketch. Moving the mouse changes which curve point is explicitly evaluated using de Casteljau's algorithm, moving the cursor left-to-right (or, of course, right-to-left), shows you how a curve is generated using this approach. Scripts are disabled. Showing fallback image. Traversing a curve using de Casteljau's algorithm How to implement de Casteljau's algorithm Let's just use the algorithm we just specified, and implement that: function drawCurve(points[], t): if(points.length==1): draw(points[0]) else: newpoints=array(points.size-1) for(i=0; i<newpoints.length; i++): newpoints[i] = (1-t) * points[i] + t * points[i+1] drawCurve(newpoints, t) And done, that's the algorithm implemented. Except usually you don't get the luxury of overloading the "+" operator, so let's also give the code for when you need to work with x and y values: function drawCurve(points[], t): if(points.length==1): draw(points[0]) else: newpoints=array(points.size-1) for(i=0; i<newpoints.length; i++): x = (1-t) * points[i].x + t * points[i+1].x y = (1-t) * points[i].y + t * points[i+1].y newpoints[i] = new point(x,y) drawCurve(newpoints, t) So what does this do? This draws a point, if the passed list of points is only 1 point long. Otherwise it will create a new list of points that sit at the t ratios (i.e. the "markers" outlined in the above algorithm), and then call the draw function for this new list.

previousnext Simplified drawing We can also simplify the drawing process by "sampling" the curve at certain points, and then joining those points up with straight lines, a process known as "flattening", as we are reducing a curve to a simple sequence of straight, "flat" lines. We can do this is by saying "we want X segments", and then sampling the curve at intervals that are spaced such that we end up with the number of segments we wanted. The advantage of this method is that it's fast: instead of evaluating 100 or even 1000 curve coordinates, we can sample a much lower number and still end up with a curve that sort-of-kind-of looks good enough. The disadvantage of course is that we lose the precision of working with "the real curve", so we usually can't use the flattened for doing true intersection detection, or curvature alignment. Scripts are disabled. Showing fallback image. Flattening a quadratic curve Scripts are disabled. Showing fallback image. Flattening a cubic curve Try clicking on the sketch and using your up and down arrow keys to lower the number of segments for both the quadratic and cubic curve. You'll notice that for certain curvatures, a low number of segments works quite well, but for more complex curvatures (try this for the cubic curve), a higher number is required to capture the curvature changes properly. How to implement curve flattening Let's just use the algorithm we just specified, and implement that: function flattenCurve(curve, segmentCount): step = 1/segmentCount; coordinates = [curve.getXValue(0), curve.getYValue(0)] for(i=1; i <= segmentCount; i++): t = i*step; coordinates.push[curve.getXValue(t), curve.getYValue(t)] return coordinates; And done, that's the algorithm implemented. That just leaves drawing the resulting "curve" as a sequence of lines: function drawFlattenedCurve(curve, segmentCount): coordinates = flattenCurve(curve, segmentCount) coord = coordinates[0], _coord; for(i=1; i < coordinates.length; i++): _coord = coordinates[i] line(coord, _coord) coord = _coord We start with the first coordinate as reference point, and then just draw lines between each point and its next point.

previousnext Splitting curves Using de Casteljau's algorithm, we can also find all the points we need to split up a Bézier curve into two, smaller curves, which taken together form the original curve. When we construct de Casteljau's skeleton for some value t , the procedure gives us all the points we need to split a curve at that t value: one curve is defined by all the inside skeleton points found prior to our on-curve point, with the other curve being defined by all the inside skeleton points after our on-curve point. Scripts are disabled. Showing fallback image. implementing curve splitting We can implement curve splitting by bolting some extra logging onto the de Casteljau function: left=[] right=[] function drawCurve(points[], t): if(points.length==1): left.add(points[0]) right.add(points[0]) draw(points[0]) else: newpoints=array(points.size-1) for(i=0; i<newpoints.length; i++): if(i==0): left.add(points[i]) if(i==newpoints.length-1): right.add(points[i+1]) newpoints[i] = (1-t) * points[i] + t * points[i+1] drawCurve(newpoints, t) After running this function for some value t , the left and right arrays will contain all the coordinates for two new curves - one to the "left" of our t value, the other on the "right". These new curves will have the same order as the original curve, and can be overlaid exactly on the original curve.

previousnext Splitting curves using matrices Another way to split curves is to exploit the matrix representation of a Bézier curve. In the section on matrices, we saw that we can represent curves as matrix multiplications. Specifically, we saw these two forms for the quadratic and cubic curves respectively: (we'll reverse the Bézier coefficients vector for legibility) and Let's say we want to split the curve at some point t = z , forming two new (obviously smaller) Bézier curves. To find the coordinates for these two Bézier curves, we can use the matrix representation and some linear algebra. First, we separate out the actual "point on the curve" information into a new matrix multiplication: and If we could compact these matrices back to the form [t values] · [Bézier matrix] · [column matrix], with the first two staying the same, then that column matrix on the right would be the coordinates of a new Bézier curve that describes the first segment, from t = 0 to t = z . As it turns out, we can do this quite easily, by exploiting some simple rules of linear algebra (and if you don't care about the derivations, just skip to the end of the box for the results!). Deriving new hull coordinates Deriving the two segments upon splitting a curve takes a few steps, and the higher the curve order, the more work it is, so let's look at the quadratic curve first: We can do this because [M · M-1] is the identity matrix. It's a bit like multiplying something by x/x in calculus: it doesn't do anything to the function, but it does allow you to rewrite it to something that may be easier to work with, or can be broken up differently. In the same way, multiplying our matrix by [M · M-1] has no effect on the total formula, but it does allow us to change the matrix sequence [something · M] to a sequence [M · something], and that makes a world of difference: if we know what [M-1 · Z · M] is, we can apply that to our coordinates, and be left with a proper matrix representation of a quadratic Bézier curve (which is [T · M · P]), with a new set of coordinates that represent the curve from t = 0 to t = z. So let's get computing: Excellent! Now we can form our new quadratic curve: Brilliant: if we want a subcurve from t = 0 to t = z , we can keep the first coordinate the same (which makes sense), our control point becomes a z-ratio mixture of the original control point and the start point, and the new end point is a mixture that looks oddly similar to a Bernstein polynomial of degree two. These new coordinates are actually really easy to compute directly! Of course, that's only one of the two curves. Getting the section from t = z to t = 1 requires doing this again. We first observe that in the previous calculation, we actually evaluated the general interval [0, z ]. We were able to write it down in a more simple form because of the zero, but what we actually evaluated, making the zero explicit, was: If we want the interval [z,1], we will be evaluating this instead: We're going to do the same trick of multiplying by the identity matrix, to turn [something · M] into [M · something] : So, our final second curve looks like: Nice. We see the same thing as before: we can keep the last coordinate the same (which makes sense); our control point becomes a z-ratio mixture of the original control point and the end point, and the new start point is a mixture that looks oddly similar to a bernstein polynomial of degree two, except this time it uses (z-1) rather than (1-z). These new coordinates are also really easy to compute directly! So, using linear algebra rather than de Casteljau's algorithm, we have determined that, for any quadratic curve split at some value t = z , we get two subcurves that are described as Bézier curves with simple-to-derive coordinates: and We can do the same for cubic curves. However, I'll spare you the actual derivation (don't let that stop you from writing that out yourself, though) and simply show you the resulting new coordinate sets: and So, looking at our matrices, did we really need to compute the second segment matrix? No, we didn't. Actually having one segment's matrix means we implicitly have the other: push the values of each row in the matrix Q to the right, with zeroes getting pushed off the right edge and appearing back on the left, and then flip the matrix vertically. Presto, you just "calculated" Q'. Implementing curve splitting this way requires less recursion, and is just straight arithmetic with cached values, so can be cheaper on systems where recursion is expensive. If you're doing computation with devices that are good at matrix multiplication, chopping up a Bézier curve with this method will be a lot faster than applying de Casteljau.

previousnext Lowering and elevating curve order One interesting property of Bézier curves is that an nth order curve can always be perfectly represented by an (n+1)th order curve, by giving the higher-order curve specific control points. If we have a curve with three points, then we can create a curve with four points that exactly reproduces the original curve. First, we give it the same start and end points, and for its two control points we pick "1/3rd start + 2/3rd control" and "2/3rd control + 1/3rd end". Now we have exactly the same curve as before, except represented as a cubic curve rather than a quadratic curve. The general rule for raising an nth order curve to an (n+1)th order curve is as follows (observing that the start and end weights are the same as the start and end weights for the old curve): However, this rule also has as direct consequence that you cannot generally safely lower a curve from nth order to (n-1)th order, because the control points cannot be "pulled apart" cleanly. We can try to, but the resulting curve will not be identical to the original, and may in fact look completely different. However, there is a surprisingly good way to ensure that a lower order curve looks "as close as reasonably possible" to the original curve: we can optimise the "least-squares distance" between the original curve and the lower order curve, in a single operation (also explained over on Sirver's Castle). However, to use it, we'll need to do some calculus work and then switch over to linear algebra. As mentioned in the section on matrix representations, some things can be done much more easily with matrices than with calculus functions, and this is one of those things. So... let's go! We start by taking the standard Bézier function, and condensing it a little: Then, we apply one of those silly (actually, super useful) calculus tricks: since our t value is always between zero and one (inclusive), we know that (1-t) plus t always sums to 1. As such, we can express any value as a sum of t and 1-t : So, with that seemingly trivial observation, we rewrite that Bézier function by splitting it up into a sum of a (1-t) and t component: So far so good. Now, to see why we did this, let's write out the (1-t) and t parts, and see what that gives us. I promise, it's about to make sense. We start with (1-t) : So by using this seemingly silly trick, we can suddenly express part of our nth order Bézier function in terms of an (n+1)th order Bézier function. And that sounds a lot like raising the curve order! Of course we need to be able to repeat that trick for the t part, but that's not a problem: So, with both of those changed from an order n expression to an order (n+1) expression, we can put them back together again. Now, where the order n function had a summation from 0 to n , the order n+1 function uses a summation from 0 to n+1 , but this shouldn't be a problem as long as we can add some new terms that "contribute nothing". In the next section on derivatives, there is a discussion about why "higher terms than there is a binomial for" and "lower than zero terms" both "contribute nothing". So as long as we can add terms that have the same form as the terms we need, we can just include them in the summation, they'll sit there and do nothing, and the resulting function stays identical to the lower order curve. Let's do this: And this is where we switch over from calculus to linear algebra, and matrices: we can now express this relation between Bézier(n,t) and Bézier(n+1,t) as a very simple matrix multiplication: where the matrix M is an n+1 by n matrix, and looks like: That might look unwieldy, but it's really just a mostly-zeroes matrix, with a very simply fraction on the diagonal, and an even simpler fraction to the left of it. Multiplying a list of coordinates with this matrix means we can plug the resulting transformed coordinates into the one-order-higher function and get an identical looking curve. Not too bad! Equally interesting, though, is that with this matrix operation established, we can now use an incredibly powerful and ridiculously simple way to find out a "best fit" way to reverse the operation, called the normal equation. What it does is minimize the sum of the square differences between one set of values and another set of values. Specifically, if we can express that as some function A x = b, we can use it. And as it so happens, that's exactly what we're dealing with, so: The steps taken here are: We have a function in a form that the normal equation can be used with, so apply the normal equation! Then, we want to end up with just B n on the left, so we start by left-multiply both sides such that we'll end up with lots of stuff on the left that simplified to "a factor 1", which in matrix maths is the identity matrix. In fact, by left-multiplying with the inverse of what was already there, we've effectively "nullified" (but really, one-inified) that big, unwieldy block into the identity matrix I. So we substitute the mess with I, and then because multiplication with the identity matrix does nothing (like multiplying by 1 does nothing in regular algebra), we just drop it. And we're done: we now have an expression that lets us approximate an n+1 th order curve with a lower n th order curve. It won't be an exact fit, but it's definitely a best approximation. So, let's implement these rules for raising and lowering curve order to a (semi) random curve, using the following graphic. Select the sketch, which has movable control points, and press your up and down arrow keys to raise or lower the curve order. Scripts are disabled. Showing fallback image. A variable-order Bézier curve raise lower

previousnext Derivatives There's a number of useful things that you can do with Bézier curves based on their derivative, and one of the more amusing observations about Bézier curves is that their derivatives are, in fact, also Bézier curves. In fact, the differentiation of a Bézier curve is relatively straightforward, although we do need a bit of math. First, let's look at the derivative rule for Bézier curves, which is: which we can also write (observing that b in this formula is the same as our w weights, and that n times a summation is the same as a summation where each term is multiplied by n) as: Or, in plain text: the derivative of an nth degree Bézier curve is an (n-1)th degree Bézier curve, with one fewer term, and new weights w' 0 ...w' n-1 derived from the original weights as n(w i+1 - w i ). So for a 3rd degree curve, with four weights, the derivative has three new weights: w' 0 = 3(w 1 -w 0 ), w' 1 = 3(w 2 -w 1 ) and w' 2 = 3(w 3 -w 2 ). "Slow down, why is that true?" Sometimes just being told "this is the derivative" is nice, but you might want to see why this is indeed the case. As such, let's have a look at the proof for this derivative. First off, the weights are independent of the full Bézier function, so the derivative involves only the derivative of the polynomial basis function. So, let's find that: Applying the product and chain rules gives us: Which is hard to work with, so let's expand that properly: Now, the trick is to turn this expression into something that has binomial coefficients again, so we want to end up with things that look like "x! over y!(x-y)!". If we can do that in a way that involves terms of n-1 and k-1, we'll be on the right track. And that's the first part done: the two components inside the parentheses are actually regular, lower-order Bézier expressions: Now to apply this to our weighted Bézier curves. We'll write out the plain curve formula that we saw earlier, and then work our way through to its derivative: If we expand this (with some color to show how terms line up), and reorder the terms by increasing values for k we see the following: Two of these terms fall way: the first term falls away because there is no -1st term in a summation. As such, it always contributes "nothing", so we can safely completely ignore it for the purpose of finding the derivative function. The other term is the very last term in this expansion: one involving B n-1,n . This term would have a binomial coefficient of [i choose i+1], which is a non-existent binomial coefficient. Again, this term would contribute "nothing", so we can ignore it, too. This means we're left with: And that's just a summation of lower order curves: We can rewrite this as a normal summation, and we're done: Let's rewrite that in a form similar to our original formula, so we can see the difference. We will first list our original formula for Bézier curves, and then the derivative: What are the differences? In terms of the actual Bézier curve, virtually nothing! We lowered the order (rather than n, it's now n-1), but it's still the same Bézier function. The only real difference is in how the weights change when we derive the curve's function. If we have four points A, B, C, and D, then the derivative will have three points, the second derivative two, and the third derivative one: We can keep performing this trick for as long as we have more than one weight. Once we have one weight left, the next step will see k = 0, and the result of our "Bézier function" summation is zero, because we're not adding anything at all. As such, a quadratic curve has no second derivative, a cubic curve has no third derivative, and generalized: an nth order curve has n-1 (meaningful) derivatives, with any further derivative being zero.

previousnext Tangents and normals If you want to move objects along a curve, or "away from" a curve, the two vectors you're most interested in are the tangent vector and normal vector for curve points. These are actually really easy to find. For moving and orienting along a curve, we use the tangent, which indicates the direction of travel at specific points, and is literally just the first derivative of our curve: This gives us the directional vector we want. We can normalize it to give us uniform directional vectors (having a length of 1.0) at each point, and then do whatever it is we want to do based on those directions: The tangent is very useful for moving along a line, but what if we want to move away from the curve instead, perpendicular to the curve at some point t? In that case we want the normal vector. This vector runs at a right angle to the direction of the curve, and is typically of length 1.0, so all we have to do is rotate the normalized directional vector and we're done: Rotating coordinates is actually very easy, if you know the rule for it. You might find it explained as "applying a rotation matrix, which is what we'll look at here, too. Essentially, the idea is to take the circles over which we can rotate, and simply "sliding the coordinates" over these circles by the desired angle. If we want a quarter circle turn, we take the coordinate, slide it along the cirle by a quarter turn, and done. To turn any point (x,y) into a rotated point (x',y') (over 0,0) by some angle φ, we apply this nice and easy computation: Which is the "long" version of the following matrix transformation: And that's all we need to rotate any coordinate. Note that for quarter, half, and three-quarter turns these functions become even easier, since sin and cos for these angles are, respectively: 0 and 1, -1 and 0, and 0 and -1. But why does this work? Why this matrix multiplication? Wikipedia (technically, Thomas Herter and Klaus Lott) tells us that a rotation matrix can be treated as a sequence of three (elementary) shear operations. When we combine this into a single matrix operation (because all matrix multiplications can be collapsed), we get the matrix that you see above. DataGenetics have an excellent article about this very thing: it's really quite cool, and I strongly recommend taking a quick break from this primer to read that article. The following two graphics show the tangent and normal along a quadratic and cubic curve, with the direction vector coloured blue, and the normal vector coloured red (the markers are spaced out evenly as t-intervals, not spaced equidistant). Scripts are disabled. Showing fallback image. Quadratic Bézier tangents and normals Scripts are disabled. Showing fallback image. Cubic Bézier tangents and normals

previousnext Working with 3D normals Before we move on to the next section we need to spend a little bit of time on the difference between 2D and 3D. While for many things this difference is irrelevant and the procedures are identical (for instance, getting the 3D tangent is just doing what we do for 2D, but for x, y, and z, instead of just for x and y), when it comes to normals things are a little more complex, and thus more work. Mind you, it's not "super hard", but there are more steps involved and we should have a look at those. Getting normals in 3D is in principle the same as in 2D: we take the normalised tangent vector, and then rotate it by a quarter turn. However, this is where things get that little more complex: we can turn in quite a few directions, since "the normal" in 3D is a plane, not a single vector, so we basically need to define what "the" normal is in the 3D case. The "naïve" approach is to construct what is known as the Frenet normal, where we follow a simple recipe that works in many cases (but does super bizarre things in some others). The idea is that even though there are infinitely many vectors that are perpendicular to the tangent (i.e. make a 90 degree angle with it), the tangent itself sort of lies on its own plane already: since each point on the curve (no matter how closely spaced) has its own tangent vector, we can say that each point lies in the same plane as the local tangent, as well as the tangents "right next to it". Even if that difference in tangent vectors is minute, "any difference" is all we need to find out what that plane is - or rather, what the vector perpendicular to that plane is. Which is what we need: if we can calculate that vector, and we have the tangent vector that we know lies on a plane, then we can rotate the tangent vector over the perpendicular, and presto. We have computed the normal using the same logic we used for the 2D case: "just rotate it 90 degrees". So let's do that! And in a twist surprise, we can do this in four lines: a = normalize(B'(t))

= normalize(B'(t)) b = normalize( a + B''(t))

= normalize( + B''(t)) r = normalize( b × a )

= normalize( × ) normal = normalize(r × a) Let's unpack that a little: We start by taking the normalized vector for the derivative at some point on the curve. We normalize it so the maths is less work. Less work is good.

Then, we compute b which represents what a next point's tangent would be if the curve stopped changing at our point and just had the same derivative and second derivative from that point on.

which represents what a next point's tangent would be if the curve stopped changing at our point and just had the same derivative and second derivative from that point on. This lets us find two vectors (the derivative, and the second derivative added to the derivative) that lie on the same plane, which means we can use them to compute a vector perpendicular to that plane, using an elementary vector operation called the cross product. (Note that while that operation uses the × operator, it's most definitely not a multiplication!) The result of that gives us a vector that we can use as the "axis of rotation" for turning the tangent a quarter circle to get our normal, just like we did in the 2D case.

Since the cross product lets us find a vector that is perpendicular to some plane defined by two other vectors, and since the normal vector should be perpendicular to the plane that the tangent and the axis of rotation lie in, we can use the cross product a second time, and immediately get our normal vector. And then we're done, we found "the" normal vector for a 3D curve. Let's see what that looks like for a sample curve, shall we? You can move your cursor across the graphic from left to right, to show the normal at a point with a t value that is based on your cursor position: all the way on the left is 0, all the way on the right = 1, midway is t=0.5, etc: Scripts are disabled. Showing fallback image. However, if you've played with that graphic a bit, you might have noticed something odd. The normal seems to "suddenly twist around the curve" between t=0.65 and t=0.75... Why is it doing that? As it turns out, it's doing that because that's how the maths works, and that's the problem with Frenet normals: while they are "mathematically correct", they are "practically problematic", and so for any kind of graphics work what we really want is a way to compute normals that just... look good. Thankfully, Frenet normals are not our only option. Another option is to take a slightly more algorithmic approach and compute a form of Rotation Minimising Frame (also known as "parallel transport frame" or "Bishop frame") instead, where a "frame" is a set made up of the tangent, the rotational axis, and the normal vector, centered on an on-curve point. These type of frames are computed based on "the previous frame", so we cannot simply compute these "on demand" for single points, as we could for Frenet frames; we have to compute them for the entire curve. Thankfully, the procedure is pretty simple, and can be performed at the same time that you're building lookup tables for your curve. The idea is to take a starting "tangent/rotation axis/normal" frame at t=0, and then compute what the next frame "should" look like by applying some rules that yield a good looking next frame. In the case of the RMF paper linked above, those rules are: Take a point on the curve for which we know the RM frame already,

take a next point on the curve for which we don't know the RM frame yet, and

reflect the known frame onto the next point, by treating the plane through the curve at the point exactly between the next and previous points as a "mirror".

This gives the next point a tangent vector that's essentially pointing in the opposite direction of what it should be, and a normal that's slightly off-kilter, so:

reflect the vectors of our "mirrored frame" a second time, but this time using the plane through the "next point" itself as "mirror".

Done: the tangent and normal have been fixed, and we have a good looking frame to work with. So, let's write some code for that! Implementing Rotation Minimising Frames We first assume we have a function for calculating the Frenet frame at a point, which we already discussed above, inn a way that it yields a frame with properties: { o: origin of all vectors, i.e. the on-curve point, t: tangent vector, r: rotational axis vector, n: normal vector } Then, we can write a function that generates a sequence of RM frames in the following manner: generateRMFrames(steps) -> frames: step = 1.0/steps // Start off with the standard tangent/axis/normal frame // associated with the curve at t=0: frames.add(getFrenetFrame(0)) // start constructing RM frames: for t0 = 0, t0 < 1.0, t0 += step: // start with the previous, known frame x0 = frames.last // get the next frame: we're going to keep its position and tangent, // but we're going to recompute the axis and normal. t1 = t0 + step x1 = { o: getPoint(t1), t: getDerivative(t) } // First we reflect x0's tangent and axis of rotation onto x1, // through/ the plane of reflection at the point between x0 x1 v1 = x1.o - x0.o c1 = v1 · v1 riL = x0.r - v1 * 2/c1 * v1 · x0.r tiL = x0.t - v1 * 2/c1 * v1 · x0.t // note that v1 is a vector, but 2/c1 and (v1 · ...) are just // plain numbers, so we're just scaling v1 by some constant. // Then we reflect a second time, over a plane at x1, so that // the frame tangent is aligned with the curve tangent again: v2 = x1.t - tiL c2 = v2 · v2 // and we're done here: x1.r = riL - v2 * 2/c2 * v2 · riL x1.n = x1.r × x1.t frames.add(x1) Ignoring comments, this is certainly more code than when we were just computing a single Frenet frame, but it's not a crazy amount more code to get much better looking normals. Speaking of better looking, what does this actually look like? Let's revisit that earlier curve, but this time use rotation minimising frames rather than Frenet frames: Scripts are disabled. Showing fallback image. That looks so much better! For those reading along with the code: we don't even strictly speaking need a Frenet frame to start with: we could, for instance, treat the z-axis as our initial axis of rotation, so that our initial normal is (0,0,1) × tangent, and then take things from there, but having that initial "mathematically correct" frame so that the initial normal seems to line up based on the curve's orientation in 3D space is just nice.

previousnext Component functions One of the first things people run into when they start using Bézier curves in their own programs is "I know how to draw the curve, but how do I determine the bounding box?". It's actually reasonably straightforward to do so, but it requires having some knowledge on exploiting math to get the values we need. For bounding boxes, we aren't actually interested in the curve itself, but only in its "extremities": the minimum and maximum values the curve has for its x- and y-axis values. If you remember your calculus (provided you ever took calculus, otherwise it's going to be hard to remember) we can determine function extremities using the first derivative of that function, but this poses a problem, since our function is parametric: every axis has its own function. The solution: compute the derivative for each axis separately, and then fit them back together in the same way we do for the original. Let's look at how a parametric Bézier curve "splits up" into two normal functions, one for the x-axis and one for the y-axis. Note the leftmost figure is again an interactive curve, without labeled axes (you get coordinates in the graph instead). The center and rightmost figures are the component functions for computing the x-axis value, given a value for t (between 0 and 1 inclusive), and the y-axis value, respectively. If you move points in a curve sideways, you should only see the middle graph change; likewise, moving points vertically should only show a change in the right graph. Scripts are disabled. Showing fallback image. Scripts are disabled. Showing fallback image.

previousnext Finding extremities: root finding Now that we understand (well, superficially anyway) the component functions, we can find the extremities of our Bézier curve by finding maxima and minima on the component functions, by solving the equation B'(t) = 0. We've already seen that the derivative of a Bézier curve is a simpler Bézier curve, but how do we solve the equality? Fairly easily, actually, until our derivatives are 4th order or higher... then things get really hard. But let's start simple: Quadratic curves: linear derivatives. The derivative of a quadratic Bézier curve is a linear Bézier curve, interpolating between just two terms, which means finding the solution for "where is this line 0" is effectively trivial by rewriting it to a function of t and solving. First we turn our cubic Bézier function into a quadratic one, by following the rule mentioned at the end of the derivatives section: And then we turn this into our solution for t using basic arithmetics: Done. Although with the caveat that if b-a is zero, there is no solution and we probably shouldn't try to perform that division. Cubic curves: the quadratic formula. The derivative of a cubic Bézier curve is a quadratic Bézier curve, and finding the roots for a quadratic polynomial means we can apply the Quadratic formula. If you've seen it before, you'll remember it, and if you haven't, it looks like this: So, if we can rewrite the Bézier component function as a plain polynomial, we're done: we just plug in the values into the quadratic formula, check if that square root is negative or not (if it is, there are no roots) and then just compute the two values that come out (because of that plus/minus sign we get two). Any value between 0 and 1 is a root that matters for Bézier curves, anything below or above that is irrelevant (because Bézier curves are only defined over the interval [0,1]). So, how do we convert? First we turn our cubic Bézier function into a quadratic one, by following the rule mentioned at the end of the derivatives section: And then, using these v values, we can find out what our a, b, and c should be: This gives us three coefficients {a, b, c} that are expressed in terms of v values, where the v values are expressions of our original coordinate values, so we can do some substitution to get: Easy-peasy. We can now almost trivially find the roots by plugging those values into the quadratic formula. And as a cubic curve, there is also a meaningful second derivative, which we can compute by simple taking the derivative of the derivative. Quartic curves: Cardano's algorithm. We haven't really looked at them before now, but the next step up would be a Quartic curve, a fourth degree Bézier curve. As expected, these have a derivative that is a cubic function, and now things get much harder. Cubic functions don't have a "simple" rule to find their roots, like the quadratic formula, and instead require quite a bit of rewriting to a form that we can even start to try to solve. Back in the 16th century, before Bézier curves were a thing, and even before calculus itself was a thing, Gerolamo Cardano figured out that even if the general cubic function is really hard to solve, it can be rewritten to a form for which finding the roots is "easier" (even if not "easy"): We can see that the easier formula only has two constants, rather than four, and only two expressions involving t , rather than three: this makes things considerably easier to solve because it lets us use regular calculus to find the values that satisfy the equasion. Now, there is one small hitch: as a cubic function, the solutions may be complex numbers rather than plain numbers... And Cardona realised this, centuries befor complex numbers were a well-understood and established part of number theory. His interpretation of them was "these numbers are impossible but that's okay because they disappear again in later steps", allowing him to not think about them too much, but we have it even easier: as we're trying to find the roots for display purposes, we don't even care about complex numbers: we're going to simplify Cardano's approach just that tiny bit further by throwing away any solution that's not a plain number. So, how do we rewrite the hard formula into the easier formula? This is explained in detail over at Ken J. Ward's page for solving the cubic equation, so instead of showing the maths, I'm simply going to show the programming code for solving the cubic equation, with the complex roots getting totally ignored, but if you're interested you should definitely head over to Ken's page and give the procedure a read-through. Implementing Cardano's algorithm for finding all real roots The "real roots" part is fairly important, because while you cannot take a square, cube, etc. root of a negative number in the "real" number space (denoted with ℝ), this is perfectly fine in the "complex" number space (denoted with ℂ). And, as it so happens, Cardano is also attributed as the first mathematician in history to have made use of complex numbers in his calculations. For this very algorithm! // A helper function to filter for values in the [0,1] interval: function accept(t) { return 0<=t && t <=1; } // A real-cuberoots-only function: function cuberoot(v) { if(v<0) return -pow(-v,1/3); return pow(v,1/3); } // Now then: given cubic coordinates {pa, pb, pc, pd} find all roots. function getCubicRoots(pa, pb, pc, pd) { var a = (3*pa - 6*pb + 3*pc), b = (-3*pa + 3*pb), c = pa, d = (-pa + 3*pb - 3*pc + pd); // do a check to see whether we even need cubic solving: if (approximately(d,0)) { // this is not a cubic curve. if (approximately(a,0)) { // in fact, this is not a quadratic curve either. if (approximately(b,0)) { // in fact in fact, there are no solutions. return []; } // linear solution return [-c / b].filter(accept); } // quadratic solution var q = sqrt(b*b - 4*a*c), 2a = 2*a; return [(q-b)/2a, (-b-q)/2a].filter(accept) } // at this point, we know we need a cubic solution. a /= d; b /= d; c /= d; var p = (3*b - a*a)/3, p3 = p/3, q = (2*a*a*a - 9*a*b + 27*c)/27, q2 = q/2, discriminant = q2*q2 + p3*p3*p3; // and some variables we're going to use later on: var u1, v1, root1, root2, root3; // three possible real roots: if (discriminant < 0) { var mp3 = -p/3, mp33 = mp3*mp3*mp3, r = sqrt( mp33 ), t = -q / (2*r), cosphi = t<-1 ? -1 : t>1 ? 1 : t, phi = acos(cosphi), crtr = cuberoot(r), t1 = 2*crtr; root1 = t1 * cos(phi/3) - a/3; root2 = t1 * cos((phi+2*pi)/3) - a/3; root3 = t1 * cos((phi+4*pi)/3) - a/3; return [root1, root2, root3].filter(accept); } // three real roots, but two of them are equal: if(discriminant === 0) { u1 = q2 < 0 ? cuberoot(-q2) : -cuberoot(q2); root1 = 2*u1 - a/3; root2 = -u1 - a/3; return [root1, root2].filter(accept); } // one real root, two complex roots var sd = sqrt(discriminant); u1 = cuberoot(sd - q2); v1 = cuberoot(sd + q2); root1 = u1 - v1 - a/3; return [root1].filter(accept); } And that's it. The maths is complicated, but the code is pretty much just "follow the maths, while caching as many values as we can to prevent recomputing things as much as possible" and now we have a way to find all roots for a cubic function and can just move on with using that to find extremities of our curves. And of course, as a quartic curve also has meaningful second and third derivatives, we can quite easily compute those by using the derivative of the derivative (of the derivative), just as for cubic cuvers. Quintic and higher order curves: finding numerical solutions And this is where thing stop, because we cannot find the roots for polynomials of degree 5 or higher using algebra (a fact known as the Abel–Ruffini theorem). Instead, for occasions like these, where algebra simply cannot yield an answer, we turn to numerical analysis. That's a fancy term for saying "rather than trying to find exact answers by manipulating symbols, find approximate answers by describing the underlying process as a combination of steps, each of which can be assigned a number via symbolic manipulation". For example, trying to mathematically compute how much water fits in a completely crazy three dimensional shape is very hard, even if it got you the perfect, precise answer. A much easier approach, which would be less perfect but still entirely useful, would be to just grab a buck and start filling the shape until it was full: just count the number of buckets of water you used. And if we want a more precise answer, we can use smaller buckets. So that's what we're going to do here, too: we're going to treat the problem as a sequence of steps, and the smaller we can make each step, the closer we'll get to that "perfect, precise" answer. And as it turns out, there is a really nice numerical root-finding algorithm, called the Newton-Raphson root finding method (yes, after that Newton), which we can make use of. The Newton-Raphson approach consists of taking our impossible-to-solve function f(x) , picking some intial value x (literally any value will do), and calculating f(x) . We can think of that value as the "height" of the function at x . If that height is zero, we're done, we have found a root. If it isn't, we calculate the tangent line at f(x) and calculate at which x value its height is zero (which we've already seen is very easy). That will give us a new x and we repeat the process until we find a root. Mathematically, this means that for some x , at step n=1 , we perform the following calculation until f y (x) is zero, so that the next t is the same as the one we already have: (The Wikipedia article has a decent animation for this process, so I will not add a graphic for that here) Now, this works well only if we can pick good starting points, and our curve is continuously differentiable and doesn't have oscillations. Glossing over the exact meaning of those terms, the curves we're dealing with conform to those constraints, so as long as we pick good starting points, this will work. So the question is: which starting points do we pick? As it turns out, Newton-Raphson is so blindingly fast that we could get away with just not picking: we simply run the algorithm from t=0 to t=1 at small steps (say, 1/200th) and the result will be all the roots we want. Of course, this may pose problems for high order Bézier curves: 200 steps for a 200th order Bézier curve is going to go wrong, but that's okay: there is no reason (at least, none that I know of) to ever use Bézier curves of crazy high orders. You might use a fifth order curve to get the "nicest still remotely workable" approximation of a full circle with a single Bézier curve, but that's pretty much as high as you'll ever need to go. In conclusion: So now that we know how to do root finding, we can determine the first and second derivative roots for our Bézier curves, and show those roots overlaid on the previous graphics. For the quadratic curve, that means just the first derivative, in red: Scripts are disabled. Showing fallback image. And for cubic curves, that means first and second derivatives, in red and purple respectively: Scripts are disabled. Showing fallback image.

previousnext Bounding boxes If we have the extremities, and the start/end points, a simple for-loop that tests for min/max values for x and y means we have the four values we need to box in our curve: Computing the bounding box for a Bézier curve: Find all t value(s) for the curve derivative's x- and y-roots. Discard any t value that's lower than 0 or higher than 1, because Bézier curves only use the interval [0,1]. Determine the lowest and highest value when plugging the values t=0, t=1 and each of the found roots into the original functions: the lowest value is the lower bound, and the highest value is the upper bound for the bounding box we want to construct. Applying this approach to our previous root finding, we get the following axis-aligned bounding boxes (with all curve extremity points shown on the curve): Scripts are disabled. Showing fallback image. Quadratic Bézier bounding box Scripts are disabled. Showing fallback image. Cubic Bézier bounding box We can construct even nicer boxes by aligning them along our curve, rather than along the x- and y-axis, but in order to do so we first need to look at how aligning works.

previousnext Aligning curves While there are an incredible number of curves we can define by varying the x- and y-coordinates for the control points, not all curves are actually distinct. For instance, if we define a curve, and then rotate it 90 degrees, it's still the same curve, and we'll find its extremities in the same spots, just at different draw coordinates. As such, one way to make sure we're working with a "unique" curve is to "axis-align" it. Aligning also simplifies a curve's functions. We can translate (move) the curve so that the first point lies on (0,0), which turns our n term polynomial functions into n-1 term functions. The order stays the same, but we have less terms. Then, we can rotate the curves so that the last point always lies on the x-axis, too, making its coordinate (...,0). This further simplifies the function for the y-component to an n-2 term function. For instance, if we have a cubic curve such as this: Then translating it so that the first coordinate lies on (0,0), moving all x coordinates by -120, and all y coordinates by -160, gives us: If we then rotate the curve so that its end point lies on the x-axis, the coordinates (integer-rounded for illustrative purposes here) become: If we drop all the zero-terms, this gives us: We can see that our original curve definition has been simplified considerably. The following graphics illustrate the result of aligning our example curves to the x-axis, with the cubic case using the coordinates that were just used in the example formulae: Scripts are disabled. Showing fallback image. Scripts are disabled. Showing fallback image.

previousnext Tight bounding boxes With our knowledge of bounding boxes, and curve alignment, We can now form the "tight" bounding box for curves. We first align our curve, recording the translation we performed, "T", and the rotation angle we used, "R". We then determine the aligned curve's normal bounding box. Once we have that, we can map that bounding box back to our original curve by rotating it by -R, and then translating it by -T. We now have nice tight bounding boxes for our curves: Scripts are disabled. Showing fallback image. Aligning a quadratic curve Scripts are disabled. Showing fallback image. Aligning a cubic curve These are, strictly speaking, not necessarily the tightest possible bounding boxes. It is possible to compute the optimal bounding box by determining which spanning lines we need to effect a minimal box area, but because of the parametric nature of Bézier curves this is actually a rather costly operation, and the gain in bounding precision is often not worth it.

previousnext Curve inflections Now that we know how to align a curve, there's one more thing we can calculate: inflection points. Imagine we have a variable size circle that we can slide up against our curve. We place it against the curve and adjust its radius so that where it touches the curve, the curvatures of the curve and the circle are the same, and then we start to slide the circle along the curve - for quadratic curves, we can always do this without the circle behaving oddly: we might have to change the radius of the circle as we slide it along, but it'll always sit against the same side of the curve. But what happens with cubic curves? Imagine we have an S curve and we place our circle at the start of the curve, and start sliding it along. For a while we can simply adjust the radius and things will be fine, but once we get to the midpoint of that S, something odd happens: the circle "flips" from one side of the curve to the other side, in order for the curvatures to keep matching. This is called an inflection, and we can find out where those happen relatively easily. What we need to do is solve a simple equation: What we're saying here is that given the curvature function C(t), we want to know for which values of t this function is zero, meaning there is no "curvature", which will be exactly at the point between our circle being on one side of the curve, and our circle being on the other side of the curve. So what does C(t) look like? Actually something that seems not too hard: The function C(t) is the cross product between the first and second derivative functions for the parametric dimensions of our curve. And, as already shown, derivatives of Bézier curves are just simpler Bézier curves, with very easy to compute new coefficients, so this should be pretty easy. However as we've seen in the section on aligning, aligning lets us simplify things a lot, by completely removing the contributions of the first coordinate from most mathematical evaluations, and removing the last y coordinate as well by virtue of the last point lying on the x-axis. So, while we can evaluate C(t) = 0 for our curve, it'll be much easier to first axis-align the curve and then evaluating the curvature function. Let's derive the full formula anyway Of course, before we do our aligned check, let's see what happens if we compute the curvature function without axis-aligning. We start with the first and second derivatives, given our basis functions: And of course the same functions for y: Asking a computer to now compose the C(t) function for us (and to expand it to a readable form of simple terms) gives us this rather overly complicated set of arithmetic expressions: That is... unwieldy. So, we note that there are a lot of terms that involve multiplications involving x1, y1, and y4, which would all disappear if we axis-align our curve, which is why aligning is a great idea. Aligning our curve so that three of the eight coefficients become zero, and observing that scale does not affect finding t values, we end up with the following simple term function for C(t): That's a lot easier to work with: we see a fair number of terms that we can compute and then cache, giving us the following simplification: This is a plain quadratic curve, and we know how to solve C(t) = 0; we use the quadratic formula: We can easily compute this value if the discriminator isn't a negative number (because we only want real roots, not complex roots), and if x is not zero, because divisions by zero are rather useless. Taking that into account, we compute t, we disregard any t value that isn't in the Bézier interval [0,1], and we now know at which t value(s) our curve will inflect. Scripts are disabled. Showing fallback image. Finding cubic Bézier curve inflections

previousnext The canonical form (for cubic curves) While quadratic curves are relatively simple curves to analyze, the same cannot be said of the cubic curve. As a curvature is controlled by more than one control point, it exhibits all kinds of features like loops, cusps, odd colinear features, and as many as two inflection points because the curvature can change direction up to three times. Now, knowing what kind of curve we're dealing with means that some algorithms can be run more efficiently than if we have to implement them as generic solvers, so is there a way to determine the curve type without lots of work? As it so happens, the answer is yes, and the solution we're going to look at was presented by Maureen C. Stone from Xerox PARC and Tony D. deRose from the University of Washington in their joint paper "A Geometric Characterization of Parametric Cubic curves". It was published in 1989, and defines curves as having a "canonical" form (i.e. a form that all curves can be reduced to) from which we can immediately tell what features a curve will have. So how does it work? The first observation that makes things work is that if we have a cubic curve with four points, we can apply a linear transformation to these points such that three of the points end up on (0,0), (0,1) and (1,1), with the last point then being "somewhere". After applying that transformation, the location of that last point can then tell us what kind of curve we're dealing with. Specifically, we see the following breakdown: Scripts are disabled. Showing fallback image. This is a fairly funky image, so let's see what the various parts of it mean... We see the three fixed points at (0,0), (0,1) and (1,1). The various regions and boundaries indicate what property the original curve will have, if the fourth point is in/on that region or boundary. Specifically, if the fourth point is... ...anywhere inside the red zone, but not on its boundaries, the curve will either be self-intersecting (yielding a loop). We won't know where it self-intersects (in terms of t values), but we are guaranteed that it does. ...on the left (red) edge of the red zone, the curve will have a cusp. We again don't know where, but we know there is one. This edge is described by the function: ...on the almost circular, lower right (pink) edge, the curve's end point touches the curve, forming a loop. This edge is described by the function: ...on the top (blue) edge, the curve's start point touches the curve, forming a loop. This edge is described by the function: ...inside the lower (green) zone, past y=1 , the curve will have a single inflection (switching concave/convex once). ...between the left and lower boundaries (below the cusp line but above the single-inflection line), the curve will have two inflections (switching from concave to convex and then back again, or from convex to concave and then back again). ...anywhere on the right of self-intersection zone, the curve will have no inflections. It'll just be a simple arch. Of course, this map is fairly small, but the regions extend to infinity, with well defined boundaries. Wait, where do those lines come from? Without repeating the paper mentioned at the top of this section, the loop-boundaries come from rewriting the curve into canonical form, and then solving the formulae for which constraints must hold for which possible curve properties. In the paper these functions yield formulae for where you will find cusp points, or loops where we know t=0 or t=1, but those functions are derived for the full cubic expression, meaning they apply to t=-∞ to t=∞... For Bézier curves we only care about the "clipped interval" t=0 to t=1, so some of the properties that apply when you look at the curve over an infinite interval simply don't apply to the Bézier curve interval. The right bound for the loop region, indicating where the curve switches from "having inflections" to "having a loop", for the general cubic curve, is actually mirrored over x=1, but for Bézier curves this right half doesn't apply, so we don't need to pay attention to it. Similarly, the boundaries for t=0 and t=1 loops are also nice clean curves but get "cut off" when we only look at what the general curve does over the interval t=0 to t=1. For the full details, head over to the paper and read through sections 3 and 4. If you still remember your high school precalculus, you can probably follow along with this paper, although you might have to read it a few times before all the bits "click". So now the question becomes: how do we manipulate our curve so that it fits this canonical form, with three fixed points, and one "free" point? Enter linear algebra. Don't worry, I'll be doing all the math for you, as well as show you what the effect is on our curves, but basically we're going to be using linear algebra, rather than calculus, because "it's way easier". Sometimes a calculus approach is very hard to work with, when the equivalent geometrical solution is super obvious. The approach is going to start with a curve that doesn't have all-colinear points (so we need to make sure the points don't all fall on a straight line), and then applying three graphics operations that you will probably have heard of: translation (moving all points by some fixed x- and y-distance), scaling (multiplying all points by some x and y scale factor), and shearing (an operation that turns rectangles into parallelograms). Step 1: we translate any curve by -p1.x and -p1.y, so that the curve starts at (0,0). We're going to make use of an interesting trick here, by pretending our 2D coordinates are 3D, with the z coordinate simply always being 1. This is an old trick in graphics to overcome the limitations of 2D transformations: without it, we can only turn (x,y) coordinates into new coordinates of the form (ax + by, cx + dy), which means we can't do translation, since that requires we end up with some kind of (x + a, y + b). If we add a bogus z coordinate that is always 1, then we can suddenly add arbitrary values. For example: Sweet! z stays 1, so we can effectively ignore it entirely, but we added some plain values to our x and y coordinates. So, if we want to subtract p1.x and p1.y, we use: Running all our coordinates through this transformation gives a new set of coordinates, let's call those U, where the first coordinate lies on (0,0), and the rest is still somewhat free. Our next job is to make sure point 2 ends up lying on the x=0 line, so what we want is a transformation matrix that, when we run it, subtracts x from whatever x we currently have. This is called shearing, and the typical x-shear matrix and its transformation looks like this: So we want some shearing value that, when multiplied by y, yields -x, so our x coordinate becomes zero. That value is simply -x/y, because *-x/y * y = -x*. Done: Now, running this on all our points generates a new set of coordinates, let's call those V, which now have point 1 on (0,0) and point 2 on (0, some-value), and we wanted it at (0,1), so we need to do some scaling to make sure it ends up at (0,1). Additionally, we want point 3 to end up on (1,1), so we can also scale x to make sure its x-coordinate will be 1 after we run the transform. That means we'll be x-scaling by 1/point3 x , and y-scaling by point2 y . This is really easy: Then, finally, this generates a new set of coordinates, let's call those W, of which point 1 lies on (0,0), point 2 lies on (0,1), and point three lies on (1, ...) so all that's left is to make sure point 3 ends up at (1,1) - but we can't scale! Point 2 is already in the right place, and y-scaling would move it out of (0,1) again, so our only option is to y-shear point three, just like how we x-sheared point 2 earlier. In this case, we do the same trick, but with y/x rather than x/y because we're not x-shearing but y-shearing. Additionally, we don't actually want to end up at zero (which is what we did before) so we need to shear towards an offset, in this case 1: And this generates our final set of four coordinates. Of these, we already know that points 1 through 3 are (0,0), (0,1) and (1,1), and only the last coordinate is "free". In fact, given any four starting coordinates, the resulting "transformation mapped" coordinate will be: Okay, well, that looks plain ridiculous, but: notice that every coordinate value is being offset by the initial translation, and also notice that a lot of terms in that expression are repeated. Even though the maths looks crazy as a single expression, we can just pull this apart a little and end up with an easy-to-calculate bit of code! First, let's just do that translation step as a "preprocessing" operation so we don't have to subtract the values all the time. What does that leave? Suddenly things look a lot simpler: the mapped x is fairly straight forward to compute, and we see that the mapped y actually contains the mapped x in its entirety, so we'll have that part already available when we need to evaluate it. In fact, let's pull out all those common factors to see just how simple this is: That's kind of super-simple to write out in code, I think you'll agree. Coding math tends to be easier than the formulae initially make it look! How do you track all that? Doing maths can be a pain, so whenever possible, I like to make computers do the work for me. Especially for things like this, I simply use Mathematica. Tracking all this math by hand is insane, and we invented computers, literally, to do this for us. I have no reason to use pen and paper when I can write out what I want to do in a program, and have the program do the math for me. And real math, too, with symbols, not with numbers. In fact, here's the Mathematica notebook if you want to see how this works for yourself. Now, I know, you're thinking "but Mathematica is super expensive!" and that's true, it's $344 for home use, up from $295 when I original wrote this, but it's also free when you buy a $35 raspberry pi. Obviously, I bought a raspberry pi, and I encourage you to do the same. With that, as long as you know what you want to do, Mathematica can just do it for you. And we don't have to be geniuses to work out what the maths looks like. That's what we have computers for. So, let's write up a sketch that'll show us the canonical form for any curve drawn in blue, overlaid on our canonical map, so that we can immediately tell which features our curve must have, based on where the fourth coordinate is located on the map: Scripts are disabled. Showing fallback image.

previousnext Finding Y, given X One common task that pops up in things like CSS work, or parametric equalisers, or image leveling, or any other number of applications where Bézier curves are used as control curves in a way that there is really only ever one "y" value associated with one "x" value, you might want to cut out the middle man, as it were, and compute "y" directly based on "x". After all, the function looks simple enough, finding the "y" value should be simple too, right? Unfortunately, not really. However, it is possible and as long as you have some code in place to help, it's not a lot of a work either. We'll be tackling this problem in two stages: the first, which is the hard part, is figuring out which "t" value belongs to any given "x" value. For instance, have a look at the following graphic. On the left we have a Bézier curve that looks for all intents and purposes like it fits our criteria: every "x" has one and only one associated "y" value. On the right we see the function for just the "x" values: that's a cubic curve, but not a really crazy cubic curve. If you move the graphic's slider, you will see a red line drawn that corresponds to the x coordinate: this is a vertical line in the left graphic, and a horizontal line on the right. Scripts are disabled. Showing fallback image. Now, if you look more closely at that right graphic, you'll notice something interesting: if we treat the red line as "the x axis", then the point where the function crosses our line is really just a root for the cubic function x(t) through a shifted "x-axis"... and we've already seen how to calculate roots, so let's just run cubuc root finding - and not even the complicated cubic case either: because of the kind of curve we're starting with, we know there is only root, simplifying the code we need! First, let's look at the function for x(t): We can rewrite this to a plain polynomial form, by just fully writing out the expansion and then collecting the polynomial factors, as: Nothing special here: that's a standard cubic polynomial in "power" form (i.e. all the terms are ordered by their power of t ). So, given that a , b , c , d , and x(t) are all known constants, we can trivially rewrite this (by moving the x(t) across the equal sign) as: You might be wondering "where did all the other 'minus x' for all the other values a, b, c, and d go?" and the answer there is that they all cancel out, so the only one we actually need to subtract is the one at the end. Handy! So now we just solve this equation using Cardano's algorithm, and we're left with some rather short code: // prepare our values for root finding: x = a value we already know xcoord = our set of Bézier curve's x coordinates foreach p in xcoord: p.x -= x // find our root, of which we know there is exactly one: t = getRoots(p[0], p[1], p[2], p[3])[0] // find our answer: y = curve.get(t).y So the procedure is fairly straight forward: pick an x , find the associted t value, evaluate our curve for that t value, which gives us the curve's {x,y} coordinate, which means we know y for this x . Move the slider for the following graphic to see this in action: Scripts are disabled. Showing fallback image. Finding By(t), by finding t for a given x

previousnext Arc length How long is a Bézier curve? As it turns out, that's not actually an easy question, because the answer requires maths that —much like root finding— cannot generally be solved the traditional way. If we have a parametric curve with f x (t) and f y (t), then the length of the curve, measured from start point to some point t = z, is computed using the following seemingly straight forward (if a bit overwhelming) formula: or, more commonly written using Leibnitz notation as: This formula says that the length of a parametric curve is in fact equal to the area underneath a function that looks a remarkable amount like Pythagoras' rule for computing the diagonal of a straight angled triangle. This sounds pretty simple, right? Sadly, it's far from simple... cutting straight to after the chase is over: for quadratic curves, this formula generates an unwieldy computation, and we're simply not going to implement things that way. For cubic Bézier curves, things get even more fun, because there is no "closed form" solution, meaning that due to the way calculus works, there is no generic formula that allows you to calculate the arc length. Let me just repeat this, because it's fairly crucial: for cubic and higher Bézier curves, there is no way to solve this function if you want to use it "for all possible coordinates". Seriously: It cannot be done. So we turn to numerical approaches again. The method we'll look at here is the Gauss quadrature. This approximation is a really neat trick, because for any nth degree polynomial it finds approximated values for an integral really efficiently. Explaining this procedure in length is way beyond the scope of this page, so if you're interested in finding out why it works, I can recommend the University of South Florida video lecture on the procedure, linked in this very paragraph. The general solution we're looking for is the following: In plain text: an integral function can always be treated as the sum of an (infinite) number of (infinitely thin) rectangular strips sitting "under" the function's plotted graph. To illustrate this idea, the following graph shows the integral for a sinusoid function. The more strips we use (and of course the more we use, the thinner they get) the closer we get to the true area under the curve, and thus the better the approximation: Scripts are disabled. Showing fallback image. A function's approximated integral Scripts are disabled. Showing fallback image. A better approximation Scripts are disabled. Showing fallback image. An even better approximation Now, infinitely many terms to sum and infinitely thin rectangles are not something that computers can work with, so instead we're going to approximate the infinite summation by using a sum of a finite number of "just thin" rectangular strips. As long as we use a high enough number of thin enough rectangular strips, this will give us an approximation that is pretty close to what the real value is. So, the trick is to come up with useful rectangular strips. A naive way is to simply create n strips, all with the same width, but there is a far better way using special values for C and f(t) depending on the value of n, which indicates how many strips we'll use, and it's called the Legendre-Gauss quadrature. This approach uses strips that are not spaced evenly, but instead spaces them in a special way based on describing the function as a polynomial (the more strips, the more accurate the polynomial), and then computing the exact integral for that polynomial. We're essentially performing arc length computation on a flattened curve, but flattening it based on the intervals dictated by the Legendre-Gauss solution. Note that one requirement for the approach we'll use is that the integral must run from -1 to 1. That's no good, because we're dealing with Bézier curves, and the length of a section of curve applies to values which run from 0 to "some value smaller than or equal to 1" (let's call that value z). Thankfully, we can quite easily transform any integral interval to any other integral interval, by shifting and scaling the inputs. Doing so, we get the following: That may look a bit more complicated, but the fraction involving z is a fixed number, so the summation, and the evaluation of the f(t) values are still pretty simple. So, what do we need to perform this calculation? For one, we'll need an explicit formula for f(t), because that derivative notation is handy on paper, but not when we have to implement it. We'll also need to know what these C i and t i values should be. Luckily, that's less work because there are actually many tables available that give these values, for any n, so if we want to approximate our integral with only two terms (which is a bit low, really) then these tables would tell us that for n=2 we must use the following values: Which means that in order for us to approximate the integral, we must plug these values into the approximate function, which gives us: We can program that pretty easily, provided we have that f(t) available, which we do, as we know the full description for the Bézier curve functions B x (t) and B y (t). If we use the Legendre-Gauss values for our C values (thickness for each strip) and t values (location of each strip), we can determine the approximate length of a Bézier curve by computing the Legendre-Gauss sum. The following graphic shows a cubic curve, with its computed lengths; Go ahead and change the curve, to see how its length changes. One thing worth trying is to see if you can make a straight line, and see if the length matches what you'd expect. What if you form a line with the control points on the outside, and the start/end points on the inside? Scripts are disabled. Showing fallback image. Arc length for a Bézier curve

previousnext Approximated arc length Sometimes, we don't actually need the precision of a true arc length, and we can get away with simply computing the approximate arc length instead. The by far fastest way to do this is to flatten the curve and then simply calculate the linear distance from point to point. This will come with an error, but this can be made arbitrarily small by increasing the segment count. If we combine the work done in the previous sections on curve flattening and arc length computation, we can implement these with minimal effort: Scripts are disabled. Showing fallback image. Approximate quadratic curve arc length Scripts are disabled. Showing fallback image. Approximate cubic curve arc length You may notice that even though the error in length is actually pretty significant in absolute terms, even at a low number of segments we get a length that agrees with the true length when it comes to just the integer part of the arc length. Quite often, approximations can drastically speed things up!

previousnext Curvature of a curve If we have two curves, a