GDV P.4.0 Hello, image

After the exercises with the fonts it’s now time to concentrate on images. Do I have images? I have a photo archive which started to explode in size just in 2009. I always made pictures but I was not really aware of what I was doing. In 2009 I started seriously to take pictures. Bought a professional camera and did one workshop with Stephen Johnson in Dead Valley and  FocusOnNature in Iceland. It is purely coincidence that I started to work with Processing in that same year too.

Back to the exercise. This is the description the Generative Design book gives: ‘A digital image is a mosaic of small color tiles. Dynamic access to these tiny elements allows for the generation of new compositions. It is possible to create your own collection of image tools with the following programs. An image is loaded and displayed in a grid defined by the mouse. Each tile in the grid is filled with a scaled copy of the source image.’ Here is the original program. As usual I prepared a Flickr page with all images I made during this exercise. And on the loftmatic page you can find the programs. Almost all of them work with JavaScript this time. Except for P_4_0_01_GDV_06.

I have imported one of my own images which I took at Denmark’s Aquarium ‘The Blue Planet’. It seemed a good idea to me to keep one picture for all the exercises. In that way you can compare the differences of the patterns better. The first thing that struck me was that the image which is used is getting so small that it really doesn’t matter what kind of image you use. So the first thing I would like to try is to decrease the scale ratio. Oh… does it crash? No… it seems to freeze. Well… that is almost the same result. If you go outside to the left or the top of the display window it is freezes. That is not nice. Anyway… I divided tileCountX and tileCountY by 10. That gives me in the smallest version something I can still recognize as a small version of the original photo. But it still freezes when I go with my cursor outside the left or top of the display window. But in JavaScript it does not freeze. Even if you go outside the boundaries of the display window. That is reassuring.

What can I do to prevent that it freezes. An if statement maybe? That does work partly. I’l just continue knowing it works when I do not press the mouse. What can I do to make this program generate other images. Can draw a rectangle around every photo? I just added strokeWeight (gridX / 40). That is an interesting variation. Replaced it with (gridY / 40) because I like the vertically effect better than horizontal. There is a difference between the Processing version and the JavaScript one. In JavaScript the top row has a different strokeWeight.

When you use strokeWeight (stepX / 16)… you get a black square that grows and shrinks in thickness. You also have the chance on an illegalArgumentException: negative width message.

Put ellipses on the cornerpoints. Used get to get the color at the mouse location to fill the ellipses. That did not work out well. So I removed the ellipses. Repeated the image once more but divided stepX and stepY by 2. And again divided it by 4.

Introduced a rotate and a translate. Just by coincidence it gave me unexpected things. Commented out the large images. Even more interesting. I only don’t know why the first image is so large of size. Ok. I know. Cleared the background in setup.

I need to change this program. I think all the variations I make are getting too close to the original program. I am going to try to merge a range of programs I did two years ago with this program. Maybe just a part of it. The main difference is that this program is not  interactive. It’s just animation. Lets see how that works out. Well… that worked out fine. Except for the fact that when I go the left and top sides of the display window I get an ArrayindexOutOfBoundsException: -100. So I have copied the if-statement of the previous programs: if (gridX < 0); Now it keeps on working. But don’t click the mouse. Knowing that this is good enough for me. Now the image is not scaling. But the objects on top of the image are. It’s a bit different but I think this gives me more possibilities to make variations. By the way… JavaScript does not like this code. That is a shame because this was one of the best images.

I have thrown out all interactivity. The image is now an animation but it delivers me more interesting imagery. I added a small stroke of 2 pixels to every arc. It has a transparency of 64. And that makes it stand out nice against the background. And done this it gives me endless possibilities to generate new variations. Reduced the frameRate to 1 because than you can see the individual changes better. Please be patient. The images come up after one or two seconds. And there is no interactivity. And that goes for all other animations after this one. They are not interactive.

Removed all stroke-related imagery. Used fill only. Weird enough the image keeps on filling until everything has been filled. And than it stops. While using stroke it keeps on making different images. It never stops. No! Oh… sorry, that is a mistake. I did not refresh the screen. When you use background it refreshes and keeps on changing. Replaced the background with a black dissolve screen.

Removed the ObjectSize variable. It seems to give not good enough results when I loaded the files that I made in 2012. Adjusting everything manually seems to work better and it is more work. But the result is better. And that is what counts for me. It loads after 3 or 4 seconds.

De rest of the sketches are all variations of the same program but with using different  shapes.

