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.
http://www.generative-gestaltung.de/P_2_3_3_01
http://www.generative-gestaltung.de/P_2_3_3_01_TABLET
http://www.generative-gestaltung.de/P_2_3_3_01_TABLET_TOOL

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.
https://www.flickr.com/photos/35175691@N02/sets/72157644085421634/

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

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

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

Changed nothing in this sketch.
P_2_3_3_01_GDV_04

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

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

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

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

This sketch is also using the slash character.
P_2_3_3_02_GDV_04

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

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

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

Added one color.
P_2_3_3_03_GDV_03

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

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

Henk Lamers

GDV P.2.3.2 Relation and distance

Here is the text I copied from the Generative Design book: ‘In the previous example, a new element was drawn on the display in each frame when the mouse-button was held down. This function is now restricted: a new element is positioned only when it stays a minimum distance from the previously drawn element. There are several ways to do this. Variation 1: The new element is not placed directly at the mouse position but rather at the exact specified minimum distance from the last element. Variation 2: The new element is placed at the mouse position, and the minimum distance only serves as a threshold value.’ And here you can find the original program.
http://www.generative-gestaltung.de/P_2_3_2_01

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

The first thing I did was to reduce the display size to get a more web friendly size. I got rid of the very thin lines. Used a strokeWeight of 120 pixels and a StepSize of 20. I also introduced the HSB colorMode because its easier to understand by humans than the RGB colorMode. Now there are two DrawModes in this sketch. And I must admit that I only used DrawMode 1.
P_2_3_2_01_GDV_01

Increased the strokeWeight to 400 to get even thicker lines. Left all other settings as they were. As you might have noticed these images are being inspired by Daniel Buren and that’s why they are looking very Bridget Riley-ish.
P_2_3_2_01_GDV_02

Decreased the strokeWeight to a 100 pixels. Oh… I forgot to mention that I changed the LineColor variable. Its HSB values are now random in H 360, S 80 – 100 and B 50 – 100.
P_2_3_2_01_GDV_03

Changed the LineLength to 100. I did not like the randomness in the Saturation and Brightness. So I gave it a fixed value of 100.
P_2_3_2_01_GDV_04

Now it can be that you cannot get the same images as I have made. You might have to tweak the code itself to get them. I introduced a random strokeWeight between 0 and 20. I also commented out the Y_Position locations. This means that you only can get horizontal interaction. And that is what I wanted at that time.
P_2_3_2_01_GDV_05

In this sketch I increased the strokeWeight again to 120. Because I would like to see more of those 3D-ish lines. I also added some more randomness in the LineColor variable.
P_2_3_2_01_GDV_06

In the Processing version you can generate very straight lines. Position the cursor at a point near the side of the display. And point the cursor again near another side of the display. A straight line is drawn. That is more difficult in the JavaScript version because JavaScript does not react on cursor positions which are outside the display field.
P_2_3_2_01_GDV_07

In this sketch I added a more circular behaviour in the objects. To calculate the X_Position of the object I divided StepSize by 2. To draw the line I also divided the Y-Position in 2.
P_2_3_2_01_GDV_08

At that moment I decided to start from the beginning. I used P_2_3_2_01_GDV_01 again as the starting point. Changed the StepSize to 2.0 and the LineLength into 3. Commented out the line function and replaced it with  the arc function. This gives me thicker arcs when I move the mouse very fast from left to right. Or from right to left. In the end I replaced the stroke function with a fill. That gave me triangles with very subtile gradients. Something I did not now when I started this sketch.
P_2_3_2_01_GDV_09

This last sketch let’s make you shapes. If you move your cursor fast the size of the shape will get thicker. Slow movement will create smaller shapes until the shape ends in a line only. It’s still using the arc function between 45 and 270 radians.
P_2_3_2_01_GDV_10

Henk Lamers

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.
http://www.generative-gestaltung.de/P_2_3_1_01
http://www.generative-gestaltung.de/P_2_3_1_02
http://www.generative-gestaltung.de/P_2_3_1_02_TABLET

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

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

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

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

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

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

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

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

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

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

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

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

GDV P.2.2.5 Structural density from agents

This is the text copied from the ‘Generative Design’ book. ‘Here, too, a new circle (shown by a dashed yellow outline) with a random position and size is generated in each frame. When this intersects with a pre-existing circle, the algorithm starts over. Otherwise, it calculates the closest circle. The distance to this circle and its radius now defines how large the new circle has to be drawn so that it touches its neighbor and the circles can be packed densely.’ And here are two movies of the original sketches
http://www.generative-gestaltung.de/P_2_2_5_01
http://www.generative-gestaltung.de/P_2_2_5_02

