A Primer on 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.
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 lines. 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's 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 getting them known to the world as a curve well-suited for design work (working for Renault and publishing his investigations in 1962), 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, investigating the nature of these curves in 1959 while working at Citroën, coming 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, with publications on them at least as far back as 1912. Anyway, that's mostly trivia, what you are more likely to care about is that these curves are handy: you can linked 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.
So, 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 when you do with these curves? That's what this page is for. Prepare to be mathed.
All Bézier graphics are interactive.
This page uses Processing examples, rendering as interactive graphics on the page using Processing.js, which means you don't need any plugins if you're on a modern browser. (If you are still using IE8 because you're on Windows XP, be aware Microsoft would rather you start using something like Firefox than keep using IE8, because IE8 does not support the internet anymore. It was already a little behind when it was first released, but today it literally doesn't support the internet, a bit like the difference between wordpad and Word. IE8 is no longer a web browser, it's a legacy application). It also uses math, in LaTeX form, which is typeset using the most excellent MathJax library.
Examples have a "view source" option.
Just seeing that the guy who wrote the article knows how to write the code needed to demonstrate Bézier curve things is basically useless, I think you'll agree. You don't benefit from me going: "Look at me, I know how to program, ooooh~". So to make things useful, all graphics on this page have "view source" links. Click them, copy the source code, fire up the Processing PDE, paste the code, and hit "play". You should see the exact same thing now running on your own computer as you're seeing in the browser. This is working code, and you can trace everything I do. Regardless of whether you want to, I consider it important that you can. And the kicker is this code is in the public domain. I waive all rights to it. Do with it what you want, to me this is trivial code and it would be ridiculous to claim it as anything other than "I just wrote this to demonstrate how things work".
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.—Pomax (or in the tweetworld, @TheRealPomax)
Introduction
How do Bézier curves work?
Controlling Bézier curvatures
Bézier curvatures as matrix operations
de Casteljau's algorithm
Splitting curves
Splitting curves using matrices
Lowering and elevating curve order
Derivatives
Tangents and normals
Component functions
Finding extremities
Bounding boxes
Aligning curves
Tight boxes
Arc length
Tracing a curve at fixed distance intervals
Intersections
Curve/curve intersection
Curve moulding (using the projection ratio)
Creating a curve from three points
Bézier curves and Catmull-Rom curves
Creating a Catmull-Rom curve from three points
Forming poly-Bézier curves
Boolean shape operations
Projecting a point onto a Bézier curve
Curve offsetting
Graduated curve offsetting
Circles and quadratic Bézier curves
Circles and cubic Bézier curves
Approximating Bézier curves with circles
Todo list
- Programming tricks for fast curves
- A reference and further reading section
If there's anything missing from this list, please file an issue on github (link's in the upper right corner), and I'll add it to this list (while I write up some code to cleanly pull in gh-issues as a 'comment feed'... probably using web components).
Comments and questions
Have a question or comment? Simply fill in the following form, and hit post. No login required, because I'm sure we're all tired of having to log in just to speak our mind at this point. And the security question should be pretty obvious.