A Primer on Bézier Curves

Preface 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. 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. 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. 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. 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! Virtually all Bézier graphics are interactive. 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. This book is open source. 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. How complicated is the maths going to be? 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. What language is all this example code in? There are way too many programming languages to favour one of all others, soo all the example code in this Primer uses a form of pseudo-code that uses a syntax that's close enough to, but not actually, modern scripting languages like JS, Python, etc.

That means you won't be able to copy-paste any of it without giving it any thought, but that's intentional: if you're reading this primer, presumably you want to learn, and you don't learn by copy-pasting. You learn by doing things yourself, making mistakes, and then fixing those mistakes. Now, of course, I didn't intentionally add errors in the example code just to trick you into making mistakes (that would be horrible!) but I did intentionally keep the code from favouring one programming language over another. Don't worry though, if you know even a single procedural programming language, you should be able to read the examples without any difficulties. Questions, comments: 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. Help support the book! 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! What's new? 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) Toggle changes November 2020 Added a section on finding curve/circle intersections October 2020 Added the Ukranian locale!

Help out in getting its localization to 100%! August-September 2020 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. June 2020 Added automatic CI/CD using Github Actions January 2020 Added reset buttons to all graphics Updated to preface to correctly describe the on-page maths Fixed the Catmull-Rom section because it had glaring maths errors August 2019 Added a section on (plain) rational Bezier curves Improved the Graphic component to allow for sliders December 2018 Added a section on curvature and calculating kappa. Added a Patreon page! Head on over to patreon.com/bezierinfo to help support this site! August 2018 Added a section on finding a curve's y, if all you have is the x coordinate. July 2018 Rewrote the 3D normals section, implementing and explaining Rotation Minimising Frames. Updated the section on curve order raising/lowering, showing how to get a least-squares optimized lower order curve. (Finally) updated 'npm test' so that it automatically rebuilds when files are changed while the dev server is running. June 2018 Added a section on direct curve fitting. Added source links for all graphics. Added this "What's new?" section. April 2017 Added a section on 3d normals. Added live-updating for the social link buttons, so they always link to the specific section you're reading. February 2017 Finished rewriting the entire codebase for localization. January 2016 Added a section to explain the Bezier interval. Rewrote the Primer as a React application. December 2015 Set up the split repository between BezierInfo-2 as development repository, and bezierinfo as live page. 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. May 2015 Switched over to pure JS rather than Processing-through-Processing.js Added Cardano's algorithm for finding the roots of a cubic polynomial. April 2015 Added a section on arc length approximations.

February 2015 Added a section on the canonical cubic Bezier form. November 2014 Switched to HTTPS. July 2014 Added the section on arc approximation. April 2014 Added the section on Catmull-Rom fitting. November 2013 Added the section on Catmull-Rom / Bezier conversion. Added the section on Bezier cuves as matrices. April 2013 Added a section on poly-Beziers. Added a section on boolean shape operations. March 2013 First drastic rewrite. Added sections on circle approximations. Added a section on projecting a point onto a curve. Added a section on tangents and normals. Added Legendre-Gauss numerical data tables. October 2011 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. 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. 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! 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.