G.D.V P.3.1.2 Text as blueprint

In this third type exercise the Generative Design book describes the following text summary about the program: In this example, time no longer determines letter size. Rather, certain letters modify, for instance, the text orientation. In this program, every character is translated using a visual rule. The source text thus becomes the blueprint for the composition. The user can freely enter the text using the keyboard. Every character is translated by a fixed rule in the program that specifies what will be drawn and how position and size are to be altered. Every entry can be undone using the backspace or delete key. In this example, some of the characters are replaced by loaded SVG modules. You can find the original code here.

I have prepared a Flickr page which contains all the images I made during this exercise. And you can find all  Processing files right here. Just for fun I checked if the original program runs in JavaScript mode. No… it does not. It shows me one string of text which you can move around the display window. It also doesn’t seem to be happy with the font and SVG-files. Both are not being displayed.

As a start I ran the original program. In the previous exercise I did some writing time-based text but text as a blueprint seems a different ball game to me. But maybe I am making a mistake. Changed the size to 800 x 800. Commented out the resizable window. Set the background to black. Text is set to white. Renamed the global variables. And just to study the program a bit more I commented out all cases in the set of rules except for the first case (which is the space). No text is displayed. Not even when you type. I only get a white blinking cursor which rotates in a blue ellipse (which is too boring to even save a frame). So I uncommented the second if statement which triggers ShapeSpace2. That’s a bit more interesting. I see a white blinking cursor followed by green and blue arcs when I keep my space bar pressed. It behaves in a stupid agents way. I don’t like that green color so I changed it in the SVG file.

Changed the rotation of ShapeSpace and ShapeSpace2 from PI / 4 to PI / 2 which is definitely not an improvement. I get flower like patterns. What about if I PI / 8? Again, not an improvement. Changed it back to PI / 4. What does translate do? Doubled translate of ShapeSpace2. Ah… I see. Better put that back. Uncommented the ShapeComma case. Changed the color of ShapeComma to magenta. If you zoom in very close you can see that the modules are actually not fit exactly to each other. There is a slight difference between each module connection. But anyway I will not use the image that close and most of the time the modules will not be connected by other modules but by text. Uncommented ShapePeriod, ShapeExclamationmark, ShapeQuestionmark and ShapeReturn. Even without text this is an interesting tool to make textures. Just for fun I made a few variations with them.

And as a last module I uncommented the default which adds the text of TextTyped. I’ll change the font into AvenirNextCondensed-Regular-48. That gives it a lighter look which I think is more readable. The text itself are now lyrics from Kraftwerk. But I think that I need more text. Because the amount of text is now a bit frugal. Commented all other text than the first line. All text starts at the center of the display window. Every wordspace is filled with a green or blue module. Changed the font back to DIN Condensed Bold. Used the Manifesto of Futurism from Filippo Tommaso Emilio Marinetti for the text. I know that after the First World War, Marinetti was an ardent supporter of fascism. I think that this political choice made Marinetti even more controversial than he already was (based on his ideas and actions). I have chosen this text mainly because of its content and length. Or quoting Marinetti ‘Futurism was the new formula of Action-Art and a code of mental health. It was a youthful and innovative banner, anti-traditional, optimistic, heroic and dynamic, that had to be hoisted over the ruins of all attachment to the past.’ So I think it will do the job. Using only uppercase characters will improve the overall impression of a line. I make one version with it.

The next step is to replace those colored arcs with just simple dots but keeping its functionality. I think these arcs are taking up to much attention. And a little dot maybe just enough. I do not know how it will behave when these modules will be replaced by dots. Just checking if it is easier to position the dot in Adobe Illustrator or in Processing. Ok. I think translate (in the x position) makes the horizontal width of the wordspace. So it’s better to keep the Illustrator dots all in the same position. Its trial and error. Changed the background color from (0) to (64). Switched from uppercase to lowercase.

Step by step replacing all other modules with colored dots. Some dots are mysteriously positioned. Could have spent time to check why but I will continue. Changed the ZoomFactor to 0.01.

Changed the font size to 2.

Did a sizing with scale exercise but I wonder what happens if I enlarge the dot in Illustrator. But instead of that I added a line to the blue space dot. That gave a fine visual effect. Continued doing that to all dots.

