Home > Flex > Organic Text Part I

Organic Text Part I

October 4, 2010

For those who did not attend 360|Flex, Paul Taylor and I collaborated on an organic text TinyTLF demo.  We are used to thinking about organic text in terms of path deforming, that is, arranging the letters in the text along a general curve or path.  While I’ve illustrated that process for a single spline, the next step is to extend the method to a general path, which may be discontinuous both spatially and in first derivative.  That work is in progress.

Another way to think about organic text is for one of the bounds (top, bottom, left, right) to be nonlinear.  Instead of having text flow inside strict rectangular bounds, consider text flowing around a left or right spline boundary.  Our 360|Flex demo used TinyTLF to render text inside a container whose left boundary was a quadratic Bezier spline.  The right boundary could be a spline as well, but the demo was simplified to have only one nonlinear boundary.  Paul also got a version of the demo running after his presentation where the spline was animated.

This particular quadratic spline is G-1 continuous and non-interpolative.  The spline is only guaranteed to pass through the first and last knots in the sequence.  The first and last quad. Beziers are degenerate; they are actually lines, so the quadratic coefficient is zero.  This causes the spline to be closer to the beginning and ending boundaries than a typical quad.  There is also a tension parameter, which works best for values in the 0.2 – 0.6 range.  I personally like about 0.3.  I don’t know the original attribution for this spline, so the best I can do is credit my computational geometry professor, Dr. R. Tennyson.  The algorithm goes back to at least the late 1970s so the only possible contribution I might be able to claim is addition of tension :)

The spline uses instances of a custom quadratic Bezier class for its constituent segments under the assumption that the y coordinates are non-decreasing from segment to segment.  This allows a single value to returned from the x-at-y method.  A horizontal sweep-line is moved from the top to the bottom of a container.  If the sweep line is outside the range of one spline, the x-value at either the minimum or maximum y is used to bound the container, allowing virtual bounds to extend infinitely in either direction.  This is illustrated in the screen shot below.

Horizontal Sweep Line with virtual boundaries

If the sweep line falls within either spline boundary, then the y-coordinate is already known.  The Quadratic Bezier x-at-y algorithm returns a single x-coordinate that completes identification of the boundary.  You can imagine the red line as a proxy for text lines that are laid out by TinyTLF.

I’ll post again whenever Paul gets the presentation and demos online so you can see it in practice.  In the mean time, you can view the current demo from which Paul developed the spline layout.  It’s only been moderately tested, but should be far enough along to deconstruct how the algorithm works.

View demo.

View source.

About these ads
Categories: Flex Tags: , , ,
  1. October 4, 2010 at 3:09 pm

    Hi! thanks for sharing, this is really interesting, one day I was playing around with an algorithm dealing with liquid and I got some tough questions about how to put it in bottles of different shapes… hmmmmm… this article gave some ideas for finding the bottle limits. It is interesting I have used the hermite interpolation for audio stretching, quite similar to the quadratic bezier. I just wondering what the results are using the quadratic bezier instead to achieve the same. take a look on it http://www.yoambulante.com/en/labs/interpolation.php cheers!

  2. October 11, 2010 at 6:50 am


    Vous trouverez ci-joint mon Blog présentant ma nouvelle théorie mathématique de la conscience.
    Par la présente, j’aimerais si vous le voulez bien que les scientifiques de votre communauté me fassent parvenir leur commentaire.


    Dr Clovis Simard,phD

  1. October 4, 2010 at 10:38 am
Comments are closed.

Get every new post delivered to your Inbox.

Join 1,333 other followers

%d bloggers like this: