Cubic Bezier Curve
Bezier Curve Description
The Bezier Curve is one of the most used parametric curves. It is used extensively in computer graphics and computer aided design(CAD). The cubic curve can be defined by four points. An algorithm to draw the curve involves multiple linear interpolations using t as a parameter that goes from zero to one.
Step 1: Linearly interpolate between each successive pair of points based on t.
- PAB = (1-t) PA + t PB
- PBC = (1-t) PB + t PC
- PCD = (1-t) PC + t PD
- ABx = (1-t) Ax + t Bx
- ABy = (1-t) Ay + t By
- PABC = (1-t) PAB + t PBC
- PBCD = (1-t) PBC + t PCD
- T = (1-t) PABC + t PBCD
Applet Description
The applet shows two graphs. The left pane shows the x and y coordinates while the right pane shows the x and y values with respect to the t parameter. The left pane shows four control points that can be moved, several check boxes and a slider for the t value.
The check boxes functions
- Show Point : Shows the point at the t value of the slider
- Animate : Starts incrementally increasing the t value. Used in conjunction with Show Trace will draw points along the curve.
- Show Trace : Draws points as the slider is moved, keeping all points
- Show Path : Draws the Bezier curve for the control points
- Show Lines : Draws the lines connecting the control points and lines connecting the intermediate interpolated points.
Activities
- Turn on animation and watch how the plus point moves from A to B. Also watch on the right graph window how the x and y values change with t.
- Turn on show trace to see the curve traced out. Watch both graphs.
- Stop animation and turn on show lines. This shows all of the linear interpolation points on lines. Move the t slider to see how the points and lines move.
- Turn the trace off and show the path.
- Move the control points and observe how the curve changes.
- Try to make the curve into
- Sine wave
- A ribbon
- A circle
- A Vee
Properties
The usefulness of a Bezier Curve is how it can be easily manipulated. Transforming (translation, scaling, rotation, reflection) the control points transforms the curve in the same way.
Another property is that the curve is always inside a convex hull formed by the control points. This is useful because a bounding box can be defined where the curve is inside the box. Knowing the curve is inside an area is very helpful for looking at interactions and intersections.
A simple method for finding a bounding box is to rotate all the control points so that the line from A to D aligns with the x axis. Then taking the minimum and maximum values of the control point coordinates defines a box in the rotated frame that contains the curve. Rotating this box back to the original orientation then defines a bounding box. The Show Bounding Box in the below applet will show this box.
A related property is that the curve can be easily split into two curves. Turn on show lines and move the t slider to about the middle. The curve can be split into two curves by using the intermediate points. The curve defined by the control points A, AB, ABC, and T will define one curve and the control points T, BCD, CD, and D define another curve. Show Split will highlight the first curve.
With both Show Bounding Box and Show Split selected the bounding box for the split curve is shown. Notice that as the curve gets shorter by moving t toward zero the bounding box approaches a line. This is one of the reasons Bezier Curves are use so much in Computer Graphics. A computer can draw a straight line easily so a curve can be split until the bounding box gets close enough to use a straight line to represent a piece of the curve.