Bézier Curves Kristine Harwood Iowa State University MSM Creative Component Spring 2009 Heather Bolles, Major Professor Irvin Hentzel, Major Professor Larry Ebbers, Committee Member Where Bézier Curves originated and where they are used page 3 Bézier Curves – Parametric Equations page 5 Bézier Curves on Geometer’s Sketch Pad page 15 Connecting the graph to Algebra page 23 Looking at Bézier Curves with an Excel spreadsheet page 25 Bézier Curves and Fonts page 29 Bézier Curves – the Basics for Students page 37 Classroom exercises page 41 Graphing Calculator Excel Spreadsheet Challenge Problems Bibliography page 48 2 Where Bézier curves originated and where they are used Pierre Bézier (1910-1999) was a French engineer who worked for many years at the Renault automobile company. In the 1960’s and 1970’s he developed a method of producing computer-driven curves to be used in the design of automobiles which came to be known as Bézier curves (Staples, 2005). Bézier curves are used because of their flexibility and high adaptability. While the points of the curve can be attached to a Cartesian coordinate system, they also behave intuitively for the non- mathematician. They can be made to any length and variety of shape, by attaching the endpoint of one curve to the beginning point of another. They can be expanded to make Bézier surfaces and B-splines, both topics that will not be covered in this paper, but which are highly interesting to those who work in computer design programs. I was first intrigued with Bézier curves during a computer algorithms course. The subject was mentioned only briefly, and the idea of a curve being influenced by points that were not on it was one that tugged at my imagination. As I have investigated and become familiar with these curves, I have found another truth – they beg to be played with, much like a wireless puppet. It is near impossible to make a Bézier curve and not move points about to change the shape. On a more intellectual level, these curves have helped me see more clearly how parametric equations behave and can be developed into increasingly complex representations. Professional designers respect Bézier curves (Kirsanov, 1999). The author acknowledges the usefulness and versatility of Bézier curves without delving into the mathematics. He demonstrates the usefulness of these curves in expression and gives numerous artistic and design examples. Mathematicians seem to like them for their connection between usefulness in industry, the connectedness between equation and graph, and the relative ease with which they can be connected together to form an impressive and flexible curve. S.G. Hoggar (2006) describes them as the basis for 3 more complicated B-splines. B-splines are formed in a manner similar to connecting a number of Bézier curves together at their endpoints. Both are used to create and analyze curves in computer imagery. An internet search today finds the term “Bézier curves” in computer graphic design, digitizing and animation programs and mentioned specifically as used in the programs Inkscape, Adobe Illustrator, Adobe Photoshop, General Image Manipulation Program, Adobe Flash, Adobe After Effects, Macromedia Freehand, and Microsoft Expression Blend. Bézier curves are the basis for many computer generated fonts, most notably Adobe Type fonts. There is a wide variety of font styles, as is apparent to the user of any word processing program. The advantage to a font using a basis of Bézier curves is that the character’s size is easily scalable. Since Bézier curves are vector drawings, the lines they produce remain crisp and sharp when they are enlarged. By comparison, a raster image is formed by pixels, and this type of image loses sharpness as it is enlarged, showing the box-like pixels on its edges. (Groleau, 2002) The Bézier curve provides a meaningful bridge between algebraic equation and graceful curve. Through the use of parametric equations and dynamic graphing, an elegant and flexible curve can be produced. Throughout this paper, parametric equations and the mathematics of a Bézier curve will be explored. Graphs and constructions will be displayed using a variety of technology programs. Several exercises linking the two will be presented and an introduction for students and a sampling of student activities will complete the paper. 4 Bézier Curves – Parametric Equations The equations for Bézier curves are parametric equations. A parametric representation is a curve that is determined by coordinate pairs of (x,y) points graphed on an x-y plane but in which the y value is not determined directly from the x-value nor is the x-value determined from the y-value. The two values of the point are determined separately with another variable, the parameter, which many times is the variable t and represents a time variable (Purcell and Varberg, 1984). A straight line can be determined by a pair of parametric equations. Let a segment begin at point A and end at point B. Let the external parameter be t. Since the segment has a beginning and end, the parameter must be on a closed interval. Let the beginning of the interval be at t = 0 and let it end at t = 1. The equation for x will need to be calculable from the x-value at endpoint A when t = 0 to the x- value at endpoint B when t = 1. To determine the parametric equation, the x-value at A (call this ax) is multiplied by (1 - t) and added to the x-value at B (call this bx) multiplied by t. Therefore the parametric equation for the x-variable of a straight line can be expressed as: x = f(t) = (1 – t) ax + t·bx Similarly, the y-value can be calculated as: A(ax,ay) B (bx,by) y = g(t) = (1 – t) ay + t·by If the two endpoints of the segment are B and C, the parametric equations are: x = f(t) = (1 – t) bx + t·cx B (bx,by) C (cx,cy) y = g(t) = (1 – t) by + t·cy 5 Consider a point P1, determined by a certain ratio along AB . A P1 B Consider another point, Q1, determined by the same ratio along BC . B Q C 1 Since the two ratios are the same, they can be considered as having the same t-value. If this new point, P1, on moves, the new point on , Q1, moves as well, always with the same ratio. A P1 A B C Q1 P1 A B Q1 C P1 B C Q1 6 Consider the segment between these two new points, P1QAB1 . Consider a point, P2, determined using the the same ratio (and the same t –value) along this line segment. A BC P1 P2 B Q1 C Now there are three places where the t-value is at work; in on point P1, in on point Q1, and in and point P2. A A P1 P2 B Q1 C P1 P2 B Q1 C 7 The curve traced by this inner third moving point (P2) is the Bézier curve. The equation for this curve of points can be arrived at by using the beginning x – value of segment AB , i.e. (1 – t) ax + t·bx and the ending x-value of segment AC, ie. (1 – t) bx + t·cx, since that is where the path starts and where it ends after tracing its curve from t = 0 to t = 1. Apply the original parametric equation f(t) = (1 – t) ax + t·bx, we arrive at fx(t) = (1 – t) [ (1 – t) ax + t·bx] + (t) [ (1 – t) bx + t·cx] 2 Simplifying fx(t) = (1 – t) ax + t(1 – t) bx + (1 – t) (t) bx + t(t) ·cx 2 2 = (1 – t) ax + 2t(1 – t) bx + t cx 2 2 Similarly gy(t) = (1 – t) ay + 2t(1 – t) by + t ·cy This is a quadratic equation and is the equation for a Bézier curve with two endpoints and one control point. This equation can also be arrived at by using the moving t parts; (1 – t) + t, and squaring: [(1 – t) + t]2 = (1 – t)2 + 2t(1-t) + t2 and including as coefficients the values of each of the three points: 2 2 fx(t) = (1 – t) ax + 2t(1 – t) bx + t cx 2 2 gy(t) = (1 – t) ay + 2t(1 – t) by + t cy For a cubic equation, that is, for the equation of a Bézier curve with two endpoints and two control points, we can cube this expression: [(1 – t) + t]3 = (1-t)3 + 3t(1-t)2 + 3t2(1-t) + t3 and inserting coefficients, arrive at the equations: 8 3 2 2 3 fx(t) = (1-t) ax + 3t(1-t) bx + 3t (1-t) cx + t dx 3 2 2 3 gy(t) = (1-t) ay + 3t(1-t) by + 3t (1-t) cy + t dy The equation can continue to be made more complex and raised to a higher degree. Add a third control point and we reach a fourth degree polynomial with coefficients derived from the binomial theorem: 4 3 2 2 3 1 4 fx(t) = (1-t) ax + 4t(1-t) bx + 6t (1-t) cx + 4dxt (1-t) dx + t ex 4 3 2 2 3 1 4 gy(t) = (1-t) ay + 4t(1-t) by + 6t (1-t) cy + 4t (1-t) dy + t ey As a control point is added, another segment is added as well as an increasing number of moving points determined by the t-variable. For each additional point, another term is added to the polynomial, the degree of the equation increases, and the coefficients follow the pattern identified with the binomial theorem.