In case you are not able to run JavaScript or Processing I have put all images of this session on my summary page at:
Flickr

Here are all the sketches I did for this session:
P_2_2_5

First a general thing. From now on I will try to define global variables starting with uppercase. Local variables start with lowercase. This is a tip I got of Andrew Glassner. I think it makes the distinction between variables better. Another thing is a bit more complicating. sometimes names in the code are not meaningful enough for me. For instance r gives me not a slightest idea of what it stands for. Looking at the code it says that it has everything to do with the radius of an object. So instead of r I call that ObjectRadius. And because it’s a global variable it starts with an uppercase. The same thing I did for newR. I will change that into newRadius. And it is starting with a lowercase because it’s a local variable. This is going to make things more difficult for re-tracing mistakes in the original code but the code itself is more readable (and much more understandable) for me.

In this first sketch I exaggerated some things of the original sketch. I increased the line thickness from 1.7 to 10 pixels for the ellipses and to 20 pixels for the lines.
P_2_2_5_01_GDV_01

Here I changed the order of drawing elements. Instead of drawing the ellipses first and the lines second. Now the lines are being drawn first and then the ellipses are drawn. This does not seem to make a big difference in the beginning but if you leave the program running for a while it does.
P_2_2_5_01_GDV_02

In this sketch the ellipses are drawn twice over each other. Reduced the strokeweight of the lines to 1.5 pixels. Which sounds ridiculous because how can you address a 1.5 pixel? Beside of that the lines are drawn twice. But for the second line to draw I swapped the x and y positions.
P_2_2_5_01_GDV_03

I took a more generative approach here (I think). Instead of 1 ellipse 3 ellipses are displayed on the same x and y positions. Moving the mouse up or down is going to decrease and increase the thickness of the lines and ellipse. Moving the mouse left or right is moving through the HSB color range. But there is a bug in it. If you move your mouse close to the right edge of the display window everything is cleared and only 3 red ellipses are displayed. Just found that out now while typing this paragraph.
P_2_2_5_01_GDV_04

Hmm… this sketch is behaving totally different in JavaScript as in Processing. First of all it does not run. It only displays 1 ellipse and 3 arcs. But if you hit the refresh button of your browser it does run. I’ve replaced the 3 ellipses by 1 ellipse and 3 arcs. Removed the thickness change in the y position. And yes, it still has the same bug in it as the previous sketch. And its running very slow.
P_2_2_5_01_GDV_05

Removed the arcs and replaced them by 4 ellipses. They are decreasing in brightness the larger they get. Fortunately the bug is still available.
P_2_2_5_01_GDV_06

This is the same sketch as the previous one. The objects are now half the width of the height. Does that make sense in English? If the height is 10 than the width is half of it. If the height is 0.7 than the width is 0.35. Anyway… the bug is still working. I checked if it was doing the same in Processing. But it is not giving me the same bug. It doesn’t matter if you put your cursor to the right edge of the display window. So I think it has something to do with the conversion from Processing to JavaScript.
P_2_2_5_01_GDV_07

I have cut every ellipse horizontal and vertical into arcs. Filled them with grey and white by reducing the brightness. To check what is going on I reduced the frame rate to 5 fps. Oh… if you go too far to the right with the mouse it stops working. Just hit the refresh button of your browser.
P_2_2_5_01_GDV_08

This is even more difficult to explain in text. Cut the ellipse in half arcs. Vertical and horizontal. Filled the left with white and the right half with grey. Then I made a smaller version of the same ellipse. In fact its a copy of the large version code. But it’s behaving the same as the larger version. Slowed down the animation to 10 fps.
P_2_2_5_01_GDV_09

This is the same code as the previous one except for the fact that I introduced four steps between. Instead of halving the ellipses they are now displayed in quarter steps. The arcs may start now on 0º, 45º, 90º, 135º, 180º, 225º, 270º, 315º, 360º (or as you might prefer radians). I did commented out the frame rate in 10 line because after a minute or so the sketch is running very slow anyway.
P_2_2_5_01_GDV_10

Now the last 10 sketches do not work in JavaScript. I came to that conclusion just yesterday. All these sketches make use of color gradients. And because color gradients including radial gradient and linear gradient are not yet supported in JavaScript. Didn’t know that when I started to work on the last 10 sketches a few days ago. If I had known that at that time I would have restricted myself to use only plain color fills. So instead I added the Processing code only. Although I think it doesn’t make sense to check them because I only changed the names of the variables and replaced the svg-files. But if your curious you can check them here:
P_2_2_5

