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

GDV P.3.1.4 Text diagram

Lets begin with the original text of the Generative Design book: ‘What were Melville’s Goethe’s, or Dickens’s favorite words? The possibility of mechanically reading and processing large amounts of text provides considerable room for experimentation. All the words Goethe’s Faust, for instance, can be counted and their frequency represented by elements (in this case, rectangles) of varying sizes to create diagrams that function as static literary criticism. Ben Fry’s Treemap library allows treemaps to be constructed easily. The aim is to divide up the display window according to the frequency with which each word is used in a text. The complete text of Goethe’s Faust is read from a text file and passed to the Treemap library for visualization. The Treemap’s basic layout algorithm can then be selected.’ Until so far the text of the generative Design book.

I made a Flickr page which has all the images on it which I made during this exercise. And you can find all  Processing files right here. I checked if the programs could correctly be converted from Processing to JavaScript but again that did not work out. So I have put only Processing files on the loftmatic site. Here is the original program from the Generative Design site.

To familiarize myself with how treemaps work I went through the first part of chapter 7, Trees, Hierarchies, and Recursion of Ben Fry’s publication ‘Visualizing Data’. An excellent book which I tried to finish four times but with no success. I could not make it any further than the beginning of chapter 6. Let’s see if it makes any sense this time. First question: HashMap? I am not fully aware of what a hashmap is. Checked the reference: A HashMap stores a collection of objects, each referenced by a key. This is similar to an Array, only instead of accessing elements with a numeric index, a String is used. Still not very clear because I thought that Arrays could also contain Strings. Another question… what does strokeWeight (0.25f) mean? Nor the reference pages or forum could give me any information about that. So I made 2 screendumps. One created with a strokeWeight of (0.25) and one with (0.25f). But I could not find any changes. What I do know now is that I can use strokeWeights of less than (1) pixel.

Even after doing some research it is still not fully clear to me what a hashmap does or is. Maybe it will be clear when I finished these exercises. I checked the reference of Ben Fry’s Treemap library. I found that there are actually a few more classes in the treemap Interface MapLayout. Added them to the keyRelased list in the main tab of the program. Changed the display size and font to DINCondensed-Bold. But does this program work in JavaScript? The error console tells me: [Error] ReferenceError: Can’t find variable: SimpleMapItem. Probably JavaScript cannot handle the Treemap Library. In total I would like to make five variations of the program. And it would be nice if I could use five different (well known) books for the text. Can this program for instance read the full edition of Sir Thomas More’s ‘Utopia’? Tried that first. It seems it can. Cleaning up the Utopian text file a little. Changing the background and line and font color. Removed the background color in the main tab. Used the fill function to fill all boxes in the WordItem tab. In that way I can control the colors of the individual boxes better. I also would like to show which text is displayed by mentioning the title, author and date of the book. Top left seems to be an ideal place. It seems even better to me that I put the title under a key. Key 0 for instance. By default the title is on. Hitting the zero-key will switch it off. Hitting it again will switch it on again. Defined an if block for DrawTitle.

Imported ‘The Importance of Being Earnest’, by Oscar Wilde. Added some refinement into the element fills. The smaller the element the darker it will be. Got the background color back because I noticed  some of the pages were not refreshing in the display window. This doesn’t work very well in the SliceLayout and the StripTreemap.

Because I see this exercise as a kind of decorative one I found out that rounded rectangles are also possible. Not that I would like to use them. At this moment I don’t like the results of SliceLayout and StripTreemap. But Ben Fry’s website does not give me enough information how to change the results. Imported ‘The Devine Comedy’ from Durante degli Alighieri and started changing the color mode from RGB > HSB because I would like to try some color changes. Used a for loop to create a gradient foreground per module.

As text I have chosen ‘Dubliners’ from James Joyce. Used the for loop for gradients in a horizontal way. spend a lot of time to get the gradient right. Tried lerpColor but the results were not satisfying. I leave it by this proposal.

