Using Bezier Curves in SwiftUI

Let’s build a simple app to explore Bezier paths

Multiple Bezier curves being generated with different settings (Image source: Author)

You may be surprised to learn that Bézier didn’t invent the curves named after him — he just made them famous. The code on which they are based was written by Paul de Casteljau, who is the computer scientist that created the recursive methods we use today, code that calculates the points which, taken together, form a curve like the ones seen here in red.

In math-speak, a Bézier curve is defined by a set of control points P0 through Pn, where n is called its order (n = 1 for linear, 2 for quadratic, etc.). The formula used is beyond most mere mortals, I fear, but is beautifully illustrated by this animated GIF.

To use them in SwiftUI 2.0 under iOS, you have to create an object called a Shape, a definition that has one required method within it. The code below illustrates a quadratic Bézier curve much like the one you see above. P0 is represented by path.move. P1 is the control point and P2 the to: in the code, aka the final coordinate.

You can see the Apple documentation on the subject here.

A more complex curve can be build using the call to build a cubic Bézier curve, which has two control points. Note if I print out the path variable on the console, I can see exactly where the control points are. It produces an image that looks like this.

A single Bezier curve created with SwiftUI, a ying-yang symbol it seems

I started drawing in the blue circle and ended up at the yellow one. The green circle is the first control point and the orange one the second. The end result is a sort of ying-yang type symbol. The size of the frame on which I draw this curve is 256 points. The code to build this looks like this.