I really hope that the next versions of Processing will give better JavaScript support. But the near future of Processing is looking very promising because on March 14 2014 I got an announcement from Processing.org: ‘Work on Processing 3.0 is starting. What is it? The priority is the Processing Development Environment, the PDE. We plan to integrate the work on PDE X to bring code completion, debugging, and more to writing Processing sketches. We’re also working with a small, talented group of people on two other major projects to extend Processing in other directions to better support JavaScript and Python.’

Henk Lamers

GDV P.2.2.4 Growth structure from agents

In each frame, a new circle is generated at a random position and with a random radius (dashed circles). It is then determined which of the existing circles lies nearest to the new one. In the final step, the new circle docks with its closest neighbor via the shortest path. The Generative Design book shows two examples of so-called limited diffusion aggregation. Which sounds pretty scientific but here are the examples.
P_2_2_4_01
P_2_2_4_02

And if you are not able to run JavaScript or Processing I have put all images that were generated on a Flickr summary page.

You can find all variations I made (including the code) on this page:
GDV P.2.2.4

The first thing I changed was the calculation of the original display-size. I still have no idea why the display size is calculated in such a complex way: size (167 * 3, 241 * 3); Changed that into: size (800, 800); Also inverted the background and the growing structure itself.
P_2_2_4_01_GDV_01

Changed the static fill function with a random fill. This gives an interesting effect to the animation. Which was, by the way, a happy accident.
P_2_2_4_01_GDV_02

Used that happy accident in a colored version. This looks more like a living structure.
P_2_2_4_01_GDV_03

Changed the ellipses into rectangles with rounded corners. To draw a rounded rectangle, I added a fifth parameter, which is used as the radius value for all four corners. You can find this information in the Processing reference (just in case).
P_2_2_4_01_GDV_04

This gave me the idea to draw simple leaf-shaped elements. To use a different radius value for each corner you have to include eight parameters.
P_2_2_4_01_GDV_05

Some rects are drawn which together form a gradient element. Now this doesn’t work as nice in JavaScript as it works in Processing. If you look into the code you will see that I programmed it pretty clumsy. But I will come back to that point.
P_2_2_4_01_GDV_06

Changed the rectangles into ellipses. But I liked the gradient idea. So I reduced the alpha value with 20% at every ellipse that is drawn.
P_2_2_4_01_GDV_07

Replaced the ellipses with arc’s.
P_2_2_4_01_GDV_08

Added bottom arcs (radians 45, radians 135) to the top arcs (radians 225, radians 315).
P_2_2_4_01_GDV_09

After the top and bottom arcs were added I placed left arcs (radians 135, radians 225) and right arcs (radians 315, radians 405) in a magenta color.
P_2_2_4_01_GDV_10

If the program is running and you hit the 1-key you will see that circles and lines are drawn at a random positions and with an alpha of 20%. The 1-key is an on-off switch and it doesn’t work anymore when the image is ready (ready as in done that is).
P_2_2_4_02_GDV_01

This one is running pretty slow. And it’s almost the same image as P_2_2_4_01_GDV_09. Except for the background image which you can switch on or off.
P_2_2_4_02_GDV_02

From here on I did not pay much attention to the background image. I tried to concentrate on the foreground image. And maybe this is the right time to come back to my remark of clumsy programming. Because in this way it is not efficient. I could have solved this with some for loops. This would definitely increase all those stroke and arc lines. I have spent some time on that but after an hour I thought that it would be better to continue in this way because it gave me some problems which needed even more time. And I was not sure that I would get this image (as it is now). Generally I take as a rule of thumb as it takes me more than one hour to optimize code than I do not optimize it. Another one is: if I am unsure that the end result is not the same as it is in the state it is now I do not optimize.
P_2_2_4_02_GDV_03

These shapes came along because I would like to make the arcs larger. During such a session I always check while I work on the program to see if the image has changed. Sometimes unexpected things happen. This variation is one of them.

P_2_2_4_02_GDV_04

Enlarged the blue arcs only.
P_2_2_4_02_GDV_05

And in this version all arc’s are enlarged. Which was the original idea.
P_2_2_4_02_GDV_06

I wondered what would happen if I enlarged the arc’s even more. In this case I only enlarged the magenta ones.
P_2_2_4_02_GDV_07

Here all arcs are enlarged at the same scale. Hmmm… while I am typing this I think it might have been better when I had used the scale function. Anyway there’s no point crying over spilt milk.
P_2_2_4_02_GDV_08

While the earlier programs used circles positioned in each other. The last two examples make use of a color spectrum in a circle. The circle is divided into colored segments. On top of that a black ellipse is displayed. The end result shows some simularity with the colors you see appear in detergent.
P_2_2_4_02_GDV_09

