Charles Petzold



Text Deformation Based on Bézier Splines

November 29, 2009
New York, N.Y.

In previous blog entries I showed how to use a WPF program (called TextOutlineGenerator and available from here) to generate text outlines that you can then use in Silverlight programs for some interesting effects. This morning I woke up with an idea to deform a whole character string based on two Bézier curves.

Conceptually, the math is fairly straightforward: Consider a text string whose character outlines are polylines. The entire text string is definable as a bunch of Point objects. Each of these Point objects is within a Rect bounding box. Although the Point objects define an actual coordinate position, they can also be expressed as fractional coordinates (xFraction, yFraction) relative to the bounding box, where xFraction and yFraction range from 0 to 1.

One Bézier curve is aligned with the top of the bounding box, and the other with the bottom of the bounding box. As you change the end points and control points of these two Bézier curves, each point that defines the text string is moved to a new location. That location is calculated by using xFraction as the dependent variable t in the two Bézier formulas to get a point on each of the Bézier curves, and then using yFraction to calculate a weighted average of those two points.

You can run the program from here:


ClickAndDeformText.html

As the name of the program suggests, you click to go into deformation mode. You click again to return the display to normal. Here's the source code.