GDV P.3.2.2 Varying the font outline

And now for something (not so) completely different. Sometimes small pieces of history are developing itself beside your desk. Most important: you do not realize it yourself at that moment. In 1990 Just van Rossum and Erik van Blokland (Letterror) created their randomfont FF Beowolf. Quoting Letterror: ‘FF Beowolf demonstrated that digital fonts are data and code; instructions that can change themselves.’ Letterror were very ahead of their time because… we are now more than 20 years later and in this Generative Design exercise I will try to vary the font outline too. There is a little anecdote to this event. In 1988 Just van Rossum was actually working as a student at Océ Research & Development’s Typographic Design department to gain some field-experience. I worked there too. But I never understanded what he was doing at that time. So when I asked him what he was doing he said: ‘I’am working in PostScript’. Well… I knew what PostScript was. But we were optimizing bitmapped fonts for Océ’s laserprinters. So I wondered how you could work in the PostScript language? I remember I asked that question and Just showed me a screen with an incredible amount of code. But it didn’t ring a bell. I thought: Why would anyone dive into such complex matter? And why didn’t I asked that question? We will never know because I had other priorities.

Anyway… back to the description in the Generative Design book. As the title states this exercise is about varying the font outline. In fact its the same basic principle as the FF Beowolf font is based on: ‘If the font outline is not made up of straight lines or curves but controllable elements instead, then we increasingly free ourselves from the underlying font. All existing base points are joined together with specially formed Bézier curves. This is just one of the myriad ways of quickly creating dozens of new fonts. The dots on the text outline are connected with Bézier curves. The shape of the curves can be controlled interactively with the mouse.’ Until so far the Generative Design book description. In my ignorance I tend not to agree with the above statement. This is not the way you create dozens of new fonts. If you would like to create fonts its better to get a font-application like FontForge, FontLab Studio, or something like RoboFab. Another thing you could do is  just check the Fontastic Processing Library of Andreas Koller. The point I would like to make is that using this Generative Design P.3.2.2 program you cannot write a new .ttf file. It only spits out pdf or pict’s. But what you can do is create a standard ttf-font which looks totally different than the original .ttf file. So for a few words, a headline or maybe a complex wordmark it’s fine.

For your convienece I prepared a Flickr page which contains all the images I created during this exercise. There is also a loftmatic-page which contains all the changed programs. There is no JavaScript involved because JavaScript does not support the Geomerative library. So when you click the thumbnails you get the Processing programs. Here is the original program (from the Generative Design site) where I started with.

So I went through the program. Changed the global variable names and I recognized a few things from the earlier exercises. Changed color mode to HSB (for more convenient human understanding purposes). One of the first things I did was copy/paste the bezier statement. Multiplied cx and cy 1.5 times. And checked if the pdf-png function could save the images using the right color-set. It seems it does. cx and cy times 1.5 seems to be way too much. Because the program generates now leaf-like objects around the characters. Changed the fill color to green. But I have to get rid of that. It’s a bit cheesy.

Changed the three-letter word to a 4 letter word. What happens if I exaggerate the length of the leaves. Like I had it in the previous version? It looks more like feathers of a bird. But it’s also getting too chaotic for my taste.

I tried to get that chaotic feeling a bit more but it did not lead to any success. I remove my second bezier program line. Added a random fill just before the bezier gets drawn. And that is almost a good effect. I wish I had a bit bolder typeface . Because than the effect can be seen much better. Found it: Arial Black.ttf. A so-called Microsoft ‘improved’ version of Helvetica. Everything gets automatically animated now so I reduced the frame rate.

I was thinking of introducing a noloop? But than I have to introduce a key-function. And that introduced a strange artifact. The right side of the character is repeated. I think it has something tho do with the translate function. So I got rid of the noloop/loop. So what does   this RCommand.setSegmentator(RCommand.ADAPTATIVE); do? The geomerative documentation says: Use this to set the segmentator type. ADAPTATIVE segmentator minimizes the number of segments avoiding perceptual artifacts like angles or cusps. Use this to have Polygons and Meshes with the fewest possible vertices. I think I need to dive a little deeper into this before it makes any sense to me. That will take some time so I need to continue with the basics. Moved the x a 100 pixels and the cx 200 pixels to the right

I have put all settings back to the original program except for the font. increased cy (theDistance) to 5. And increased it once more to 20. Decreased cx (theDistance) to -10. That gives interesting shapes but the characters shape has totality vanished. When you increase cy to 40 its getting silly. Think I need to decrease the point size of the type.

How many SegmenthLengths do you really need to keep a word readable? I increased it to 40. But than you   get only 7 segments. Which makes the word totally unreadable. I decrease it to 20. Than its readable. At least If you put your mouse cursor at the top of the display-window. Hmm… it seems that I solved the ‘stop animation’ problem of a few exercises ago. I did not realize myself that there was a feature in the code that you can add text. So if you hit a key… it will be added to the text on the display. The only thing I did is to comment out the void keyPressed block. I did not need that anyway. So I ended up with a kind of flame throwing characters.

I switched off the fill statements by replacing them by stroke statements. used the local variable jitterPoints to check what kind of effects are possible. This did not lead to any interesting things. So I used the fill statements again and removed the strokes. Placed the word ‘sun’ three times above each other.

I noticed when you place two (or three) words on top of each other (with different colors) you get another interesting effect. Made three variations with that theme. What about different directions of those flames?

Thrown out all fills. Replaced them by strokes again. Brought the words closer together.

Brought those three words even closer together vertically. increased the alpha to 100. setSegmentLength (2).

Henk Lamers


Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s