Bezier curve

The Bézier Curve is a type of spline curve with two end points and two control points.
Best used to calculate the position of an object traveling along such a curve at a particular time (t).


{note:

point₀ = end point 1
point₁ = control point 1
point₂ = control point 2
point₃ = end point 2

}

x(t) = A_xt³ + B_xt² + C_xt + x₀

where:

C_x = 3(x₁ - x₀)
B_x = 3(x₂ - x₁) - C_x
A_x = x₃ - x₀ - C_x - B_x

or in a single line:

x(t) = (x₃ - 3x₂ + 3x₁ - x₀)t³ + 3(x₂ - 2x₁ + x₀)t² + 3(x₁ - x₀)t + x₀


Y and even Z (if in 3D) are exactly the same.

y(t) = A_yt³ + B_yt² + C_yt + y₀
y(t) = (y₃ - 3y₂ + 3y₁ - y₀)t³ + 3(y₂ - 2y₁ + y₀)t² + 3(y₁ - y₀)t + y₀

z(t) = A_zt³ + B_zt² + C_zt + z₀
z(t) = (z₃ - 3z₂ + 3z₁ - z₀)t³ + 3(z₂ - 2z₁ + z₀)t² + 3(z₁ - z₀)t + z₀



If derived, the equations can then be used to find the relative velocity of the object.

v_x(t) = 3A_xt² + 2B_xt + C_x


...and again for the acceleration.

a_x = 6A_xt + 2B_x

Strictly speaking, a Bézier Curve can have any number of control points and is defined by the formula:

        N           N!     k      1-k
B(u) = sum P(k) --------- u *(1-u)
       k=0      k!*(N-k)!

Where N is the number of the last point, P(k) is point #k, and u is the distance along the curve, where u=0 is the beginning = P(0) and u=1 is the end = P(N).

This can be simplified to:

• One point:

  B(u) = P(0)
  

• Two points:

  B(u) = P(0) * (1-u) + P(1) * u
       = P(0) + u * (P(1) - P(0))
  

