Loading the article

The preface

We usually use lines to draw 2D graphics. There are roughly two kinds of lines: straight lines and curves. The first line can be drawn easily by hand or by computer. Just give the computer a starting point and an ending point, and bam! So I’ve drawn the line. There’s no question about it.

Drawing a curve, however, is a big problem. Although we can easily draw a curve freehand, a computer cannot draw a curve unless a mathematical function describing the curve is given. In fact, when you draw a line, you also need mathematical functions, but the equations you need to draw a line are so simple that we won’t worry about them here. To a computer, all lines are “functions,” whether they are straight lines or curves. However, this means that we need to find a curve equation that works well on a computer. There are many kinds of such curves, and in this article we will focus on a special, highly concerned class of functions that will be used almost anywhere a curve is drawn: Bezier curves.

They are named after Pierre Bezier, who although he was not the first or the only person to “invent” the curve, made it known to the world that it was suitable for design work (working for Renault and publishing his research in 1962). One might say that mathematician Paul de Casteljau was the first to discover the properties of these curves, and while working at Citroen, he came up with an elegant way to draw them. De Casteljau, however, did not publish his work, making it difficult to reach a definitive answer to the question of who discovered it first. Bessel curves are essentially Bernstein polynomials, a type of mathematical function studied by Sergei Natanovich Bernstein, and publications on them date back to at least 1912. Anyway, this is just a bit of trivia, but you’re probably more interested in the fact that these curves are very convenient: you can connect multiple Bezier curves, and the connected curves look like one curve. Even when you draw “paths” in Photoshop or use vector drawing programs like Flash, Illustrator and Inkscape, the curves you draw are Bezier curves.

Well, what if you want to program them yourself? What are the pitfalls? How do you draw them? What does a bounding box look like, how do you determine the intersection, how do you stretch the curve, and in a nutshell: How do you do whatever you want with the curve? That’s what this article is trying to say. Get ready to learn some math!

— Pomax (Twitter, @therealPomax)

Note: Almost all Bezier graphics are interactive.

This page uses interactive examples based on Bezier.js, as well as some “real” math (in LaTeX form) formatted in MathJax. This page is the React app generated offline with Webpack, which makes adding the “View source” option even more challenging. I’m still trying to add them back, but I don’t think it’s going to support deploying this update compared to previous releases.

The book is open source.

The book is an open source software project with two github repositories. The first github.com/pomax/bezie… It’s the purely demonstration version of the one you’re looking at right now. Another github.com/pomax/Bezie… Is a development version with all HTML, javascript, and CSS. You can fork one of these and do whatever you want, except of course to use it commercially as your own work. =)

How complicated is the math going to be?

This primer uses most of the math you learned in high school. If you understand basic calculations and can read English, you will be able to use this material. Sometimes more complex math is involved, but if you don’t want to dig into it, you can skip the “explained” part of the paragraph or skip to the end of the chapter to avoid the seemingly in-depth math. Conclusions are often listed at the end of chapters, so you can use them directly.

Question, comment:

If you have some suggestions for the new chapter, click on the Github Issue Tracker (you can also click on the repo link in the upper right corner). If you have some questions about the material, there is no comment function at the moment as I am currently working on a rewrite, but you can use the issue tracker to post a comment. Once the rewrite is complete, I’ll add comments or a system that says, “Select a paragraph and click the ‘question’ button to ask a question.” We’ll see then.

Get me a cup of coffee?

If you enjoy the book, or find it helpful for your work, or you want to know how to show your appreciation for the book, you can buy me a cup of coffee. It’s up to you. The work went on for many years, from a small brief to more than 70 pages of reading about Bessel curves, with a lot of coffee poured in along the way. I never regretted every minute I spent on it, but I could keep writing if there was more coffee!