Loads after 4 seconds.

Loads after 2 seconds but the JavaScript image looks much more interesting than my original design in Processing :)

Loads after 5 seconds.

Loads after 5 seconds. And it is different from my original design in Processing. But this time the JavaScript is not better.

Loads after 2 seconds.

Runs pretty fast. Maybe it has something to do with the frameRate. I made it higher in this version. I checked Processing.js page but there is not much more information about frameRate. It should work properly.

Starts with almost no delay.

Also starts with almost no delay.

Works fine.

And the last one is also fine.

Henk Lamers

GDV P.3.2.3 Font outline from agents

This is the last exercise about fonts. The Generative Design book describes this exercise as: ‘How long is a letter recognizable as such? In this example, the outlines of a letter serve as a source shape. Each individual nodal point moves like a dumb agent. Over time, the letter becomes illegible and is transformed into something new. Points are again generated from a font outline. Each point becomes an independent dumb agent but remains connected to its neighbor.’ Until here their summary. And here you can find the original code.

I have posted all images I made during the exercise on a summary page which you can find here.

There is no JavaScript involved because JavaScript does not support the Geomerative library of Processing. All altered programs you can find on this page.

For the time being I think I do not want to type any other characters than the letter ‘a’. I took only one letter so I can see the visual changes better. I translated the ‘a’ to the middle of the display and let it run for just a while. I increased the StepSize again and switched off the frameRate. And then the program is running way too fast. Beside of that the program is getting very chaotic after a while. So the first thing I changed was the StepSize and the DanceFactor. Enlarged the ellipses on the character. And I would like to introduce some color. So I introduced the human friendly HSB colorMode.

Just a thought: why choose a character for this if it finally ends up in a total mess. You could easily take some arbitrary points and throw them at random to the screen. Let’s see if I can control that chaos a bit more. Switched on the frameRate again. Make the font size 800.  Randomized the color settings between 300-360. Randomized the color settings between 50-60 for the lines. Alpha settings to 2. But that seems to minimal. Increased the alpha setting to 4.

Increased the DanceFactor to 10. Commented out the ellipses. Made the strokeWeight (0.001). I think this distortion is still going way too fast so I decreased the StepSize to 0.1 (which is in fact too less). 0.5 Seems to be a good-one. Just for fun: RCommand.setSegmentLength (1) which gives a complete different picture if you let it run for a minute or 5. Interesting that the original shape of the character remains pretty well ok. It seems that StepSize is the most important variable. When you rise it’s number to a 100 you see why.

Why does it display twice the same character but in a different color? Commented out the first beginShape Endshape block. Ok. Now it only displays the blue character. So I could add another block in a different color? Yes! That works too. Got a blue / magenta version of the ‘a’. Uncomment the first block and I have three different colors of the same ‘a’.

Increased the StepSize to 6 which gives me a kind of fluffy character.

Decreased the point size and typed some characters. That gives me a very chaotic image. I uncommented the second two beginShape, endShape blocks. Ah… I see. It’s growing way too fast. Let me turn that StepSize down. Even 1 is too much. I make it 0.1. That is definitely slower so I make it 0.5. Adding the two begin- and endShape blocks again.

I give it a bit more distortion and I swap the colors. I think blue should sit at the outline and not in the middle of the character. Experimented a little with setSegmentAngle.

Let’s try another font. Times. That didn’t work out. Also the spacing between the characters is wrong. Changed it to Arial Bold. Letter spacing is still wrong.

Made a few proposals with ver ‘airy’ or ‘smokey’ characters. I wonder if I define a key with a color can I than have separate colors per character? No! That’s not working because when you hit the 1 key the number 1 is displayed. Skipped that option. I increased the StepSize to 4 and setSegmentLength to 200. Every character you type now isn’t readable anymore.

Ok. This would be a nice test to finish this exercise. As it is the starting point of this exercise: ‘How long is a letter recognizable?’. I just type 12 characters and I lower the setSegmentLenght every run with 20. So I start with 180. StrokeWeight (10); When I reached 120 it seems a silly idea though. Maybe it’s better to work the other way around. Start with a readable character and then add ever more distortion. Did some other experiments by commenting out all control points and leave only the ellipses. I have to make one remark. The letterspacing is very bad. It does not work well. So I had to correct them in Photoshop. To finish everything I made a few versions with rectangles which reminded me that I also could make my own shapes. Which, in turn, reminded me also that the possibilities are endless but I have to continue :)

Henk Lamers

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

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