12,451,243 members (50,858 online)
Add your own
alternative version

218.1K views
10.7K downloads
91 bookmarked
Posted

# Bezier Curves Made Simple

, 14 Apr 2008 CPOL
 Rate this:
Please Sign up or sign in to vote.
A simple implementation of the famous Bezier curves in C#. Easy to understand.

## Introduction

Bezier curves are the most fundamental curves, used generally in computer graphics and image processing. These curves are mainly used in interpolation, approximation, curve fitting, and object representation. In this article, I will demonstrate, in a very simple and straightforward way, how one can construct these curves and make use of them.

## Background

Bezier curves are parametric curves which are pretty much customizable and smooth. They are well suited for many applications. They were named after Pierre Bézier, a French mathematician and engineer who developed this method of computer drawing in the late 1960s while working for the car manufacturer Renault. People say that at the same time the same development took place during the research of Ford. There is still a confusion about who found it first.

Because of my imaging background, my article will mainly focus on interpolation and curve fitting. In interpolation, what one would simply like to do is to find unknown points using known values. This way, a discrete case can be represented with a more continuous structure, and we can have a well defined curve for missing points. The curve is initialized with certain data points, and it tries to generate new ones that are approximating (or interpolating) the old values.

##### Constructive Bezier Curve Algorithm

Consider the n+1 points P0,…,Pn and connect the points into a polyline we will denote hereafter as the control polygon.

Given points Pi, i = 0,...,n, our goal is to determine a curve g (t), for all values t Î [0,1]. The idea is demonstrated below:

##### Basic Algorithm

The objective here is to find points in the middle of two nearby points and iterate this until we have no more iterations. The new values of points will give us the curve. The famous Bezier equation is the exact formulation of this idea. Here is the algorithm:

Step 1: Select a value t Î [0,1]. This value remains constant for the rest of the steps.

Step 2: Set Pi[0] (t) = Pi, for i = 0,...,n.

Step 3: For j= 0,...,n, set for i = j,...,n.

Step 4: g (t) = Pn[n] (t)

##### Special & General Cases

Now, I will give formulas for common, special cases that can be helpful in certain applications. The code of the article does not demonstrate any of them, but it uses the generalized formula. So, let me start with the generalized formula:

For the sake of simplicity and convention used in this article and code, it is better to represent this formula as:

What this equation tells us is nothing but the formulation of the above algorithm (the mid-point iterations). It is very important in the sense that a whole algorithm could be summarized into a formula and a straightforward implementation would yield correct results. Here, n denotes the number of points and P denotes the points themselves. The factorial coefficients of the points are simply called the Bernstein basis functions, because of the name of the founder.

Here are the special cases:

Linear Bezier:

Quadratic Bezier:

Cubic Bezier:

## Understanding and Using the Code

This is the function, doing all the work. I think it is very short and very easy. Because we are dealing only with 2D curves, we have points in X and Y coordinates. The function simply calculates the Bezier points.

```public void Bezier2D(double[] b, int cpts, double[] p)
{
int npts = (b.Length) / 2;
int icount, jcount;
double step, t;

// Calculate points on curve

icount = 0;
t = 0;
step = (double)1.0 / (cpts - 1);

for (int i1 = 0; i1 != cpts; i1++)
{
if ((1.0 - t) < 5e-6)
t = 1.0;

jcount = 0;
p[icount] = 0.0;
p[icount + 1] = 0.0;
for (int i = 0; i != npts; i++)
{
double basis = Bernstein(npts - 1, i, t);
p[icount] += basis * b[jcount];
p[icount + 1] += basis * b[jcount + 1];
jcount = jcount +2;
}

icount += 2;
t += step;
}
}```

The rest of the functions are only helper functions taking part in factorial calculations and basis function calculations, which I believe are pretty obvious. To properly use this function, give it a set of points in the format: XYXYXYXYXYXYXYXYXYXY.... coordinates and how many points you would like to calculate on the curve. The function will fill the `p` array with the path points.

## Points of Interest

Because of the limitations of factorial calculations, the code could only calculates curves up to 32 points. More complicated structures are generally represented by a combination of these curves (as in Adobe Photoshop, Illustrator, and Flash - path tool).

Even though GDI has a built-in Bezier curve calculation function, it is never good for learning to use built-in libraries. You won't always have GDI to do things for you! At some place, some time, you may have to implement it, and I think by now, you should have a rough idea of how these curves work.

## License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

## About the Author

 CEO Gravi Information Technologies and Consultancy Ltd Turkey
Currently, also an MSc. student in Technical University of Munich, I develop practical application in computer vision for more than 5 years. I design real-time solutions to industrial and practical vision problems, both 3D and 2D. Very interested in developing algorithms in C relating math and vision.

Please visit Gravi's web page (http://www.gravi.com.tr) and my page (http://www.tbirdal.me) to learn more about what we develop.

I admire performance in algorithms.

"Great minds never die, they just tend to infinity..."

## You may also be interested in...

 Pro Pro

