GDV P.2.3.1 Drawing with animated brushes

In 2010 I bought the Generative Gestaltung book. It was in German so I translated all accompanied text of the programs in English. After that I tried some programs but I did not have a clue what they were doing. So I waited for the English version which I received in 2012. And at this moment I have arrived at a point in the Generative Design book were I left it about one year ago. The difference is now that I understand 75% of the code. Sometimes I know what the program is doing and why things are working (or not). So that is an improvement. Let’s see where this drawing with animated brushes is leading us to.

This is the text I copied from the Generative Design book. The first drawing tool is an excellent demonstration of how much visual potential can be contained in very simple principles. A line rotates around the mouse position. The lines join in different ways depending on the speed and direction of the mouse’s movements. The line changes its color and length with each mouse-click. The rotation speed can be set with the right or left arrow keys. Until so far the description. Here are the three original programs.

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 the main page with all programs and code.

I must admit. There is an enormous amount of visual potential in these sketches. In total I was able to create 91 different images with this tool. For me its better than the pre-programmed filters in Adobe’s products because you can adjust these sketches to your own needs. By the way, I used a Wacom tablet to create them. In this first sketch I first tried to do this with the pen on the tablet. But that would not work. The pen is not stable enough to keep it on the same place during the drawing. So I replaced the pen by the Wacom mouse. That works better. Position the mouse somewhere and let the drawing tool do its work. If you position the mouse somewhere else (before it has made a complete 360 degrees angle) you get the image I made here.

The same story here. Keep your mouse positioned on the same place and let it finish a complete circle. I increased the strokeweight to 50 and added a random transparency between 5 and 10. If you hit the space bar you get a random color for each drawn object.

Played with the AngleSpeed variable to get a better quality image.

I increased the strokeWeight to 100 pixels. LineLength is now a random number between 10 and 350. I noticed that I did not use the keys to control the default colors. I mostly use the space bar to get a random color. This has a drawback because sometimes you get very dark colors. So maybe I have to limit that.

To get an image from this sketch you have to invest time. And that is going to be the case for all sketches that follow after this one. I lowered the transparency to 5. LineLenght is a random number between 10 and 800.

In this sketch I used the default svg-files that were in the data folder of the original sketch. I lowered the transparency level to 20. The size of the svg-file is randomly chosen between 50 and 200 pixels. The circles were just random placed by hand.

I decreased the AngleSpeed to 0.5. Which gives a very slow movement but it gives a better image quality. And image quality is more important for me than time 🙂 This sketch does work with an svg-file which I made in Adobe Illustrator. It’s under the 6-key. I commented the other keys (7, 8, 9) out. Because I would like to replace those with my own svg-modules. I used Code Line’s Art Directors Toolkit 5i to position the cursor and in that way the four images.

I added one more svg-file under the 7-key. It looks that I tend to make more use of the random colors than the pre-defined ones. Positioned the cursor at 400, 400. And just started drawing with the LineModule defined under the 7 key. Hmmm… in fact I did not change much in the code itself.

Introduced another svg-module under the 8-key. If you are able to hold your mouse-cursor very still then you get undistorted glass-like images. In fact it is very difficult to keep the mouse straight at one point. That would be a good improvement point for the program.

Last LineModule added under the 9-key. The random color generation is now with a transparency of 10. The LineModuleSize has changed to a random number between 100 and 400.

Now the last 5 sketches do not work in JavaScript because they make use of the GenerativeDesign library. And that library is not supported by JavaScript. So instead I added the Processing code only. However… I did not use the library because it is referring to the tablet options for pen pressure. I do use a tablet but I did not find the need to use it (yet). This was a very fine session. I made a lot of images and I have a better idea now how to make images by working with the different programs.

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