Drawing 2D Bezier Curves


This page is under construction: July 2004


Links

Wikipedia

For most of the 80's and 90's, I was a senior programmer at Corel, and we wrote CorelDraw, one of the leading graphics software packages at the time.

During the development of 'Draw, I became familiar with some of the in's and out's of drawing Bezier curves in 2D. I thought that I'd write this up, to share what I learned.

Rendering

....blah blah blah....

To demonstrate these techniques, I wrote a little Python app which you can get here. This will run on Windows, Mac & Linux/Unix.

After I wrote that Python version, I did a Java version, with source here and here.

Click 4 times in the left hand pane, to establish 4 control points. You can then drag them around the screen.

For the polyline rendering, try viewing the drawing depths of 3, 4 and 5 (corresponding to 8, 16 and 32 line segments).

For the line-halfing rendering, study the effect first at depth 1 and 2.

Splitting

.... more to come......

The easy splitting of a quadratic bezier at the mid point is this:

Given Q(t) = A*(1-t)*(1-t) + 2*B*(1-t)*t + C*t*t
where 0<=t<=1, the midpoint is Qm = (A+2B+C)/4

You can split Q(t) into a left and right half, using
D = (A+B)/2
E = (B+C)/2
Qm = (A+2B+C)/4 = (D+E)/2
Qleft(t) = A*(1-t)*(1-t) + 2*D*(1-t)*t + F*t*t
Qright(t) = F*(1-t)*(1-t) + 2*E*(1-t)*t + C*t*t

Approximating a conic

For those of you who want the quick answer, here it is: The best approximation of a circle is to use cubic beziers, and create the circle out of 4 of these. For a unit circle, the first quadrant points are:

  (1,0)    (1,0.55)    (0.55,1)    (0,1)
where the 0.55 is (sqrt(2)-1)*4/3 = 0.552284749831, but 0.55 is close enough. You create the other three quadrants by reflection.

Ok, here's some details.

......to be written


Contact me

Back