In this last proposal I made the circles bigger and the black circle smaller. You can also switch on the background image again by hitting the 1-key. In fact this is the best image of the range. It came to me when I had worked for two hours on the previous image. And I could not find a new variation because I had a kind of designers-block. So I had a talk with my friend. She advised me to take a step back. Just make the circles a bit bigger and make the black circles smaller. And here it is! I know! I added sloppy code and it’s not my idea. But taking everything into account it makes a fine image.
P_2_2_4_02_GDV_10

Henk Lamers

GDV P.2.2.3 Shapes from agents

Starting point of Generative Design’s original sketch: The calculation of the points on the circle produces the starting positions of the agents. A flexible curve firmly connects each agent with both its neighbors. The farther away the dumb agents move from their original positions, the more the circular organization dissolves. That is how it is described into the Generative Design book. And here are the 3 original programs.
P_2_2_3_01
P_2_2_3_02
P_2_2_3_03

The variations I have made from ‘Shapes from agents’ is a bit of a different story. Because the program gives you the possibility to draw your own shapes you have to do more than just looking at images I have made. In fact you could make your own images using the original code or my slightly adapted original code. This means that on my loftmatic.com website you might see previews of the programs which will not represent the images you would get when you work with the program itself. Sounds complicated (and it is). But in essence it comes down to this: anyone who uses the original or adapted program will always get different versions of images than I have made. I even don’t know if I could re-create my own images because I did not save the code. That was a stupid thing to do but that is the case. Knowing that I also made a lot more images as I needed to make previews. To give you an impression of what I did here are all the images of this session.
GDV_P_2_2_3

To continue with the sketches FormResolution is the amount of points in the basic shape. By reducing formResolution to 3 you get a triangle (with rounded corners). Oh, I got puzzled by a variable that is called distorsionFactor. I could not find out where or for what it is used for. Another thing is that I did not use the filled version of this sketch. But it is nice that you have it as an option.
GDV_P_2_2_3_01_GDV_01

Increased FormResolution to a 100. That makes the triangle a circle.
GDV_P_2_2_3_01_GDV_02

FormResolution 50 and a starting radius of 200.
GDV_P_2_2_3_01_GDV_03

In fact this is the same code as the first program. I only changed curveVertex into vertex. This makes that only straight connections are made. As it was mentioned in the Generative Design book and as a comment in the original code itself.
GDV_P_2_2_3_01_GDV_04

Added HSB colorMode.
GDV_P_2_2_3_01_GDV_05

Added 4 drawModes. 1 For each color. Hitting the 5, 6, 7 or 8 key changes color. Although the 8 key does not make much of a difference (yet). The lines are also not drawn as nice as before hitting any key.
GDV_P_2_2_3_02_GDV_01

Increased the color range by 90. Although I see I have made a mistake when drawMode is 1. The color range indicates 0 – 30. But all 4 keys are now giving different colors.
GDV_P_2_2_3_02_GDV_02

Decreased the color range to 30. The 5, 6, 7 and 8 key still give quite different colors.
GDV_P_2_2_3_02_GDV_03

It seems that the JavaScript version is running a bit slower if you compare it with the Processing sketch. And this sketch is a good example of the images I made during this session. But than you have to change the code. I was able to make very different variations as you can see in the image examples. This is what I got as an image on a certain moment. You might get something completely different. But I did not safe the code. Next time I will safe all versions of the code.
GDV_P_2_2_3_02_GDV_04

More of the same.
GDV_P_2_2_3_02_GDV_05

The next five programs use the Generative Design Library. So I am not able to show what it does on the web. I attached the Processing code though.
GDV_P_2_2_3_03_GDV_01
GDV_P_2_2_3_03_GDV_02
GDV_P_2_2_3_03_GDV_03
GDV_P_2_2_3_03_GDV_04
GDV_P_2_2_3_03_GDV_05

Henk Lamers

GDV P.2.2.2 Intelligent agents

I had a short Facebook conversation with letterror’s Erik van Blokland. The reason is that I think that roughly 20% or less of my Processing files will not convert properly into JavaScript. Sometimes its due to me making mistakes but another part is much deeper hidden in the Javascript language (I think). So I asked Erik why the conversion between Processing and Javascript isn’t 100%. He let me know that the reason for this sloppy conversion is: ‘Because Javascript is a messy collection of fixes, and Processing is a well-designed language’. Well… don’t know if this is of any help but it still gives you an insight of what is going on between those programming languages.