After all this gradient stuff as a last exercise I would like to try incorporating the number which indicates the amount of times a word has occurred into the sketch. The amount will not only be represented by the size of a word but also by a number. Made a very simple text file with just 8 words in it to check which function is responsible for the counting. That was not very easy to find. Adding a println command to map gives: treemap.Treemap@2e413336. println (items); gives me: P_3_1_4_01_GDV_00$WordItem@58da1994 P_3_1_4_01_GDV_00$WordItem@56c5711e P_3_1_4_01_GDV_00$WordItem@3c859513 P_3_1_4_01_GDV_00$WordItem@65fe316f P_3_1_4_01_GDV_00$WordItem@135fa2b9. And this turned out to be not very helpful. A count variable was already created but I could not find out where and how to use it. In my naivety I just entered a println (word, (word.length()));  command in the WordItem tab after the program line (word, x + w / 2, y + h / 2); That gives me a list of words with the amount of times they are used in Franz Kafka’s book The Metamorphosis. At least I thought so in the beginning. Because when I check the original text file and do a search on ‘fresh’ I get 6 hits. When I do that in the list created in the command display I get only 5 hits. I try another word. ‘Between’. In the original text file ‘between’ is counted 7 times as a full word. In the command display I get zero hits. Original: morning, 22 hits. Console 7 hits. Lets take a very common word: ‘the’. Original: 1.148 hits. Console: 3 hits. The word ‘and’. Original text: 624 hits. Console: 3. What is going on here? Hmmm… could it be that the smaller the number in my console the more it appears in the original text. I just assume that ‘the’ is the most common in the original text (it appears 1148 times). That would make that line: text (1148 – word.length() , x + (w / 2), y + (h / 3)); I am sure that this is wrong. All my console numbers are way above 1100. Ok. I got it. Word.length gives me not the amount of times a word appears in the text but the amount of characters that word has. So the calculation is wrong. I started again in another way. The square amount of pixels for one element is calculated by w * h. This must give me an indication for the amount of times a word occurs in the text. I already found out that the word ‘the’ occurs most in the text. And because it has the largest box (w * h gives me the number 29807). The word ‘staggered’ only occurs once (w * h gives me 51). By calculating (w * h) / 26 this gives me a very close outcome for the number of times a word occures in The Metamorphosis. Changed everything to shades of grey. Added a colored rectangle in the background to put the numbers in. The rectangles get smaller when a smaller number is displayed. So the smallest numbers get no rectangle at all because it’s too small to see. Made it a static size. Just as the numbers. It seems to be better to leave the idea of a rectangle behind. Better try to color the numbers. Finally I used only yellow. And changed the point size of the numbers according its appearance.

To wrap things up: I have no doubt about that libraries allow you to construct treemaps very easily. And that”s fine. But they also limit me in my graphical expression. It does not matter who imports or what you import it will alway going to look like what the library dictates. In this exercise I was only able to do some decorative adaptions. But there is also the lack of information on how you can use a library to its outer limits. Maybe this is different per library. So I hope I am wrong and it’s just my lack of experience with libraries.

Henk Lamers

G.D.V P.3.1.3 Text image

The Generative Design book describes this exercise as follows: ‘Which characters appear, and how often? The properties of an analyzed text can generate images. The number of appearances in a text is calculated for each character and determines its appearance. The color of the letters, for instance, corresponds to how often they appear. Ultimately we do not even need the letters anymore. A text is processed character by character, and each character’s corresponding counter is advanced. That results in a list of counters representing the frequency of each character. These values can now be used as parameters for displaying the text.’

As usual I have prepared a Flickr page which has all the images on it which I made during this exercise. And you can find all  Processing files right here. I checked if all programs could correctly be converted from Processing to JavaScript but that did not work out. The text lines are interpreted differently in JavaScript compared to Processing. So I did not put any JavaScript on the Loftmatic site for this exercise. Here are the original programs from the Generative Design site.

I started with changing the global variable names of the original program. Made the size of the text 10. Changed the font to DINAlternate-Bold and selected the first paragraph from Thomas More’s ‘Utopia’ for the text.

Set the initialized DrawAlpha to false. Tried to connect the fill color of the typeface to the CharacterCounter[index]. The characters which are not used much in the text get a red color. They are getting yellow when used often. Made a println command for CharacterCounter. It gives me numbers ranging from 0 – 585. Maybe its better to change from RGB to HSB. In that way I can control the color better. Drawback is that the pdf-file gives weird color results.

Changed mouseInterpolation to mouseY because I think it supports the movements on the screen more naturally than the mouseX. Used CharacterCounter / 1.5 for the point size.

Added the zoom function from the earlier exercises. But it zooms only from the top left of the textblock. Tried to solve it with push- and popMatrix but that seems not to work. It should be possible to define an origin-point.

I wonder how long a text can be? Had the complete book text of Thomas More’s ‘Utopia loaded. This made my system a bit less responsive. So I reduced the total text until I had ony the first paragraph (again).

Changed the background, size, text and colors. The lines are now representing which character appears most often in the text.

I made a mistake. Instead of making stroke (25). I made it 250. There was still a previous zero in the line. And that gave me this image. StrokeWeight is now 10.

