GDV P.3.2.1 Disolving the font outline

I start with the description of the Generative Design Book: ‘A text is made up of characters. A character, in turn, is shaped by its outlines. In the following chapters, this outline dissipates into a multitude of points and will establish the basis for generative font manipulation. Individual points are replaced by other elements, thereby disguising the original font. The starting point is a text and a font file. The Geomerative library, designed by Ricard Marxer, generates a multitude of points onto the font outline. This information can then be used to give the characters new visual identities.’ Until so far the description. Here are the original programs:

I made a summary page with all the images I generated during this exercise. You can find it here on my flickr-page.

And at the loftmatic page you can find all the programs. Allas again there is no JavaScript involved so when you click on the thumbnails you get the Processing file.

I now jump back to the earlier exercise (GDV P.3.1.4 Text diagram). In that exercise I was a bit sceptical about the use of libraries. I was talking about the limitations it gives you in your graphical expression. That it does not matter who imports a library because it will always look like what the library dictates. I was also discussing the fact that there is a lack of information how you can use a library to its limits. And I was hoping that I was wrong. And I can assure you I was. In this exercise I am going to use the Geomerative library of Ricard Marxer. And I think this is the way how you should present a library. Beside that the library is well documented on a technical way (which is Ben Fry’s Treemap library too) it also gives you tutorials and much more information on how to use it. And I think that is what you need when you are in a learning process.

So I went through the Geomerative Library tutorials that gave me a very good idea on how to work it. My scepticism about libraries has disappeared and I went on with the Generative Design exercise. Changed a few global variable names. Changed the sizable display window in a non-sizable 800 * 800. And I have to find a text which I can display. Short words. Let’s start with four letter words. I decided to skip the program line containing the dots and concentrated on the lines only.

Changed the angle of the lines to vertical.

Switched off the lines. Worked withe the dots. Replaced fills with strokes. And also switched off the if statement which contained the modulo. Now every point in the typeface is being used to create an ellipse.

What about replacing the ellipses with arcs? That works too! What about dividing the circle into 3 other parts? Works also!

That means I can give every circle separate colors. For instance 360 / 6 gives me 6 parts of a circle (which is equal to 6 different colors).

Used only arcs. Upper half is a blue arc. Lower half is a red arc.

Repeated the same word (undo) 4 times in the vertical direction.

I have thrown almost everything away and imported the original code. Used rect instead of ellipse. And used the rounded corners. Four colored layers of the word ‘wipe’.

Defined 10 ellipses per vector. Got some free animation too.

Used the animation to make a last version. But now with lines. The lines alone are not so interesting so I started mixing them with the previous version. That gives a quit interesting effect.

Changed the background and color mode. Checking if this is going to work in JavaScript. Open it in Safari. Safari’s Error console prints ‘Processing.js: Unable to execute pjs sketch: ReferenceError: Can’t find variable: RG.’ So. I presume that it cannot read the Geomerative library. Continuing with Processing Java then. Again I will search for a 4-, well lets take a 3-letter word for a change. That might be better because the word can be displayed larger so you can see much more structures in the typeface when an svg-file is added. After positioning the word its time to change the colors and the SVG-files. During changing those svg-files I wondered if you could add more svg-files to a case. Maybe that is worth a try in the next exercise.

In the previous exercise I used 2 times the same svg file in Module_01 and Module_02 to create the word. I thought the image would be way too disturbing using two different svg-files. I will now use 2 different svg-files (as it was in the original program) to check if my assumption was good or wrong.

Used 3 different svg files per case. But I think the effect is a bit over the top. I also made the files symmetric.

Introduced some asymmetric svg-files. Switched off Module_03 and Module_02 which was less interesting. So I went back to using only the Modules_01 and Modules_02.

What happens when I use only lines in the modules. Well… it seems there is not happening too much. So I run the tweak filter over the lines. That makes a difference. But not such a difference that I can appreciate it. Concluding that its better to make a kind of regular patterns in Adobe Illustrator because the result in Processing is much nicer to look at.

Just straight lines make a beautiful effect. But I still wonder why it does not make a very big impact on the image itself. Maybe I make my svg files too complicated.

Made the svg-files less complex.

A pattern seems to emerge.

The generated pdf-files are interpreting the colors differently. Sometimes its fine and sometimes its completely wrong. Why is this? RGB > HSB maybe?

Experimented a little while with the zig-zag effect in Adobe Illustrator which delivers me even more complex files.

To wrap-up this exercise I think the Geomerative library is a great help in use but it is also good technically and educational documented. Another thing which might help is that these libraries come available in JavaScript. But that might be a little bit too much too ask.

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