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.
P_3_1_3_01
P_3_1_3_02
P_3_1_3_03
P_3_1_3_04

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

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

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

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

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

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

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

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

What if I turn on strokeCap (SQUARE).
P_3_1_3_02_GDV_04

Did some swapping with the interX and interY variables.
P_3_1_3_02_GDV_05

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

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

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

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

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

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

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

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

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

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

Henk Lamers

Advertisements

Comments? Leave a reply.

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

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s