What happens if I make a very thick line. Lets say 100. That is pretty interesting.

What if I turn on strokeCap (SQUARE).

Did some swapping with the interX and interY variables.

When changing the global variable names I am aware that I am asking for lots of mistakes. From the other hand you get a better understanding about what the program does. I have solved all those problems now but it is extra work which you will not see from the outside. What I try to find out now is what does the variable tracking do. It has now a value of 29. I changed it to 50. It seems to increase the white space between the lines. But with a setting of 50 they are going to be displayed outside the display window. I change it to a 100. And change it to -100. I think tracking is responsible for the line spacing. So I change that global variable name to LineSpacing. Another thing in the previous exercises is the colorMode. I initialized colorMode in setup. That means that it is not possible to create a pdf-file with the right colors. In this exercise colorMode is called in draw. Lets see if that makes any difference. Yes! That solves the problem. So to make pdf’s which use the same colors as the png-files you have to start colorMode in draw. Not in setup.

Experimenting with line length, weight and angle. That lead to nothing special until I shifted the line and ellipse x, y positions about a 100 pixels to the right and 100 pixels down.

Still think this image is much too chaotic. I think I should shorten the lines and the movement of the letters.

Gave the letters a bit more space to move around. Linethicknes is now 10. StrokeCap Square.

I worked on this file two days ago. Luckey it seems to be a happy accident. Which is fine.

I found that there is one variable named charSize. And another one is charColor. These variables are not used. I don’t know why. So I commented them out. And as far as I can judge the program functions normal. Another thing is that when I changed the German Faust text into the English Utopia text I did not realize that I can skip certain characters from the WhichCharacters string. ÄÖÜ and ß are characters which are not used in the English language. I also removed the alpha from the colors and set saturation and brightness to a 100. Instead of one line representing a line of characters I used 5 lines.

Swapped the interX and interY positions. This makes the behaviour very slow but it gives an interesting image.

Removed the for loop that generated 5 lines instead of 1. Increased the strokeweight to 4.

Used PosX to increase every round it goes through the loop. Increased the strokeWeight to 100. Alpha is 2.

Rotated everything -90 degrees. Tweaked the line- and textwidth that fall’s in between the 0 – 800 display range. Text is colored using the index. Gray lines are also colored using that method. Everything is still not 100%. But this is a learning process (I keep telling myself).

Henk Lamers

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. 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

GDV P.3.1.1 Writing time-based text

In this second type exercise the Generative Design book says: ‘Composing text with automatic line breaks is nothing new. But when the vertical mouse position is responsible for the leading (the space between lines), and the elapsed time before entering each letter determines its size, then the rhythm of writing begins to interact with the text. When typing, the virtual ‘pen tip’ moves from left to right across the display. When it reaches the right border, it starts again from the beginning and skips a line. Leading is defined by the vertical mouse position. The time between the individual keystrokes is measured. The greater the time interval, the larger the entered letter.’

I have made a summary page on Flickr where you can find all the images I made during this exercise. On the loftmatic page you can find all Processing programs. There is no JavaScript involved because the conversion from Processing to JavaScript did not lead to very pleasing results. When I typed text it gave me only numbers. I do not want to spend time on that. Here you can find the original code as it was published in the Generative Design book.

I do not like games (I have mentioned that before). So I will try to change this program in a way that the game will deliver some interesting typography. In fact that is the case already with the original program but maybe I can change the program in a way that it makes other use of this time-based writing tool. I started with changing the names of the global variables. Changed pMillis in PastMillis. Hope that is the right interpretation. Changed spacing in LineSpacing. Could have used the word ‘leading’ too. But LineSpacing is better to use with camelcased text. Changed spacing into LetterSpacing. Changed the display size to 800 x 800. Oh that is something new: frame.setResizable (true); While the program runs you can adjust the size of the display window. Great! And does this also work in JavaScript? Checked that. No! It does not work in JavaScript. So I commented it out. Removed the ‘Type slow and fast!’ text because if you know that once you know it for every time the program runs. Changed the size and color of the cursor. It gets too much attention. Made some images with only punctuation. Degree sign, colon, solidus, section sign and the asterisk.
P_3_1_1_01_GDV_01 | Code | Image

Tried to do something with rotation. Most of the time text is typed on a straight line. But what if this lines rotates? And what if its rotating faster when more letters are added? That seemed a good idea in theory but it was not when brought into practice. What about giving the letters a kind of accent by displaying a rectangle below them. Position it under the displayed letter. In the first version the rectangle was white. That means it overlapped everything of the typed character that was displayed under its baseline. Filled the rectangle with grey. Made a few versions with some entertaining anecdotes.
P_3_1_1_01_GDV_02 | Code | Image

