GDV P.3.1.1 Writing time-based text

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

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

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

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

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

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

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

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

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

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

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

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


Comments? Leave a reply.

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

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