GDV P.4.1.1 Image cutouts in a grid

As always let’s start with the original description from the Generative Design book: ‘The principle illustrated below is almost the same as the one in the previous example, and yet a whole new world of images emerges. An image’s details and fine structures become pattern generators when only a portion of it is selected and configured into tiles. The results are even more interesting if sections are randomly selected. Using the mouse, a section of the image is selected in the display window. After releasing the mouse button, several copies of this section are stored in an array and organized in a grid. The program offers two variants. In variant one, all copies are made from the exact same section. In variant two, the section is shifted slightly at random each time.’ And here is the original program I started with.

So far so good. I have made a Flickr summary page on which you can find all the images I have made during this exercise. And all programs (changed, not at all or just a little) you can find at my loftmatic page.

Before getting into this program I let it run and I check if it works as the program is described in the Generative Design book. Most of the time I do this before I start deconstructing. And this is a very interesting program. It gives you so much compositional possibilities to choose from. However there is one thing which is a bit unclear. It is not always sure when you have selected an area. You need to have that feedback otherwise the program cannot build an image from that area. In (roughly estimated) 50% of the case it does build an image. And leaves this image on the screen. The other 50% it shows the composition for a second or less and it flips back to the original photo. I check that again. I have the idea it has something to do with my Wacom tablet and its mouse. With my pen it does not work at all. But that is because my pen cannot simulate a left mouse button. Is that true? I Check my system preferences. Huh? Tablet Version Mismatch. Please reinstall the tablet software. Ok… I download and install the latest Wacom Intuos 3 driver. But does my pen have the functionality to simulate a left mouse button? There is only a right mouse button available. So I have to change that first in the program. But does my Wacom tablet pen/mouse work better now? No! With a pen it is still undo-able. Check the mouse. Ok… that works fine. I was working with an outdated tablet driver.

The next thing is to change the global variable names and the size of the window display to 800 x 800. Eh… why is mouseMoved and keyReleased displayed in a bold typeface in the Processing Development Environment? No idea. Added new sizes to the keys. Key 1 = 8 x 8, key 2 = 10 x 10, key 3  = 16 x 16, key 4 = 20 x 20 and key 5 = 25 x 25. And I am initializing TileCountX and TileCountY to 8. That takes my selection rectangle to the same size as the size of key 1. Now I have to find a suitable image. I will use parts of images which I made in the beginning of 2014 from Strijp S. Full images are here. Strijp S is a former industrial plant of Philips which is now converted to a creative / living area. Something else. When I converted the Processing files to JavaScript it seemed that JavaScript’s interpretation of Processing’s left-mouse button is a right-mouse button (if you have a right and a left mouse button). That is really odd.

I changed Crop_X and Crop_Y. Instead of dividing I multiplied TileWidth and TileHeight * 1.5.

What can I do besides changing the original image. Everything I change has almost no impact on the final image. For instance… I changed the constrain function in the cropTiles code block. Does not make a difference. Ok… lets start from the beginning of the cropTiles function. TileWidth = width * TileCountY. That gives me a OutOfMemoryError: You may need to increase the memory setting in Preferences. Fine. Another change gives me a NullPointerException. A spinning beach ball and an ArrayindexOutOfBoundsExcption:64. So better not messing too much with this code. But I can change the size of the tiles by dividing Tilewidth and TileHeight by a certain amount. Hmmm… its not much of a change. A part of the original background image is still visible. What about switching on strokeWeight. Well… that works on my selection rectangle only. Maybe I have to take a look at the filter or tint possibilities.

I was looking for a way to paint something on top of the tiles. Tried to do that in the cropTiles function but that did not work. In keyReleased it did not work either. But what I can do is change the size of TileCountX and -Y in the keyReleased block. That gives better results. Made a few variations with that. Although the righthand bottom corner is not filled. Ok… have to make to make TileCountY the same size as TileCountX which makes the program behave the same as it was in it’s original state. I defined key 6 for TileCountX-Y 40. And  key 7 for TileCountX Y 50.

Changed not very much here except for the image.

Because I found that the images were to close to each other qua-cropping I increased Crop_X and Crop_Y by multiplying them by 20. That gives a totally different idea. It is also more chaotic though.

Introduced CropOffset which searches further in the image when the amount is higher.
Now it would be nice if you could use the up and down arrows to make the amount of CropOffset smaller and larger. Defined a keyPressed function which can shift the selected area while displaying the status of CropOffset in the console.

Just replaced the PImage and tried to make some variations.

More variations.

And even more variations of a different PImage.

It seems that you can use the images under an angle. If you add a translate, rotate and scale function in the beginning of the draw block it just keeps on working. But under an angle. No Error messages. The only thing I have to do is make the original PImage larger so I can get rid of the scaling. Because that makes the image less sharp. So I start with a 1600 x 1600 PImage displayed on an angle in a 800 x 800 display window. Will that make sense? Partly… It is difficult to select and it is difficult to get the screen filled. Moved translate and rotate to the reassemble image part. That works better.

Made some variations with a different image.

And some more variations.

And a few more with another image.

So what happens if I choose a random angle? Its going to animate. Trashed random. I have chosen another angle but I am not fully convinced about the image quality. I need to enlarge everything with scale 1.5 because otherwise the corners of the display window will not be covered. Enlarging the image 1.5 time reduces my image quality. Trashed the angles. In fact if you would like angles in your image you just search for angles in the image. Introduced rectangles. This might seem very simple but I could not find out why it did not work until this moment.

Made a few variations with the rectangles.

More variations.

And some more.

Tried to use the color palette of the image for the color of the black lines. MyImage.get (gridX, gridY). That did not give me good results so I kept on using the black rectangles. Made the strokeweight less thick.

Some more variations.

This was a very useful exercise. I could have gone deeper into the program but that would take too much time. And the results for now are pretty satisfying.

Henk Lamers

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