Used vertical lines which start at the baseline of each character.
P_3_1_1_01_GDV_03 | Code | Image

Maybe its a good idea to introduce a sort off debug mode like we had in one of the last exercises. I would like to know what point size each character has. So it’s not a debug mode but it is some extra info about the typed character. If I use fontSize as the main delivery of the info I get floats. So I used round to convert it into int. Made a few versions also with some anecdotes.
P_3_1_1_01_GDV_04 | Code | Image

Temporarily commented out the grey bars. Showing width and point size of the typed character only.
P_3_1_1_01_GDV_05 | Code | Image

Showing a blue line indicating the character width. Although this is a bit silly because the character width is the width of the character itself. But it is giving me an interesting image. And that counts too (I think).
P_3_1_1_01_GDV_06 | Code | Image

Showing a blue line indicating the character width. Showing a yellow line indicating the point size.
P_3_1_1_01_GDV_07 | Code | Image

Changing the yellow line into a rectangle again.
P_3_1_1_01_GDV_08 | Code | Image

Changed the blue line into a blue rectangle. Made a few variations with anecdotes.
P_3_1_1_01_GDV_09 | Code | Image

Trying to connect the point size to a color. Used that color to fill the lower rectangle. Using the width of the character for coloring the upper rectangles. Changed the color mode to HSB because this is easier to understand for humans. For the text again I used some anecdotes.
P_3_1_1_01_GDV_10 | Code | Image

GDV P.3.0 Hello, type

Type! That is not a new subject for me/us. I used to work in the type design-related industry for a while. I also designed my own typefaces together with my partner. We designed not many typefaces. And they were never commercially available. We mainly used them in our own documentaries or animation films. Anyway… I copied the following description from the Generative Design book: ‘Letters become spaces. In generating a vector-based font, you can directly influence numerous parameters and design with letters in time and space. Traces can be made visible of the emergence of the character and the interactive manipulation of its size and position. The size of the letter is controlled with the horizontal movement of the mouse, and its vertical movement moves the letters up and down. The letter leaves a trail when the mouse button is held down.’

Here you can find the original program were I started with. I also created a Flickr summary page where the images are located which I created during this exercise. You can find them here. And to see all the programs at once you could follow this link. Just click on the main image of the loftmatic homepage.

When I took a first look at the program it works a bit similar like the P.1.0 program of the Generative Design book: ‘Hello, color’. Horizontal mouse positions control the size of the image. Vertical mouse movements control the position. Changed the background to black. I think this program is running too fast. So I added a frame rate of 1. Also added a transparency of 4. But that gave me no good results. Added a filled rectangle over the total display. What about this createFont tool. Checked what fonts are available on my machine. FuturaStd-Light seems to be a good candidate. Although the Light extension doesn’t give me the Light version. I had this problem before so I will not get into it again. To avoid all these font related problems I decided to use one of our own typefaces (FIOTEXTRegular). Made a few variations.

Instead of just displaying one character I can repeat characters. The only change I have to make is that I have to type them in the program. Otherwise only one character is being displayed. Let’s see what that brings us. I Also tried to put colors under the number keys but that is (obviously) not a good idea because these numbers will be displayed in the display-window. But maybe I can switch them off. FrameRate (1.5)… did not know that frame rate could work with floats.

Now what If I use a standard typeface and only use the characters which are not used for setting text. Characters used for punctuation, currency symbols, bullets and stars, math symbols. Or letter like symbols as the registered sign.

Lets see if it is possible to use an outline character. With filled characters the screen is easily filled but by using outline characters you might get interesting things. And you don’t need transparency. So I have thrown some code away. Another part is re-used. I have now the same version as the original program was. Except for one thing. It is an outline character. Made a few versions.

Made some color proposals. Color is chosen randomly. Just hit the space bar. To get straight lines I taped a Linex A 6036 Linex 60 Degree Set Square on my Wacom tablet. If you draw lines by hand you easily get some unwanted curves in the image.

I think the colors are way too random. To make it more organized I will put them under the keys 1-5.

Worked with the number 2 for a while now. Let’s make words of 2 characters for instance. Are there any words of 2 letters? Yes… found them at the San José Scrabble Club. Includes all 2-letter words now acceptable in U.S. Club and Tournament Play as of 2009. Used: AX, GO and PI. Removed my Linex A 6036 and replaced it with a much thinner Faber-Castell Typometer. In that way I can control my pen more accurate.

