Generative Design Variations M.6.1.1 Repulsion of the nodes

I have entered the last chapter of the Generative Design book. Here is the intro of the first assignment: ‘Mathematically speaking, the result of this chapter is a graph—i.e., a set of nodes (the representation of Wikipedia articles) that are sometimes connected. A directed graph is even more precise because the connecting lines between the nodes are depicted as arrows. A fundamental challenge in the depiction of graphs is finding the best possible position in the space around each node that few lines will overlap and space will be left for labeling. A force-directed layout (also called a force-directed graph) elegantly solves this problem. Two opposing forces are needed for force-directed layout: the repulsion of the nodes among themselves, and the attraction of the connections. When these forces are simulated through an iterative process, the grid optimizes itself over time.

Repulsion of the nodes
Until now, we have spoken of nodes in a more-or-less abstract manner. Now, we have to think about how this abstract concept can be translated into a program. In this example, we will build on the familiar node class in the chapter ‘Attractors’, which already contains the most important properties, such as position and velocity. All that needs to be added is the ability for individual nodes to repel each other.’ Until so far the Generative Design book summary. Here you can find the original program:

JavaScript conversion from Processing did not work. But I have organized a summary page of all the images I made during this assignment. You can find them in this Flickr album.

A while before I started this chapter I already knew that it would be a difficult one. A few months ago I checked all the files from the chapter. 3 Of the 7 programs did not work. In all 3 cases I got a ‘[Fatal Error]: 1: 1: Premature end of file’ warning in my Processing console. I have tried if I could fix the programs but that worked only partially. I got caught up in XML and XML-related problems. Eventually it had given me an overwhelming amount of possibilities that could perhaps solve the problem but I could not trace what was the best option. I spent a day on the issue. Than I sent an email to the Generative Design colleagues. I have updated them with  my current status. And mentioned that It would be very sad if I have just to drop out in the last chapter. For now, I have not heard anything from them. If I hear something in the future that’s fine. If I hear nothing I’ll go myself to search for solutions. Which could mean that this chapter evolves differently than described in the Generative Design book. Anyway. This is also one of the things you have to consider when doing a self-study. You have to do everything yourself and nobody will help you (in the worst case).

So my plan is now just go and see where I end up. And to be honest that is not really different from how I continued to work from the beginning of October 2013. I have the boundary 100 pixels pushed inwards. And the number of nodes are increased from 200 to 400. It is strange that when everything has stopped a pattern is recognised. It’s not exactly the same pattern every time but it’s pretty similar. I doubled the amount of nodes again from 400 to 800. But the final static pattern remains the same.

The diameter of the nodes is now reduced to 3 pixels. The number of nodes is doubled again to 1600. The program is not running smooth but that is not important at this stage. For me, you have to understand a little of the mechanisms and makes nice visualizations. Animation comes later. I reduced the diameter of the nodes to 1 pixel. 3200 Nodes in use. The 1 pixel diameter I find less successful and the strange thing is that the nodes still create a lot of symmetry.

What will happen when I change the overall settings of the variables in the Node class? This certainly offers a lot of interesting but then again similar images.

The maximum velocity (speed) reduced from 10 to 2. Brought damping, radius, strength and ramp up and down to judge the effect of these variables.

What mechanism determines the direction of the nodes? It’s not entirely clear to me. The last image in this range was created after I watched 15 minutes to the Tour de France (the etappe from Lannemezan to Plateau de Beille). It is almost completely symmetrical.

I have pushed the boundary just outside the display window. Therefore, the nodes return back into the display window. That’s actually not what you want because it makes the final picture very busy. The damping and scale variables are apparently very decisive for the result.

The result of this chapter is (or should be) that a number of Wikipedia nodes are sometimes linked. Perhaps it is worth trying to see if the start position of each node has an influence on the result. The starting position is now the center of the display window. But not exactly the center. There is a random factor of -1 and 1 pixels offset. What happens if I continue to pull those positions further apart? In the x direction it makes only a difference at the starting position. The end result remains the same. It also seems that not much is changed when you increase the offset as far as 1600 pixels for the x and y positions.  Again it turns out that the starting position is shifted from the center. And that is what you might expect. For the end result it doesn’t make a difference.

A number of images in which I explored the limits to find out where chaos begins and ends within the nodes.

Even more chaos testing.

I have spent some time on the float f line in the node class. It emerged that this program is also a nice tool to create flower-like structures. In the context of this assignment that is not really very functional but it delivers me a different result than I had expected at the beginning when I started this task. And I see that as a quality too.


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