I think that even dots are a bit distracting. Removed all dots and doubled all line lengths. That looks better. But what is it. Where do those lines stand for? A small test. What happens when I comment out all rotation? Then I get all text of the Manifesto as one straight line. I think the behaviour of the lines being drawn is too random. I will try to get it a bit less random by removing a lot of the rotation and using only 45º, 90º, 135º and 180º angles. This will give it a less random feeling.

Maybe it is interesting to try to get the colors more futuristic. And I mean the colors that were used in the beginning of the 1900s. There is no doubt about that the most used colors were red, black and white. In which white is now beige for us because the paper that was printed changed color due to time. And maybe its a good idea to make the often used characters small and the less often characters large. Or just the opposite. I made a few versions.

In this last version I used a white rectangle for the space. Space2 has one white and one red rectangle. The comma uses two white and one red rectangle. The period has two white and two red rectangles. The exclamation mark has three white and two red rectangles. The question mark has three white and three red rectangles. For return I used four white rectangles and three red ones.

I did a few tests with P_3_1_2_02. It is the underground map-like image on page 284 and 285 of the Generative Design book. I think it is very difficult to make such a map. But because I think this chapter is about type I choose to change that map idea into a typographic composition. So its more an expansion of P_3_1_2_01 using some functionality from P_3_1_2_02. Started to make the background white. But that did not work for me. Changed it to black again. I randomized the font size range between 10 and 800. A red space is added. Sized font size / 50.

Added a grey rectangle. because white will interfere with the text. What on itself is a strange consideration because the text is unreadable anyway 🙂

I have started to visually unconnect the modules from the positions in the text. But in the program they are still connected. Just exaggerated the positions with translate.

Changed the background to white. Text black. All symbols will be red in the next variation. Take ten arbitrary words from the manifest to be used with a larger font size.

Last adjustments of modules in size, shape and color. Removed the shapeExclamationMark because there is no exclamation mark in the text. Better find that out now than never 🙂 Changed everything to a grey background.

And at that moment it bothers me that I did not get away with that ‘Underground Map’. Mainly because it’s interface is difficult to use. So I decided to use the same text as I used in the previous exercises. If I load them as a string I do not have to type them by hand and making lots of mistakes, having to start all over again. But if you load the manifesto text it is an un-organized cluster of lines which on itself are interesting but it is not what I am looking for. I found the image not complex enough so I have put the Manifesto text in a for loop. Its going to be displayed 3 times and then it looks fine. There are mistakes in it but I like the look of it and it gives the impression of a map. Did not mind too much about the positioning of the text yet. All stations and icons are switched off.

I have picked up ‘Mr Beck’s Underground Map’ from our bookshelf. http://www.amazon.co.uk/Mr-Becks-Underground-Map-Garland/dp/1854141686 Hmmm… maybe use Edward Johnston’s ‘Underground Railways Sans’ typeface? Run a river through it. Adding a London Transport sign? Or a Generative Transport sign. I stick with the things I have now. I change the purple lines to a lighter purple because its a bit too dark. Maybe its nice to add a very subtle grid and some numbers.

Working on the positioning of the text. I like the lines when they are very thin. The lines are getting thinner when the font size gets higher. I think I stick with a 100. The fact that the color of the type is the same as the line color which it belongs to is perfect if you ask me. Still some editing needs to be done because some station names are overlapping. But for the time being I leave everything as it is.

I increased the random function which is responsible for a new ‘railroad’ line when a return has been given from 300 to 3000. This makes the map a bit more open and less chaotic. It solves also most of the overwriting of stationnames. Working with this map I find that Marinetti’s poem fits rather well as a content provider. Cars, railways, airplanes, boats, factories. They all have something to do with the poem. I re-introduced the big station circles and the start of a new line. Also the small stations left and right are back now. The last thing I have to do is to avoid the overwriting of station-names. A station-name is place when the ‘o’ is typed. So I have to go back to the text and find all words with an ‘o’ which are close to each other and replace them with an ø if I don’t want a station-name to be placed.

Added some icons. But I think it makes everything look even more cluttered. So I left them out (finally). There are still mistakes in getting the text aligned but the overall look is ok. Some fine tuning to do (in the future).

Henk Lamers


Comments? Leave a reply.

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

WordPress.com Logo

You are commenting using your WordPress.com 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