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.

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.

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

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

Increased the line thickness from 40 to 100 pixels.

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.

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

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

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

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.

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.

Until so far the variations I made on the first original program. Here is the original code and image for the second program.

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.

Changed the minimum length to 20 pixels.

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

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

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

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.

Replaced the points by a for loop with ellipses.

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

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

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.

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.

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.

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.

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.

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