Generative Design Variations M.6.4.1 Visualizing proportions

Here is the summary of the Generative Design book: ‘Until now the nodes have all looked the same, although they represent completely different Wikipedia articles. For instance, it is not apparent if a represented article is long or short, how many left in it refer to other articles, or if the article itself is refered to. It would make sense to draw the larger nodes when the articles are longer. It must be noted that the quantitative information is recognized by the area of the graphic element and not by its radius. A ring is drawn around the node with a width indicating how many links have yet to be displayed with the arrows originating from the node.’ So much for the summary. And here you can find the original program.

JavaScript does not support the Generative Design library. And I am not sure but I think the Processing XML data class is also not supported. Furthermore, there are some (for me) obscure things imported in this tool:, and some java utilities. And because this program is a tool I did not find it necessary to put the programs online. I have created a Flickr album where all the images can be found that I have made during this exercise.

Extremely annoying to say but to be frank this tool does not work. It displays the keyword Design. And you can add a new node. But that’s all. I started the program several times. That worked sometimes during using the previous program (M.6.3.1). After three times the program than suddenly started. But that does not work now with this program. I have figured out three different ways I can still use this tool. The first way is to import the changes I made in M.6.3.1 (the previous program) and look what happens. The second way is to build on the previous program (M.6.3.1). And then forget about the tool. And the third way is to try to make my version of the tool. That program would have absolutely nothing to do with what is described in the Generative Design book. But that would obviously be sad. Since I have been able to use all the programs so far. I first replaced in the WikipediaNode class all http:// links by https://. And then I was surprised that the program worked normal. I get no more errors in the console. So the problem seems to be solved easily. I reported that on the Generative Design website. Ah … and this could also be one of the causes. I work with a Wacom tablet and a pen. When I start the program with the pen it sometimes does not work. When I start the program with the mouse on the Wacom tablet then it starts most of the times. Sounds very vague. But it is what it is.

As usual I started to type all the book-comments into the code. I also downloaded the complete font family MISO. MISO is an architectural lettering font completed in 2006 by Mârten Nettelbladt. I wanted to test whether any of these fonts (or a combination of them) is also suitable for use in this program. But unfortunately this did not lead to better results. I did not choose for a different keyword. That will happen in the following exercises. The keyword for this exercise is ‘Design’. I am now going to set the first variables. Auto Zoom is true. Invert background is true. I do not know what the variable resultCount represents. So I’m going to increase it from 10 to 50. Ah… resultCount is the number of nodes with which the program starts. I put this back to 1 for now. Then it is much easier to track where all nodes link to. I think a resultCount of 500 is the limit for this program. That number is also as stated in the API lines of the WikipediaNode class. There also occurs a strange side effect in the graphics of this program. The design node begins to vibrate violently when I use high numbers of nodes. I have no idea why. I also removed all color information from the image. Bringing color in the graphics will be the next assignment.

Let’s use design related keywords for these exercises. I will use the keyword ‘Designer’ for this exercise. That’s a tiny difference from the previous keyword: Design. But there is a big difference in the end-result when you put the spring length at 10 or 500. I can influence that amount via the GUI. So these differences are even getting bigger. I reduced the minimum setting. And the doubled maximum setting in the GUI. The disadvantage is that the texts in many nodes can no longer be read. So you may have to zoom in. Actually, this typographically not very wise. Perhaps the texts had to decrease more slowly when creating more nodes. Or switch off automatic zoom.

Keyword: Industrial Designer. I have put the spring stiffness very low. This way you can make beautiful organic structures. If you want to go that way. The tool can also create unexpected node clusters.

Keyword: Design Research. What happens if I double the slider to for the spring stiffness again? Then everything becomes even more interesting. Only the readability goes steps backwards. In this case, I do not care but my clients will appreciate it less.

Keyword: Graphic design. Spring strength and spring stiffness are at their maximum. Spring damping is on its minimum. This results in very fancy circles which are formed by the nodes. As you change the settings the circles are getting more organic again.

Keyword: Industrial design. I Increased the node radius to its maximum. Once to its minimum and one time half of the slider. I also increased the spring length. At a certain moment all nodes pile themselves up. Therefore it seems that there are fewer nodes present. But by playing with the settings the nodes are getting visible again. M_6_4_01_GDV_06

Keyword: Designer drug. Brought every setting to its maximum. But wait … that’s a reassuring warning in my console: Error during asyncHTMLLoad – but no problem.

Keyword: Design Patent. Brought the line weight to an extreme setting. This results graphically in nice images. But I really should do something about the size of the texts. I’m going to try to solve that problem in the next assignment.

Keyword: Software design. Just a variation in which I made the line thickness excessively thick. It is less refined but not really wrong. Plus some screen dumps of the moments that I’ve zoomed in really deep on a constellation of nodes and springs.

Keyword: User interface design. Actually, the gray text on black rectangles is not readable. Perhaps there is also room for improvement for that issue 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