AS3 Textpath – inspired by Nodebox

I’m a big fan of projects like Processing, Nodebox, and OpenFrameworks. Nodebox, in particular, really got my attention with two of the standard demos: BitBop.py and Spider.py (look in the Examples > Path folder of the regular download package).

Both examples utilize a convenience method of Nodebox called textpath. Basically, this method turns a string of characters into a complex Bezier path that allows you to do some really cool manipulations. For example, BitBop is essentially a grid of random circles where the circles are only shown/added when they are contained within the textpath. Yes, the ‘contained’ method is available on the textpath result automagically.

The spider example, takes the textpath creates a spiderweb appearance out of the letters by connecting random lines from one point on the contour of a glyph (i.e. the shape of the letter) to another.

In nodebox, both of these examples are stupidly simple. Just for fun (and yes, I’m a big geek), I decided to try to emulate this effect in ActionScript. In the process, I learned way more than I ever would’ve thought about Bezier paths and how TrueType and PostScript Fonts are rendered. You can click here to see my AS3/Flex4 results.

Here’s the Flex source code, for those who are interested…

Note: I based my textpath extension off of the fontrenderer example from here.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>