Ok! The starting point for this chapter: The agent always moves in one of the cardinal directions: north, east, south or west. It can however, choose from several possible angles, whereby right angles are not possible. When the agent reaches the border of the display, it turns around and randomly selects one of the possible angles. When it crosses its own path, it maintains its general direction but selects a new angle. This is how it was described in the Generative Design Book. This chapter uses two programs. Here is the code and image for the first program.
http://www.generative-gestaltung.de/P_2_2_2_01

As always I started to inverted everything. Changed the background to black and the intelligent agent draws itself in white. I divided the mouseX position by a 100 to slow down the intelligent agent’s movements. Otherwise it is too difficult for me to follow what is happening. I uncommented the point (posX, posY) drawing because I do not know what function it has. I think this might be of some use when you would like to write a pdf-document. Not sure about that.
P_2_2_2_01_GDV_01

Increased the thickness of the lines from 0.5 to 40 pixels. Added some 50% of transparency.
P_2_2_2_01_GDV_02

Uncommented the strokeCap (SQUARE). This gives (as a default) lines with round endcaps.
P_2_2_2_01_GDV_03

Increased the line thickness from 40 to 100 pixels.
P_2_2_2_01_GDV_04

Made the stroke caps square again. The width of the line 20 pixels. I placed an extra line on top of the previous line. Changed the line thickness of 6 pixels with no transparency.
P_2_2_2_01_GDV_05

Played around with float a. Increased it from 0.5 to 6.0.
P_2_2_2_01_GDV_06

Increased the smallest length from 10 to 100 pixels. This means fewer lines because the lines shorter than 100 pixels are not drawn.
P_2_2_2_01_GDV_07

Decreased the minimum length of a line back to 10 pixels. Increased the width of a line to 20 pixels.
P_2_2_2_01_GDV_08

Increased the minimum length of a line back to 100 pixels. repeated the drawing of a line six times. Replaced those lines by a for loop. Added 10 pixels to the posX and posY position for every time the program goes through the loop.
P_2_2_2_01_GDV_09

Lowered the minimum length of a line to 50 pixels. Used the rather strange number 135 which leads to these strange patterns. No idea why 135. But it seems ideal in this case.
P_2_2_2_01_GDV_10

Until so far the variations I made on the first original program. Here is the original code and image for the second program.
http://www.generative-gestaltung.de/P_2_2_2_02

The only change I have made to the original program is to use other colors. I also added a 4th key function which has an extra color to the previous 3 keys.
P_2_2_2_02_GDV_01

Changed the minimum length to 20 pixels.
P_2_2_2_02_GDV_02

Changed the minimum length to 10 pixels. Commented out strokeCap. Which makes that lines get the default round strokeCap. Used 50% transparency.
P_2_2_2_02_GDV_03

The same as the previous program. I only repeated the same line once more. Reduced the stroke thickness by half.
P_2_2_2_02_GDV_04

Also the same as the previous program. When the second line gets displayed it uses an angle of 5 radians (degrees).
P_2_2_2_02_GDV_05

At the starting point of posX, posY a point is drawn with a radius which depends on the distance divided by drawWeight divided by 40. This sounds complicated because I did not use ellipses but the point function. Did not know that you could draw ellipses by increasing the point thickness.
P_2_2_2_02_GDV_06

Replaced the points by a for loop with ellipses.
P_2_2_2_02_GDV_07

All llines are displayed with a transparent ellipse on top of the beginning of that line.
P_2_2_2_02_GDV_08

At the beginning of each line ellipses are placed with a diameter of 10 pixels.
P_2_2_2_02_GDV_09

Instead of one line two lines are placed with different start and end positions. P_2_2_2_02_GDV_10

At this moment I really did not know what do next. So I stopped and continued a day later. I started with the same code as used in P_2_2_2_01_GDV_10. The difference is that it makes use of color. Strange enough there is also much more repetition.
P_2_2_2_02_GDV_11

After I had made that version it was easy to make variations on that. ii Is subtracted from posYcross. This also gives repetition in some horizontal and vertical areas.
P_2_2_2_02_GDV_12

This is a graph-like version which I might use later when we enter some data-visualisations. Interesting to see how these lines develop without any interactive intervention.
P_2_2_2_02_GDV_13

This is a nice one which gives interesting shapes at the crosspoints. There is less repetition and more divers behaviour than in the previous sketches.
P_2_2_2_02_GDV_14

And the last sketch has also too much repetition in it. This makes the image only interesting when you start the program and let it run for about 30 seconds. The strange thing with programming is that on a certain moment you can work on one sketch for hours and there seems to be no progress at all. But when you stop and come back later some time you might make several variations in just half an hour. But I see that as a positive issue.
P_2_2_2_02_GDV_15

Henk Lamers