Bézier Fundaments for Swift

So, you have decided to set some drawings on your application, but sometimes, using PNGs isn’t working out, and it doesn’t let you perform some cool animations or color changes. Well, NOT ANYMORE! Today, you'll learn about the Bézier curve, and in the following articles, how to implement them in 3 different ways

Let's do it!

We will be taking a quick look into the general logic of implementing code that uses Bézier Curves. There is a lot of information to take in, so I will be as concise as I can. The objective here is to teach you how to “draw” using code. You will learn how to make two basic shapes and one more complex one, and, in the next articles, we will learn how to create them using UIKit's UIBezierPath and CGPath, and SwiftUI's Path (with Shape).

This is the start of a series of 5 articles, with this one introducing the logic behind coding images, the next 3 showing how to draw with code in Swift using UIBezierPath, CGPath, and Path, and the final article being a cheat sheet for whenever you code with any of the 3 classes.

This article will be divided into 3 parts:

• Basics (where we learn how to break a shape into smaller parts)
• Curves (how Bézier works), and
• Banner (how would we do this article banner using the logic we just learnt).

Basics

Ok. Let’s start! We need to understand how we approach how to draw. But you already know how! If you were going to draw a square with a pen and paper, you would:

1. Move your pencil to the first point;
2. Draw the first line to a second point;
3. Draw the second line to a third point;
4. Draw the third line to a fourth point;
5. Draw the fourth line back to the first point.

Our first example

In code, that's exactly what we will do too (sometimes with some extra steps). And we will write something like this:

drawing.moveTo(firstPoint)
drawing.addLineTo(secondPoint)
drawing.addLineTo(thirdPoint)
drawing.addLineTo(fourthPoint)
drawing.addLineTo(firstPoint)

Cool! But that's not confusing at all. Why are you even writing an article for something that simple? Well… when we introduce curves, we do some things differently. So let's take a look at the next example.

Curves

When drawing a curve on paper, we just… do it. How do we tell the code how the curve should be shaped? Turns out there are lots of different ways to do it, but the most used are Bézier Curves. When drawing each curve, we need to use one or two (hidden) extra points! We are going to call these extra points Control Points. They help us tell the code how our curve is going to be shaped exactly.

Curve example

On the left image, we draw an arc. That means two points (one for each edge), and two control points for the curve. On the right image, we can see where our control points are located.

But why use control points? I think this video explains best, but long story short: imagine creating a curve, using a ruler. That extra point will allow you to properly calculate where you need to draw each point in the curve. This way, you can have a smooth curve without much worry. You can read more about it here.

Ok, but what happens if we change our control points? Let’s play with our with them to see:

Examples of different control point positions

As we can see, we can position our control points anywhere we want to achieve the curve we want. If we want to make our curved shape, then, we need to:

1. Say where our first point is located;
2. Define our 2 control points
3. Draw to our second point with the defined control points;

And if we want to make more complex curves, all we need is to add more points with the appropriate control points. Nice!

Banner

Here we are going to understand precisely how the banner of this article was drawn and how you could adapt it to your code. The banner is something really simple to do! Let's see our banner again:

Our banner

We need to break this into smaller pieces, this way we can better see how we would do this.

Banner's lines, curves, points, and control points

The banner is pretty simple: 3 straight lines and 2 curves (first image above). And in the second image above we can see exactly where are our points (in red) and control points located (in blue)!

So, now we know how to draw something more complex than what we just saw in the previous two sessions. When drawing the top shape and if we start from the top-left point, then, our code will be something like:

1. Add a line to the top right;
2. Add a line to the bot right;
3. Add a curve to the left;
4. Add a second curve to the left;
5. Add a line back to the first point.

Our bottom shape should be the same but mirrored. You could, of course, translate the view so you don't have to code everything again.

Conclusion

Don't forget that, when you code this and find the necessity for it to scale depending on the available space, you will need to make sure to use relative points.

My little tip: I have those assets on Figma, this way, I can design and access the positions of my points and control points. If you can see those positions and want something of various sizes, this will be of great help, since you can calculate the relative positions with them!

Feel free to comment here or send me a message on Twitter.