## Comments and Discussions

 First Prev Next
 Nice veen_rp14-Apr-16 0:05 veen_rp 14-Apr-16 0:05
 Re: Nice veen_rp17-Apr-16 19:19 veen_rp 17-Apr-16 19:19
 Could you pls elaborate on "Because of the limitations of factorial calculations, the code could only calculates curves up to 32 points" sr.dekker11-Nov-15 10:05 sr.dekker 11-Nov-15 10:05
 Re: Could you pls elaborate on "Because of the limitations of factorial calculations, the code could only calculates curves up to 32 points" enhzflep25-Nov-15 5:18 enhzflep 25-Nov-15 5:18
 Get bezier point list between two control points. Cyril Clavaud12-Aug-15 1:04 Cyril Clavaud 12-Aug-15 1:04
 Re: Get bezier point list between two control points. Tolga Birdal21-Sep-15 9:13 Tolga Birdal 21-Sep-15 9:13
 3D bezier curve Member 107473408-Apr-15 5:32 Member 10747340 8-Apr-15 5:32
 Ported to C, FWIW Member 110512801-Sep-14 14:34 Member 11051280 1-Sep-14 14:34
 Re: Ported to C, FWIW Tolga Birdal1-Sep-14 14:46 Tolga Birdal 1-Sep-14 14:46
 Re: Ported to C, FWIW Member 110512804-Sep-14 5:48 Member 11051280 4-Sep-14 5:48
 Exactly what I was looking for Member 795460812-Jan-13 12:12 Member 7954608 12-Jan-13 12:12
 Re: Exactly what I was looking for Tolga Birdal4-Aug-13 18:10 Tolga Birdal 4-Aug-13 18:10
 My vote of 5 as4527-Nov-12 6:30 as45 27-Nov-12 6:30
 Answer Member 912643914-Nov-12 9:06 Member 9126439 14-Nov-12 9:06
 Re: Answer Tolga Birdal14-Nov-12 10:10 Tolga Birdal 14-Nov-12 10:10
 Re: Answer Member 167073211-Sep-13 18:23 Member 1670732 11-Sep-13 18:23
 Re: Answer Tolga Birdal11-Sep-13 21:17 Tolga Birdal 11-Sep-13 21:17
 My vote of 5 manoj kumar choubey20-Feb-12 19:11 manoj kumar choubey 20-Feb-12 19:11
 Great work Rainer Halanek17-Mar-11 9:17 Rainer Halanek 17-Mar-11 9:17
 Re: Great work Tolga Birdal17-Mar-11 10:09 Tolga Birdal 17-Mar-11 10:09
 Re: Great work Rainer Halanek9-May-11 4:26 Rainer Halanek 9-May-11 4:26
 Tebrik ederim Erol Esen8-Dec-10 3:54 Erol Esen 8-Dec-10 3:54
 Re: Tebrik ederim Tolga Birdal17-Mar-11 10:32 Tolga Birdal 17-Mar-11 10:32
 How can i get smoother results? ifaris728-Nov-10 9:12 ifaris7 28-Nov-10 9:12
 i'm trying to use the algorithm to generate curvy paths that i will move characters on these paths, but the problem is that this algorithm don't give a smooth curve, how can i fix that ?
 Re: How can i get smoother results? Tolga Birdal28-Nov-10 10:52 Tolga Birdal 28-Nov-10 10:52
 Filled closed bezier? Burisch7-Oct-10 0:01 Burisch 7-Oct-10 0:01
 Re: Filled closed bezier? Sprat Fisher25-Nov-10 20:32 Sprat Fisher 25-Nov-10 20:32
 Re: Filled closed bezier? jeroen van dael21-Apr-11 6:08 jeroen van dael 21-Apr-11 6:08
 My vote of 5 yrodrigu25-Aug-10 5:39 yrodrigu 25-Aug-10 5:39
 Thanks yrodrigu25-Aug-10 5:37 yrodrigu 25-Aug-10 5:37
 Bernstein polynomials jsmars24-Nov-09 12:24 jsmars 24-Nov-09 12:24
 Re: Bernstein polynomials fresi13-Apr-10 14:07 fresi 13-Apr-10 14:07
 Re: Bernstein polynomials Tolga Birdal21-Sep-14 7:43 Tolga Birdal 21-Sep-14 7:43
 Thanks! Grummel24-Apr-08 8:09 Grummel 24-Apr-08 8:09
 Re: Thanks! Tolga Birdal24-Apr-08 9:02 Tolga Birdal 24-Apr-08 9:02
 Re: Thanks! Grommel27-Apr-08 6:05 Grommel 27-Apr-08 6:05
 Re: Thanks! Tolga Birdal27-Apr-08 7:40 Tolga Birdal 27-Apr-08 7:40
 Re: Thanks! Grommel28-Apr-08 3:04 Grommel 28-Apr-08 3:04
 Re: Thanks! a-nema19-May-10 4:59 a-nema 19-May-10 4:59
 I think you have an understanding gap Fresric Bouemont14-Apr-08 23:47 Fresric Bouemont 14-Apr-08 23:47
 Re: I think you have an understanding gap Tolga Birdal15-Apr-08 2:27 Tolga Birdal 15-Apr-08 2:27
 Re: I think you have an understanding gap Fresric Bouemont15-Apr-08 23:57 Fresric Bouemont 15-Apr-08 23:57
 Re: I think you have an understanding gap Tolga Birdal16-Apr-08 4:04 Tolga Birdal 16-Apr-08 4:04
 Re: I think you have an understanding gap Fresric Bouemont16-Apr-08 7:52 Fresric Bouemont 16-Apr-08 7:52
 Re: I think you have an understanding gap Tolga Birdal16-Apr-08 9:26 Tolga Birdal 16-Apr-08 9:26
 Re: I think you have an understanding gap Fresric Bouemont16-Apr-08 11:12 Fresric Bouemont 16-Apr-08 11:12
 Re: I think you have an understanding gap Tolga Birdal16-Apr-08 9:35 Tolga Birdal 16-Apr-08 9:35
 Re: I think you have an understanding gap justinctree9-Jun-10 7:37 justinctree 9-Jun-10 7:37
 Last Visit: 31-Dec-99 18:00     Last Update: 27-Aug-16 18:35 Refresh 1

General    News    Suggestion    Question    Bug    Answer    Joke    Praise    Rant    Admin

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.160826.1 | Last Updated 14 Apr 2008
Article Copyright 2008 by Tolga Birdal
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid