anIDEA

Bézier curves are one of the more beautiful applications of math.

Not only are they pretty to look at, but they have many practical applications as well. Bézier curves are often employed to smoothly and naturally model the animation of objects. They’re also useful in vector art, allowing an image to be scaled infinitely without loss of quality. If you’ve worked with popular graphics and design applications, such as Photoshop, Illustrator, Flash, or InDesign, you may be familiar with Bézier curves as “paths.” Paths are vector-based curves whose underlying implementation builds upon the Bézier algorithm described here.

Up until recently, Bézier curves were some mathematical wonder that could only be represented with fancy calculus equations.

And while the Wikipedia Article on Bézier Curves didn’t seem to do much to refute this perception at first, the animated examples further down the page revealed the simplicity, straightforwardness, and beauty of the algorithm, which goes something like this:

First Order Beziers

To begin, pick the order of the curve you wish to draw, from 1 to infinity. This is where you may have seen the term “quadratic Bézier” or “cubic Bézier”, these are 2nd and 3rd order curves. Then pick and plot the anchor points that will be used to draw your 1st order curves. You should select an amount of anchor points equal to your order + 1.

Starting with your 1st order curves (which are actually straight lines), and all the way until the highest order curve, step through a position on the curve from 0 to 1. You can think of this as the percentage of curve completion, 0 being no curve, and 1 being a complete curve. You should select a small number to increment the step each round, such as 0.01.

At every step, calculate what I like to call the “midpoint” of the two points one level earlier. The term “midpoint” is technically misleading but makes the concept easy to visualize: a midpoint is the point halfway between two points. Instead of the halfway mark, though, we will be calculating the at Nth percent of the way from point 1 to point 2, where N is the current step; so that when our current step is 0.3, we calculate the point 30% of the way from point 1 to point 2, for example.

We can generalize the basic midpoint function (the easy case of 0.5 or 50%):

public function findMidpoint(p1:Point, p2:Point):Point
{
return new Point((p1.x+p2.x)/2, (p1.y+p2.y)/2);
}

to:

public function findMidpoint(p1:Point, p2:Point, step:Number):Point
{
return new Point((p1.x * step) + (p2.x * (1 - step)), (p1.y * step) + (p2.y * (1 - step)));
}

This function takes two points, and returns a new point where its components are closer to the first point when the step is closer to 0, and closer to the second point when the step is closer to 1.

If we plot these points, we will have something like this:

This simple routine is the basic building block of Bézier curves.

Quadratic Beziers

A quadratic, or 2nd order Bézier curve, takes, at every step, the current midpoint values of the 1st level lines (there are two of these), and gets the midpoint between those, as seen below:

Cubic Beziers

A cubic, or 3rd order Bézier curve, pictured in white below, takes, at every step, the current midpoint of the 2nd level curves before it, pictured in red:

5th Order Beziers

We can generalize the algorithm to the following: at every step, iterate from order 1 to order O, for every point of order O at index i, take the points i and i+1 at order O-1, and find the midpoints between them. Below is a fifth order Bézier curve (white), built iteratively from the earlier orders: 1st, not pictured; 2nd, red; 3rd, green; and 4th, blue:

8th Order Beziers

Processing power is the only limit! Here’s a larger example of 8th order Bézier curves, drawn perpetually. Be forewarned, this is hypnotizing.

Source Code

The source code for the larger, generalized example, is available here.

Follow the author: @Nolithius Follow AgencyNet: @agencynet

blog comments powered by Disqus