Textforms

Description

This project is a text-based form generator. It takes a string of text and splays it out in a ring of text chains. I like the idea of using text as the building block for generating form and am interested in pushing textual legibility to its limit. You can type and press backspace to create new strings and forms. You can also press TAB to expose a GUI with lots of presets and parameters to play with in pursuit of exploring the space of form generation

Design Process

I am inspired by the shapes of starfish, flowers, and other lifeforms that exhibit radial symmetry, and am also interested in how font symbols can similtaneously look organic and synthetic, so decided to try these ideas out together. In the first iteration, I sketched out the classes using object oriented programming, creating a TextChainLoop class, a TextChain class, and a TextLink class. Here is the very first version of it, kind of starfish-like:

I enjoy the surprise of creative coding, so often I don't really sketch before I start, and just let the process of coding inform the result. This "mistake" occured when I forgot to draw a background before drawing the text. It informed a parameter choice that I defined later on that drives the alpha of the background when it is being drawn.


Those classes manage the transformation and drawing of the text. The basis for this sketch relies heavily on push, pop, and p5's 3D rotation capabilities. Each symbol is a link in a chain, and inherits the rotation of its parent link recursively. The chains are arranged in a circle, creating a (at least at first) symmetric pattern. After some progress, it started looking like this:


One classmate had suggested adding colors, which I thought was a wonderful idea. It would look better if the colors varied across the links of the chain, so that's another thing I added. From there, I added many more options, such as randomness, size variation, color animation, and the ability to type the word (and backspace). The mouse also has the ability to influence the rotation of the chain links to add some motion interactivity. There were a lot of issues that had to be worked through. In order to get the text to overlap, I had to mess with the builtin p5.js 3D text shader. I found a link to the original vertex and fragment shaders for 3D text but there was a bug in their vertex shader that causes some flickering, so I fixed it, and allowed letters to overlap by adding a "discard" to the fragment shader when the alpha of the glyph is below a certain threshold. There are a lot of parameters that could be played with to get different forms, so I used dat.gui to expose them so I could play with them in real time. There are a few things missing, but here is the full gui, all of these things seem to work mostly:


This quickly turned into a project to create a tool to create textual visuals. In the GUI, I added a preset function that loads parameters from a json file, and made some presets (in addition to the default mode at the top of this page) to play around with that illustrate the variety of textforms you can get.

"Classic":


A flower (showcasing the "jitter" parameters to get random variations in the chain)


A preset that ends up looking like something in between a stellar entity and a starfish


A chaotic preset where the background is never cleared and the textforms are jittered to the point of being a blob


A trippy mode, inspired by Mati's LSD button in his guitar generator:

Reflection

In future versions, I think it may be fun for each text chain to optionally be a different string, perhaps to explore the radial form of an entire poem or something. I also like the idea of turning this into an audio sequencer and having each link of text play a frequency that depends on the character code. The sequencer would have the ability to be played at different rates and maybe have different instruments for different characters. I also want the ability to change fonts. There are always more features to add... But for now, I'm excited to work on something else.