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

Advertisements

Comments? Leave a reply.

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

WordPress.com Logo

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