GDV P.2.3.3 Drawing with type

Here is the text I re-typed from the Generative Design book: ‘Who doesn’t like to switch brushes while painting? In this application, the position and size of characters are constantly transformed according to the position and speed of the brush. The user can paint random series of letters or even whole novels. Along the mouse’s drawing line, a text appears that is defined in the program and is drawn larger or smaller depending on mouse speed.’ And here you can find the three original programs where I worked with.

And In case you are not able to run JavaScript or Processing I have put all images of this session on a Flickr summary page.

Here is a general remark. For this session I used one of our own fonts (FIOTEXTRegular). This font was specially designed by Jeanne de Bont for our animation film ‘Fantasy in Orbit’. You can find more info about that animation film here. Here is a trailer. And if you would like to buy the DVD then here is the way to go. That all is fine but in some sketches I used a font size of 400. This size is very laborious to export as a .vlw. But if I do export  the sketch to JavaScript with the font then the font itself is about 15.4Mb. So I decided to leave our font out of the JavaScript code. The sketches do work though. But only with a font that is installed on your machine. This also means that the final image will never be the same as the images I could create.

The first thing I always do is to reduce the size for all sketches. It was set to full width and height of my monitor but that is not so web-friendly.  I also changed the names of the variables to names which are easier to understand for me. Another thing is that I commented out the PaintingPos_X line. This makes that you only can draw text in vertical lines. And what I realize now (while I am typing this text) is that the word PaintingPos_X could better be replaced by DrawingPos_X because this lesson is about drawing and not about painting. Anyway… I used only white text on a black background in his sketch.

I found the rotate function (as described in the original code) much too random. So I replaced it with a less random function between 0 and 45 degrees. But in the end I thought only the 45 degrees was good to work with. Introduced key-1 for white type. And key-2 for black type.

You might wonder why I used only numbers instead of text. Well I was thinking about writing some poetry. But this could easily become a project on itself. So I decided to stick with the numbers for a while. I commented out the PaintingPos_Y positions because I think it is too random used together with the Painting Pos_Y. This might be fine if you would like to make illustrations. But that is not what I would like to do. Use the space bar to get a random color for the type.

Changed nothing in this sketch.

Used a very large font size for this sketch. Experimented with the textfont. Adding or subtracting distanceMouseWriting / 2.

From here on all sketches I worked with are not supported by JavaScript because JavaScript does not support the Generative Design Library. Or the Generative Design Library does not support JavaScript. The outcome is not good for either option. Oh… and you also need a tablet and stylus. This allows much more precise control compared with a mouse that you hold with your whole hand. I used the Wacom (pronounced ‘WOK-um’) tablet with a pen. So I decided to show the code only. In the thumbnail this sketch is using only a point (full stop) for creating the image. But I see that I saved the sketch with a vertical line. You have to replace it with a point to get similar results.

Here I used a , (comma). I decided to use only punctuation characters for a while. In the code you will find ‘√’ as the PaintedLetters String. So you have to replace those.

This one uses a (slash). In the code you will find an ‘L’. That’s the character which was in the code when I stopped working with the sketch.

This sketch is also using the slash character.

And this one uses an ‘almost equal to’ character. I managed to make very subtile gradients with it. You cannot do this with every character.

Here I tried to make a composition with the words ‘drawing with type’. I only used white type on a black background.

This sketch is not so different as the previous one. In this case I can switch between black (key-2) and white type (key-1).

Added one color.

Here I restricted myself to draw only random vertically positioned colored type.

And finally this is a random type landscape. In the beginning I was thinking of making a lot of these but in the end I thought it might be a little cheesy. And that ends this episode of ‘Drawing with type’. I must admit that I interpreted the title very broad. Instead of drawing I was more occupied with painting with type.

Henk Lamers


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