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.

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.

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.

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

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

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.

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.

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.

Replaced the ellipses with arc’s.

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

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.

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

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.

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.

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.


Enlarged the blue arcs only.

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

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

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.

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.

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.

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