Generative Design Variations M.6.1.3 Nodes connected with springs

Here is a brief description of the Generative Design book. Actually it’s not at all relevant to the exercises I’m going to do but I’ll show it anyway: ‘Both classes (the node class and the spring class) are contained in the Generative Design library, which can be downloaded at In the following programs those classes are also imported from this library. An HTML reference of the classes in the Generative Design library is included in the library packet.’ So far this brief description. At the next link you’ll find the original program.

And ooh … there is that annoying sentence again. Because JavaScript does not support the Generative Design library I can not put programs online. That’s why I have put all the images I’ve made during the next exercises in a flickr album.

To begin with, I have not changed much in the program. I changed the color of the background. The color of the springs and nodes I’ve kept the same as in the original program.

I have reduced the diameter of the nodes. That makes the total image a bit more advanced. But probably less clear. And there is a kind of remaining image (as in after image) that creates the illusion as if it is generating a silk-like material. Not a wrong effect at all.

Maybe it’s a bit less refined but I still checked how the image looks when you increase the nodes and the thickness of the springs. It all looks a bit more massive but the image is not uninteresting.

I increased the number of nodes to 1000. That makes a chaotic impression. It is also unfortunate that the nodes stay within the display window. As a result there is a build up of nodes at the sides of the display window. They can not move anymore to some place else. That’s why I increased the boundaries of the nodes and springs outside the display window.

I’ve commented out the nodes. That way I can double the number of springs without that the result is getting chaotic. At some point I felt the need to reduce the number of springs. I also added some transparency. On the pivot points of the springs artificial nodes are being formed. But they do not have the functionality of the real nodes (which are now turned off). In other images, I turned the nodes on and increased the size slightly. M_6_1_03_GDV_05

This is a completely new design. I wanted to introduce color only into the springs. I could do that with an if statement. But in hindsight it was better to remove the lines and to introduce only color in the nodes. After a few variations, I have turned on the springs again. It brings some guidance in the chaos.

I reduced the boundary. Ellipses are replaced by rectangles. The largest distance between two nodes is only 2 pixels. So basically negligible. I have also added another additional color and reduced the diameter of the rectangles. Has a rectangle a diameter?M_6_1_03_GDV_07

A variation with only lines as nodes. Both horizontally and vertically. I have the number of nodes increased to 3200. Complete nonsense of course but I was curious to see the how it would look like. I experimented a bit with the frame rate but I did not actually get better images. Frame rate is really not relevant if you do not animate these images. Which easily could be done if I would.

What would happen if I make excessively long lines. Strangely enough this results in (some cases) a kind of three-dimensional image. However, these are two-dimensional graphics. But I do not work in the z-direction. When the image comes to a standstill it reveals that the display image is not entirely filled. I think that is not an objection. But I made a version where that boundary is raised. I also have doubled the alpha channel.

Another variation uses a cross (or plus) at the node positions. Basically, you can put every possible shape in that node position. But in this case I have chosen a cross. This leads at times to very natural images. Especially if the lines are very small. I compare it with overblown dandelions. Why do I always have to make comparisons? Because while doing that it seems you can make something intangible more tangible. I write specially ‘it seems’. I will come back to that later.

This was a very sensible exercise. With totally different images as an outcome when you compare them with the previous exercise. The following exercises are more theoretical. I will mention them in a post, but I cannot provide any graphics. Also, until now I received no support or answer on my questions from the Generative Design colleagues. Maybe they’re on vacation. I think it’s time to switch to plan B.


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