Did some tests with a 3-letter word. While working I am watching the tennis games at Roland Garros. Thought that the word: ACE would come in handy. EON and SKY are also fine to use.

Four letter words. CODE, TYPE and DATA were pretty obvious words to use. Experimented with bright background colors but I did not like that.

For this last exercise I would like to try how much type/characters you can fit into the display area without the words getting unreadable. I start with five characters in width and five in height. ADDAX, ADMIX, ATAXY, AXIAL and AXION. Six words in height and six characters in width. BABOOL, BAFFLE, BAGUET, BAFFED, BABKAS, BAGNIO. Ok I got another idea… lets take some poetry from Kurt Schwitters. Make a composition with it and use he program to create an image. Hmmm… it seems that it takes some time to generate the image. But it doesn’t look wrong. It’s better than the separate words. But I think it needs some fine tuning. I make one version in which the composition of the svg file looks more like the original layout which Kurt Schwitters has designed.

Henk Lamers

GDV P.2.3.6 Drawing with complex modules | Part 2

In part 2 of this exercise I would like to introduce my own modules. I have added more images to the Flickr summary page. Just scroll down to the bottom. To begin with it I thought it would be sensible to make a first check if the original program is running in JavaScript. I am afraid that I have to answer this question negative. Safari’s Error Console says: TypeError: ‘true’ is not a function (evaluating ‘drawGrid()’’. Removed true. Then its working. Checking it step by step. Drawing and deleting modules, switch tilesets, clear screen, random tiles , debug mode. They all are working fine. Except for show grid. Maybe I find a solution later for that. Which I did not find (I can tell you now). Switched back to Java mode. Changed everything in the program as it was in Part 1. I am not sure why smooth and colorMode is repeated in the draw block. Uncomment it and everything seems to work fine. Changed the global variable names and started with changing the A modules set. Opened the original svg-files in Adobe Illustrator and replaced them with my own images. I started with simple dots. I also incorporated the DrawMap function of the previous exercise. I renamed it to DrawImage. Because that’s a more generic name. But during that change I got the idea to make 10 different images with different modules. In the previous session I used a map of the Netherlands. So it seems a good idea to make 10 different images of The Netherlands.

As you might have noticed I am linking to the Flickr summary pages. It seems of no use to me to link to the loftmatic website because the JavaScript version does not work. I tried it but I could not find a way to make it work. And I do not want to spend much time on that. Anyway… I changed the B modules. Added black as a color because I think I might need it later. And while I was working on the image I thought… hmmm… these maps are all getting the same. It does not make much difference when you change the modules for the total image. So I thought about changing that maps-idea. In 2009 we were invited to make a contribution in an exhibition of London’s text gallery. It was an exhibition of design, typography and illustration inspired by forgotten words. 47 Participants had been chosen from among the dictionary’s lost but lovely words, with an open brief to create an original work inspired by their choice.

This was our contribution. It has nothing to do with Processing. We used Apple Motion, Final Cut Pro, Logic and NewTek’s LightWave. There was no code involved,

So in addition to that I changed my original idea of maps into lost words. I first had to check how many characters I could display in 800 x 800 pixels. Beside of that I have to make sure that these small modules can be seen. From Part 1 of this exercise I know that I can display at least 8 characters. But I will first check that. I have chosen the word aquabib (water-drinker). Found this on ‘The Phrontistery’ website.

Boreism (behaviour of a boring person). Just to get the discussion going I have chosen these words because of their length and how interesting they looked to me.

Citharize (to play the harp). Here I joined the A and B modules. I used the random key function for a while but it did not give me the results I would like to have. Sometimes that might be better but in this case it was not.

Defedate (to pollute). Made the A and B modules 10 pixels. And introduced some color (cyan and red).

Ejurate (to renounce). Made an inverse blue version with module A and B.

Foppotee (simpleton). Added module C. A double line. Did not have to be very accurate because I am going to use it on a very small-scale.

Gelicide (a frost). Added modules D.

Did not like the character spacing. I decreased it because it gave me more space to make the type bigger. But it did not work out. So I increased it again. Hiulcity (an opening or cleft).

I think I have enough modules changed. I am now finishing the last lost word ‘ictuate’ which means to emphasize; to put metrical stress on. As in ‘She preferred free verse over carefully-ictuated classical poetic styles.’

And this was the last exercise in the ‘P.2 Shape’ chapter of the Generative Design book. I learned a lot of new things and was able to make different images. It has expanded my toolbox. Let’s see what ‘P.3 Type’ brings us.

Henk Lamers