Draw Closed Smooth Curve with Bezier Spline

December 17, 2008 I posted an article on how to draw the smooth curve through the set of 2D points with Bezier drawing primitives. Yesterday I got a question on how to draw a closed curve in the same manner. Indeed, there is a difference to open-ended curve.

Equations

Note: to make a sequence of individual Bezier curves to be a spline we should calculate Bezier control points so that the spline curve has two continuous derivatives at the knot points.

Bezier curve at the single interval is expressed as

B(t)=(1-t)3P0+3(1-t)2tP1+3(1-t)t2P2+t3P3

where t is in [0,1] and

1. P0 – first knot point

2. P1 – first control point (at first knot)

3. P2 – second control point (at second knot)

4. P3 – second knot point

First derivative is:

B’(t) = -3 (1 – t)2 P0 + 3 (3 t2 – 4t + 1) P1 + 3 (2t – 3t2) P2 + 3t2 P3

Second derivative is:

B’’(t) = 6 (1 – t) P0 + 3 (6t – 4) P1 + 3 (2 – 6t) P2+ 6 t P3

Let’s consider piece-wise Bezier curve on the interval with n (n > 2) points Pi (0,..,n-1) and n subintervals Si (0,..,n-1).

Si = (Pi, Pi+1) for (i=0,..,n-2)

Sn-1 = (Pn-1, P0) for (i=n-1)

Bezier curve at Si (i=0,..,n-2) will be 

Bi(t) = (1 – t)3 Pi + 3 (1-t)2 t P1i + 3 (1-t) t2 P2i+1 + t3 Pi+1; (i=0,..,n-2)

and the closing Bezier curve at Sn-1

Bi(t) = (1 – t)3 Pn-1 + 3 (1-t)2 t P1n-1 + 3 (1-t) t2 P20 + t3 P0

First derivative at Si (i=0,..,n-2) will be

B’i(t) = -3 (1-t)2 Pi + 3(3t2 – 4t + 1) P1i + 3(2t – 3t2) P2i+1+3t2 Pi+1

and at Sn-1

B’n-1(t) = -3 (1-t)2 Pn-1 + 3(3t2 – 4t + 1) P1n-1 + 3(2t – 3t2) P20+3t2 P0

First derivative continuity condition gives:

P1i + P2i = 2 Pi (i=0,..,n-1)                                                                                      (1)

Second derivative at Si (i=0,..,n-2) will be

B’’i (t) = 6 (1-t) Pi +6 (3t – 2) P1i + 6 (1 – 3t) P2i+1 + 6t Pi+1

and at Sn-1

B’’n-1 (t) = 6 (1-t) Pn-1 +6 (3t – 2) P1n-1 + 6 (1 – 3t) P20 + 6t P0

Second derivative continuity condition gives:

at P0

2 P10 + P1n-1 = 2 P20 + P21                                                                               (2.1)

at Pi (i=1,..,n-2)

2 P1i + P1i-1 = 2 P2i + P2i+1                                                                                (2.2)

and at Pn-1

2 P1n-1 + P1n-2 = 2 P2n-1 + P20                                                                          (2.3)

Excluding P2 form (2.1-3) with (1) we get the set of equations for P1

4 P10 + P11 + P1n-1 = 4 P0 + 2 P1 for P0

P1i-1 + 4 P1i + P1i+1 = 4 Pi + 2 Pi+1 for Pi (i=1,..,n-2)

P10 + P1n-2 + 4 P1n-1 = 4 Pn-1 + 2 P0 for Pn-1

We got the system with the matrix which looks like

4 1 0 0 … 0 1

1 4 1 0 … 0 0

0 1 4 1 … 0 0

……………

1 0 0 0 … 1 4

It’s so-called "cyclic" system which can be solved as effectively as a tridiagonal system with the trick which you can find in the "Numerical Recipes", for example.

After P1’s found it’s easy to get P2’s from (1).

Code and sample

You can download the code and sample application here:
http://cid-39d56f0c7a08d703.skydrive.live.com/embedrow.aspx/.Public/ClosedBezierSpline

It is Visual Studio 2008 solution targeted to .NET 3.5. It contains WPF Windows Application project designed to demonstrate sampled circle drawn with Bezier spline above.

Although I compiled this code in C# 3.0 I don’t see why it can’t be used without any modification in C# 2.0 and even in C# 1.0 if you remove keyword “static” from the class declarations.

Advertisements

About ovpwp

I am engaged in programming, maintenance and supply of computing technique since 1970. Started with the computers M, BESM, Minsk series and received appropriate education in the least, in which it was then possible in THE USSR. Then he went the usual way - ES series, IBM 360/370, Sun Spark, Ibm Power & PS2, PC. Programming started in the code (machine commands), then were sorts of assemblers, Algol, FORTRAN, PL/1, C, C , VB, C#. It is only the ones that I used the production scale; but there were, of course, others like List, Modula, Pascal, Java, etc. Currently I prefer .NET platform for desktop development. I don't really like web-programming (probably because of the inability for quality design), but I have enough experience in site building in LAMP environment using PHP.
This entry was posted in Uncategorized. Bookmark the permalink.

One Response to Draw Closed Smooth Curve with Bezier Spline

  1. Peter says:

    Would you please check the message titled "A mistake in the last equation which causes a strange behavior (corrected)" at http://www.codeproject.com/KB/graphics/BezierSpline.aspx

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s