• Three points:

                     2                              2
  B(u) = P(0) * (1-u)  + P(1) * 2*u*(1-u) + P(2) * u
                                2                    2         2
       = P(0) - 2*P(0)u +  P(0)u  + 2*P(1)u - 2*P(1)u  +  P(2)u
                                  2
       = P(0) + u*2*(P(1)-P(0) + u *(P(2)-2*P(1)+P(0))
  

• Four points:

                     3                   2             2                 3
  B(u) = P(0) * (1-u)  + P(1) * 3*u*(1-u)  + P(2) * 3*u *(1-u) + P(3) * u
  

  which is equivalent to what Monolith has given above.

As you get more control points, the polynomial produced is of a higher degree, so in most cases four control points are used. The curve is tangent to the line formed between each pair of end points (ie, P(0) & P(1) and P(N-1) & P(N)), so curves can be easily fit together smoothly.

Windows can draw 4-point bezier curves through the GDI functions PolyBezier (which takes a start point and three additional control points per curve), PolyBezierTo (which uses the current position as the first control point and takes three more per curve), and PolyDraw (which can be used to draw lines and bezier curves in one call).

Formula is from http://astronomy.swin.edu.au/pbourke/curves/bezier/

Bezier curves is one of the simplest instances of a spline curve. The general idea of a spline is that given n basis functions P_i:R→R and n control points v_i∈R², we define a parametric curve x:[0,1]→R² by letting x(t) = Σv_iP_i(t). In order for the curve to interact nicely with affine transforms, we usually want the basis functions to sum to unity, that is Σ P_i(t) = 1 for all t∈[0,1]. The typical use is in CAD/CAM or vector-based illustration programs, where the user will use a point-and click interface to place the control points, and then interactively drag and drop them until the resulting curve looks as it should.

Bezier curves where developed by Pierre Bezier at Renault in the late 1960s to be used in their early CAD/CAM software. In car design, there is an obvious interest in having a simple way to specify smoothly bending curves. (Interestingly, Paul de Casteljau at Citroen had already developed exactly the same curves, but he was not allowed to publish by his company so the they now bear Bezier's name).

The basis functions in Bezier curves are based of the formula in the binomial theorem: (t+(1-t))ⁿ = Σ C(n,i)tⁱ(1-t)^n-i. The n-degree Bezier basis functions are defined by P_n,i(t) = C(n,i)tⁱ(1-t)ⁱ (We will use the convention that C(n,i)=0 if i<0 or i>n). Thus the n-degree basis functions are a set of n+1 polynomials of degree n. For example any four points can be used to specify a cubic Bezier curve.

We can immediately see that the basis functions sum to one: P_n,0(t) + P_n,1(t) + ... + P_n,n(t) = ((1-t)+t)ⁿ = 1ⁿ = 1. When t=0, P_n,1(t)=1 and all the other functions are 0, so x(0) = v₀. Likewise x(1)=v_n, so the defined curve begins at the first control point and ends at the last one. Since the functions always sum to one, the curve will be contained inside the convex hull of the control points. (In more graphical terms, if you snap a rubber band around the control points, the Bezier curve they define will be contained inside it).

We can also say something about the derivative. Differentiating term-wise, we find x'(t) = -n(1-t)^n-1v₀ + Σ{ C(n,i)(it^i-1(1-t)^n-i - tⁱ(n-i)(1-t)^n-i-1)v_i} + nt^n-1v_n (where the summation ranges from i=1 to i=n-1). In particular, x'(0) = n(v₁ - v₀) and x'(1) = n(v_n - v_n-1). So the direction and speed with which the curve leaves the first control point is directly proportional to the vector from the first to the second control point, and similarly it arrives at the last control point with a direction and speed proportional to the vector between the next-to-last and the last control point.

A cubic polynomial is specified completely by giving its value and derivate at two points, so the four control points of a cubic Bezier curve provides a very intuitive user interface: you specify the endpoints and the initial and final direction of the curve, and the curve will smoothly interpolate between them. At the same time, cubics are sufficiently rich to describe many curves that are useful in practice (in particular, they can have a point of inflexion) so degree-3 Beziers are a good compromise between usability and expressivity, and are what are usually used.

To specify more complicated shapes, several cubic Beziers can be put after each other. As long as the last control point of each curve coincides with the first point of the following curve, the sequence will trace out a continuous path. Furthermore, if the vector from the third to the forth point of one curve is equal to the vector from the first to the second point of the next, the path will as we have seen have a continuous derivative so it will look smooth. The user interface of a design program will hide these details from the user. Typically, one can enter a string of points that the path will interpolate between, and then adjust the tangent of the curve at each of the points. By designating a point as a "corner point", the program will drop the restriction on the derivative, so one can make paths with e.g. sharp 90-degree corners. Unfortunately there is no simple condition that ensures a continuous second derivative, so for applications that require that, some more complicated kind of spline is needed (e.g. NURBS or subdivision surfaces).

Yet another way of describing Bezier curves can be got by noting that the basis functions satisfy the recurrence P_n,i(t) = t P_n,i-1(t) + (1-t) P_n-1,i(t). (This follows from the identity C(n,i) = C(n-1,i-1)+C(n-1,i)). So the n-degree basis functions are in a sense linear interpolations of the (n-1)-degree ones. Given control points v₀, ..., v_n, we can construct the n-degree interpolating curve z(t) by first forming the (n-1)-degree curves x(t) between v₁ and v_n, and the (n-1)-degree curve y(t) between v₀ and v_n-1, and then setting z(t) = t x(t) + (1-t) y(t). Paul Cox[1] describes a nice illustration of this idea. Consider drawing the quadratic Bezier between three control points v₀, v₁, v₂. The linear Beziers x(t) and y(t) are of course straight lines from v₁ to v₂ and from v₀ to v₁. Now we can construct the quadratic by first connecting the midpoints of x and y by a straight line and marking the midpoint on it, then drawing a line between the point a quarter along the way of x and a quarter along the way of y and marking the point a quarter along the way of that line, etc. If you look at the picture thus constructed, it looks very much like the pictures we all drew in school using a ruler during boring art classes, or the "sculptures" you get by tying strings between equidistant nails on a wooden frame. Bezier curves are the mathematics of string art!

The same principle has a more directly useful application: it gives a way to split Bezier curves. Consider a cubic Bezier curve x(t) between the points q₀, q₁, q₂, q₃ (drawing this with pen and paper will help). Now let r₀ = (q₀+q₁)/2, the point halfway between q₀ and q₁, and similarly let r₁ = (q₁+q₂)/2, r₂ = (q₂+q₃)/2. Continue this way and let s₀ = (r₀+r₁)/2, s₁ = (r₁+r₂)/2, and finally let t = (s₀+s₁)/2. The point t we have constructed in this way will lie on the curve; in fact from the discussion in the previous paragraph it is clear than t = x(1/2). Of course, had we instead split each line segment in thirds, we would have obtained the point at x(1/3), etc. While not as obvious, it is in fact the case that the cubic Bezier curve defined by the four points q₀, r₀, s₀, t will coincide exactly with x([0, 0.5]). So we have taken our original cubic Bezier curve, and split it into two segments with independent control points. This is exactly what is needed in an interactive design program: the user can first sketch out the rough shape of an object using a few curves, then introduce extra control points on the curve where more detail is needed and make adjustments without disturbing the rest of the shape.

Another use for this subdivision scheme is as an efficient algorithm for rendering Bezier curves using line segments. As we split the curve, the control points get closer and closer to the curve proper. Eventually they will be less than a pixel away from it, which means that we can safely approximate the curve with a single line segment from the first to the last control point. So to render a curve we can use the following procedure: first check if it is flat enough, if so draw a single line segment, otherwise split it in two and recursively render those. This is known as de Casteljau's algorithm.

Of course, when designing cars what we really want is smooth surfaces rather than just curves. Fortunately splines generalise nicely. Given (n+1)*(n+1) control points v_i,j∈R³ we define a parametric Bezier patch x:[0,1]×[0,1]→R³ by x(t,u) = Σ v_i,jP_n,i(t)P_n,j(u) (where the summation ranges over both i and j). This deforms the unit square into a curved patch with sides given by the one-dimensional Bezier curves between the "border" control points. Bezier patches can also be rendered using subdivision, although one must take some care with the "topology" of the subdivided mesh to avoid creating a surface with small gaps in it.

Currently, the main application of Bezier curves is in vector-based 2D illustration programs like Adobe Illustrator, and in describing scalable fonts. Both TrueType and PostScript fonts are specified in terms of Bezier curves. In CAD/CAM applications they have been replaced with the more general NURBS (which give Bezier curves as a special case), and 3D-graphics programs that only generate pretty pictures have generally moved to subdivision surfaces.

References:
Paul Cox. "The Mathematics of String Art: A Tribute to Pierre Bezier (1910-1999)". http://members.cox.net/mathmistakes/bezier.htm

These are some extremely detailed definitions and I don't even have the math to say if they are correct. But what does it all mean to the user?

If you draw -- say, a fish -- in Photoshop, you will essentially be spraying loose pixels into a window. You can do some neat things with that, but if you scale, rotate, or distort your fish, your results may not be good. The curve -- say, the belly -- may start to look jaggy; it may start to look as if it were built out of little blocks. And if you drew a yellow fish against blue water, Photoshop will make this look good by anti-aliasing -- by drawing some of the pixels along the curve in various shades of green. If you change your mind, and decide the water will be, say, pink, the curve will look all wrong. This is because Photoshop does not know that the belly is a curve, or anything else. Once drawn, the fish and the water are all equally loose pixels.

If you draw the same fish in Freehand, using bezier curves -- with the pen tool -- Freehand remembers those curves as curves. Whenever the program attempts to render, or draw the curve onscreen or on paper, it will convert it to pixels. It will do this conversion freshly for each and every new render. You can transform the curve -- rotate it, even change its shape -- and it will not fall apart into a jaggy scratch.

In Freehand, a bezier curve appears as the curve itself, together with its control points. Drag the control points to change the shape of the curve. A little hands-on experimentation will make it clear what's happenning, and no math is needed.

Other shapes, such as circles, are internally drawn with bezier curves. If you draw a small circle in Photoshop, and scale it up, it will look like a blob. But if you draw even a tiny circle in Freehand, and scale it way up to look very big, it will still be a perfect circle. If you select the circle and choose "Ungroup" and "Unjoin", it will come apart into the bezier curves of which it is made, and you can alter them as you would any other.

A good way to make complex drawings is to make all the basic shapes in Freehand, then export them as one or more EPS files. You can import EPS into Photoshop, which will do a high-quality render; at this time, you can composite, and apply shading and special effects. If you later need a larger rendering, or need to change the background or rotation; go back to the EPS file, import it again, and work with the new rendering.