A Better Bezier Curve — A Polynomial in SwiftUI

Bernstein’s polynomials are an alternative to De Casteljau Beziers

Mark Lucking
Nov 27, 2020 · 4 min read
GIF of polynomial curve
GIF of polynomial curve
A Bernstein polynomial curve.

I published two articles earlier this month on Bezier curves in iOS — the first on using the paradigms within iOS and the second on the math/code behind said curves.

During my research for the second article, I found myself talking to a chap in the U.S. called Alan Wolfe. A man who it seems has done a lot of work in this area. Not only did Alan help me understand De Casteljau’s formula and fix a bug in my code, but he also suggested I try Bernstein’s power basis polynomials as an alternative formula to build Bezier curves.

Polynomials sometimes make more sense. First, what’s wrong with the De Casteljau method anyway? The problem is that, well, it has a complexity of O(n2). This basically means it quickly starts to get computationally expensive as the number of control points you add increases.

Let’s revisit it briefly. Now the leading GIF of the second piece I wrote had three control points and six start/endpoints, which makes sense… only it doesn’t. You see, you’re not looking at a single Bezier curve on that GIF. You’re looking at three individual Bezier curves that I tagged together. I modified the placement of the endpoints and created another GIF to illustrate the point. The control points here are the purple, red, and yellow crosses. The start/endpoints are the red, green, blue, and yellow circles:

GIF of three Bezier curves tagged together
GIF of three Bezier curves tagged together
Three Bezier curves

If I draw a single Bezier curve with two control points, I end up with something with far less movement. You can see a single Bezier curve in this GIF:

Four Bezier curves — one long, three short
Four Bezier curves — one long, three short
Four Bezier curves — one long, three short

The single Bezier curve is far more stable, at least in part because of the opposing pink control point. You can also see with more points on the grey curve some incongruity with the grey line as it warps. A classic case of less is more since you don’t notice it will have fewer points (in the earlier GIF).

Hey, you still may not see the problem. The clue is in fact in the code. Ironically, to calculate the black line here (single Bezier curve with multiple control points), I needed a dozen more lines of code and temporary storage for the combined sets. Had I used Bernstein’s method, it would have been far simpler.

So how do you use Bernstein’s power base polynomials? They work like this. The variable t is time and the variable s = 1 -t. You have a distinct formula linked to the number of control points you need. There are three equations below. Obviously, you can build bigger ones using the same pattern:

  • Linear Bezier (aka linear interpolation): y = A*s + B*t
  • Quadratic Bezier: y = A*s² + 2*B*st + C*t²
  • Cubic Bezier: y = A*s³ + 3*B*s²t + 3*C*st² + D*t³

The magic numbers in the formulae correspond to Pascal’s triangle, which looks like this:

Pascal’s triangle
Pascal’s triangle
Pascal’s triangle

What does this look like in code and, perhaps more importantly, on paper (some electronic grid paper, that is)? Here you go:

I call this method with a single line in my code:

This will build a cubic Bezier curve that is drawn here with triangles. There is more movement in the black line because it doesn’t take the red control point into account. If the red point swung that the same way as the purple and yellow crosses, the lines would track each other.

A polynomial and Bezier curve
A polynomial and Bezier curve
A Bernstein polynomial and a Bezier curve

Which method do you use in which situation? Well, if you have a very specific case where you know the number of control points isn’t going to change, then Bernstein’s solution looks better. It takes less CPU and less code. But if your requirement is more generic and may change, then the De Casteljau method makes more sense — even it takes more CPU and more code.

This brings me to the end of the article. I hope you enjoyed reading it as much as I did writing it and learned something new in the process.

Here is the code to generate and animate a polynomial. As you can see, 95% of it is simply setting up the initial values and then changing the values within them. The function is itself is just over a dozen lines:

Keep calm, keep coding…

Better Programming

Advice for programmers.

Sign up for The Best of Better Programming

By Better Programming

A weekly newsletter sent every Friday with the best articles we published that week. Code tutorials, advice, career opportunities, and more! Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to Zack Shapiro

Mark Lucking

Written by

Coding for 35+ years, enjoying using and learning Swift/iOS development. Writer @ Better Programming, @The StartUp, @Mac O’Clock, Level Up Coding & More

Better Programming

Advice for programmers.

Mark Lucking

Written by

Coding for 35+ years, enjoying using and learning Swift/iOS development. Writer @ Better Programming, @The StartUp, @Mac O’Clock, Level Up Coding & More

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store