Monday, December 3, 2012

Bézier Curves and Beyond!

From someone who has studied engineering in school and likes to think mathematically, I was fascinated by how mathematics can be applied to graphics design when reading about Bézier Curves in Chapter 24 of Megg's History of Graphic Design. Meggs discusses Bézier Curves on page 531 of her textbook. She mentions that "Type characters are generated as outlines that are then filled in as solid forms. The curved lines of the characters are formed of Bézier spines." I think this is a very great lead-in for the last chapter of the text called "The Digital Revolution--and Beyond." The use of technology, science, and mathematics have made graphical design so much more scalable, robust, and far-reaching into newer areas and techniques.

I do wish that Meggs had spent more time in this chapter discussing how technological advancements and science have influenced graphic designs and go deeper into how some of this technology works. But I assume that there is so much to discuss in this chapter, that she may have been unable to do so.

Before I started to write this blog post, I flipped through the entire chapter and looked at all the examples of graphic design in the pictures and the trend I see is how technology and computers were really the necessary component that allowed for the ability to make the designs in the chapter. Technology has indeed led to an explosion of new fonts, techniques, and ultimately creative design. The application of Bézier Curves is one example of technology that I will discuss to demonstrate how it has transformed the graphic design industry and allowed for artists to stretch their capabilities in design.

We never really appreciate the technology behind many of the graphic design works that are produced today. For example, the mathematical concepts behind how fonts are made. What a vector graphic actually is? How does Adobe Illustrator and PostScript technology work? I'm happy that this chapter marries technology and math with art and have gained a better appreciation over the science that goes into graphic designs.

Bezier Curve. Source: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0J2byotNkFeIZ4iRo0rpELQtkHwighYL950dHqTpFHxu5qWV6CA

Bézier Curves are named after the French mathematician Piere Bézier who, in 1962, actually patented and widely popularized but did not invent this mathematic principle (http://en.wikipedia.org/wiki/Pierre_B%C3%A9zier). Bézier studied and used these in his work when designing automobile bodies, but he took them from the mathematician Paul de Casteljau using de Casteljau's algorithm.

Piere Bezier. Source: http://www.vonglitschka.com/images/pierre_bezier.jpg

A Bézier curve is a parametric curve. It is frequently used in computer graphics and related fields and has been a foundation for vector graphics used in computer software for designers. Bézier curves are used to create "Paths"for these image manipulation programs, working as combinations of Bézier curves that are linked together. We also see the application of Bézier curves in animation. By adding a time component, it can be used as a useful tool to control motion.

I can go very deep into the mathematical theories and principles of Bézier curves. But it may be too technical for the purposes of this blog. Just to give you some taste of the mathematics for my personal gratification, I'll show you the mathematical function for linear Bézier curves, or a straight line, where P0 and Prepresents the start and end point of the line:

\mathbf{B}(t)=\mathbf{P}_0 + t(\mathbf{P}_1-\mathbf{P}_0)=(1-t)\mathbf{P}_0 + t\mathbf{P}_1 \mbox{ , } t \in [0,1]

While a quadratic Bézier curve, or parabolic curve, is represented by the following function:

\mathbf{B}(t) = (1 - t)[(1 - t) \mathbf P_0 + t \mathbf P_1] + t [(1 - t) \mathbf P_1 + t \mathbf P_2] \mbox{ , } t \in [0,1]

Cubic Bezier Curve. Source: http://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/Bezier_curve.svg/300px-Bezier_curve.svg.png

So what are the applications of Bézier Curves we see today in graphics design? We see it as the standard curve of PostScript languages as vector programs that industry designers use today. Anyone who has worked in Adobe Illustrator, CorelDRAW and Inkscape have been using Bézier Curves. In fact, most outline fonts, as discussed in chapter 24 of Megg's History of Graphic Design are TrueType and PostScript Type 1 fonts that have been developed using Bézier curves. Even business application use it. The "smooth curve" feature of charts in Microsoft Excel also uses the Bézier Curves algorithm.

Use of Bezier curves to construct type. Source: https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTiziyPZNyoWd3YH0APe6P6j7GU6PchPKU-Z0rGR0xJhfJ-MsCW
Bezier curves are the foundation of vector graphic design programs. Source: https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTXJbXBHmnz3m4CzxNT0anxGOkt-i5bnDCuUN7fjZ8xgbg27uNMbg

From cave petroglyths to computer-aided technology in graphics design, we've come a long way throughout the history of the world! I now feel I've gained a comprehensive study of graphics design throughout the development of man. What is the next stage in graphics design? 3-D, realistic imagery? Images sent directly in our brain without the use of any medium such as paper, photographs, or posters? Maybe in another 100-200 years, students who will be studying the history of graphic designs would be blogging about this new advanced technology like I'm doing today.

What is the future of graphic design? Source: https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRm60avLbVKRK_GT2o6dtlyrrD0rGNjtHkO7gi9Ly5SBUIPqww2lQ

Sources:

Meggs and Purvis. "History of Graphic Design." 5th edition. John Wiley & Sons, Inc. 2012.
http://en.wikipedia.org/wiki/B%C3%A9zier_curve
http://en.wikipedia.org/wiki/Pierre_B%C3%A9zier
http://graphicssoft.about.com/od/glossary/l/blbezier.htm