Generative Design Variations M.6.1.2 Springs as connections

It’s about springs and nodes. This is the summary from the Generative Design book: ‘After repelling nodes, the connections between linked nodes are the second important element of a force-directed layout. Since these connections should attempt to limit themselves to a certain length, the concept of a spring is usually used for this purpose. Therefore, the algorithm used to translate this model into practice must enable the connected nodes to move toward ane another when they are far apart and to repel each other when they come too close. The following steps are one way to meet these demands. These can then be easily transferred to the corresponding vector functions in the program (in the new class spring).’ Until here the summary of the Generative Design book. Here is the original program.

Because the Generative Design library is not supported by JavaScript I only prepared an album of all images I have created during this assignment.

When I began to work on this assignment I never thought this program could be transformed into an interesting drawing tool. I have adapted the two nodes and the spring a bit so they can be used to create compositions. It also appears that drawing with the mouse is easier than using the pen. The pen is too sensitive. The mouse can almost fix its position to the Wacom tablet. And in that manner, you can easily draw straight lines.

I have doubled the length of the spring to be able to work outside the display window. But suddenly, the program has a will of its own. At least a will that I have not consciously programmed. Spontaneously formed sine waves appear. No idea where they come from. But what a shame of these pictures that there is always placed a cross in the middle of the display window.

I have now copied the line and ellipse drawing functions into the mousePressed block. The initial draw spring and draw nodes functions are commented out. That means that no cross is drawn anymore until I left- or right-click the mouse button. A small note. It seems like this experimentation has nothing to do with this assignment. But the only thing I’m trying to look at are the boundaries of what is possible within the program. The result is always unpredictable. But the resulting images are always related to what has been put into the program. Except when things come into view which I think are not necessary. For example: I think the first node point in every image is not necessary. So I also commented that out.

Right now I am trying to understand where these sine waves come from. I think it has something to do with the damping and stiffness. I have set them both extremely low and that means that the spring jumps very slow and it is also difficult to stop. It remains almost endlessly going up and down. So probably damping and stiffness are responsible for those sine waves.

I think it is time to introduce a refresh function key. I have to restart the program now every time without a change made in the program itself. Perhaps it is better for me now to focus more on the jumping mechanism instead of making different images.

I have introduced a for loop because I thought it might be interesting to do something with a line pattern. That actually produced better images than I expected. So I think I’m going to expand this pattern.

This is still pretty much the same program as the previous one. The difference is this time that I made the spring very short. I also have everything repeatedly redrawn. M_6_1_02_GDV_07

I think the best images from the series are the simplest.

This seems a good time to introduce color. I chose red, yellow, blue and green. I now use the spring class to generate patterns. Damping and stiffness are almost off. Which means they are set extremely low.

This session still has produced some spring-like pattern images. In short: production wise it was a good assignment. But I need to go a bit deeper into the spring class. Maybe I can pick that up in the next assignment.


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