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

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

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

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

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

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

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

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

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

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

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

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:
M_6_1_01

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

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

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

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

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

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

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

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

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

Even more chaos testing.
M_6_1_01_GDV_09

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

Generative Design Variations M.5.5 The sunburst tool

First a short description from the Generative Design book: ‘The sunburst tool is a convenient way to access many important parameters when generating sunburst diagrams and demonstrates all the code in this chapter. In addition, information on folders and files is displayed when the mouse moves over the sunburst diagram. For this purpose it must be determined on which object the mouse is located (i.e., on which ring), and which arc is displayed at this angle. This is complicated by the fact that the rings are drawn with different widths using the calcEqualAreaRadius function.’ And here is the program.
M_5_5_01_TOOL

The sunburst tool program does not work in JavaScript because the controlp5 library is not supported by JavaScript. So I made a flickr album of all images I made during this session.

I intend to start again with our movie review data directory. Therefore, it is necessary to explain something. We have started watching films and reviewing them using this simple tool in January 2015. Our film review data tool consists of thirteen components that all represent film quality on a scale of 0 to 10. The components are: Storyline, Originality, Cinematography, Involvement, Sound, Editing, Educational, Title design, Acting, Interesting, Unusual, Exciting and Superior. When we have seen a film we give points through these components. Here is an example:
150502_131248_0002

Now I want to compare all the reviews together. Of all the films we have seen I want to see all ratings of all components next to each other in a sunburst diagram. That means I need to modify the directory structure. All films are now in one directory and they are arranged on date. But now I want all scores of Storylines (from 0-10) in one directory. Roughly, I will have to place manually 100 films in a new directory called: ‘Storylines’. And the same I have to do with the other components. Originality gets a directory with all the scores of all originality components of 100 films. Cinematography gets a separate directory with all the scores of all cinematography components of 100 films. That means that I have to put 1300 files manually in separate directories. That took me two days. Indeed, it is very boring paperwork. And if something is boring the work slows down and it takes more time.

Maybe I could have create those directories using AppleScript but I did not know how long it was going to cost me to make a script for it. Doing it all manually I was sure it was finished after two days (although I did not know that it would take me so long). Then it’s a matter of running the sunburst tool for 13 times. Feeding it with the different directories and make screen dumps. All inner rings represent 10 scores. The rings to the outside represent the 9, 8, 7, 6, 5, 4, 3, 2 and 1 scores. The outer ring represents the 0 scores. I was surprised because the result is visually as dull as the work of the past two days.
M_5_5_01_GDV_01

Because the visuals were all rather disappointing, I just looked what happened when I feeded the sunburst tool with entire file structure of Generative Design Variations. That looked better than the results of the past few days. The same, I tried with my internal accounting (bookkeeping) directory. And with the directory of my loftmatic website. It all looked very interesting. I copied the file structure of the film review data from my desktop to the Generative Design Variations folder and then I’m went to watch the last episode of Sherlock.
M_5_5_01_GDV_10

The next day I opened the Generative Design Variations file structure in the sunburst tool. I worked on that since October 2013 and it contains at this moment 36260 items. It looked very different as the results from the day before. In fact that is right because I had added the film review data directory and files the day before. It looked even better. I worked a few hours with the sunburst tool to create variations using the Generative Design Variations directory, my accounting directory and the loftmatic website directory. That led to better results. And my work of the last two days had still been useful.
M_5_4_01_GDV_12

Looking back at this session, I must confess that the sunburst tool leads to good results if you have a complex file structure. The advantage of the sunburst tool is that anyone can use it. But that is an immediate disadvantage because you get almost always similar results. Less complex directories deliver different results than complex directories with lots of levels, folders and files but the design language is recognizable. And as a designer you don’t always want similar results. In fact I would like never to have similar results if I don’t need them. So I think that every tool that you use should have more variables to change the visualization. And that is the nice thing of a programmed tool because you can always change the code to your specific needs.

Generative Design Variations M.5.4 Sunburst trees

The second part of the sunburst diagrams takes me into the sunburst trees. The description of the Generative Design book is as follows: ‘Thanks to the preparatory work in the two classes FileSystemItem and SunburstItem, it is now easy to create a networked and tree-like representation based on the sunburst diagram. Only the SunburstItem class needs to be extended by the ability to draw a connecting line to the parent element. Bezier anchor points are also required to connect the two instances of SunburstItem with curved lines.’ That is what the Generative Design book learned me. You can find the original code here.
M_5_4_01

Because the program will not work in JavaScript I made a flickr album with all images I created during this assignment. You can find that here.
GDV_M_5_4

I copied all comments of the book version into the program itself. I always do that because that is one way to get into it. Changed the background color to black. I almost changed nothing in the program. Not that I could change much because that FileSystemItem class of Ben Fry looks pretty daunting (or let me call it challenging). This is how my sunburst tree looks now.
M_5_4_01_GDV_01

Oh… I forgot to give the dots a color. In fact they have a color but you wont see them because the dots are the same color as the background. Fixed that. The next thing I am going to do is to update our film directory with three new films. And I will also change the order of the directory. In the earlier version the top-level of the directory was filled with films who received 10 points. I will reverse that. So the top-level (the inner part of the circle) will be filled with films who have scored 0 points and the lower level (the outer part of the circle) will be filled with films which scored 10 points. It makes a minor difference in the shape of the diagram if you compare it with the M.5.3 tree diagrams chapter. Line quality is terrible. Have to find a way to improve that.
M_5_4_01_GDV_02

Spend a lot of time to check how the colors are set. It is still not 100% clear to me how that exactly works. I think I could make a special assignment about that. But I will not. I think also ben Fry’s FileSystemItem class needs some more attention from me. Finally I did manage to improve the line quality.
M_5_4_01_GDV_03

My question is now… why are the outside dots always filled with the same color? Another strange thing are the fileArcScale and folderArcScale variables. Are they in use? I have comment them out and the program behaves normal. I don’t see any change in the diagrams. And the program doesn’t make use of arcs. I kept the brightness of lines and folders on 100. When I put dotBrightnes to zero in the initialization it still displays the same. It doesn’t make any difference. But when I change dotSize during the initializing phase it does make a difference. Setting hueStart to zero and hueEnd to 360 makes everything red except for the lines and the directories and subdirectories. Setting hueStart and hueEnd both to 360 makes  also everything red. Setting hueStart to 359 and hueEnd to 360 gives me the total range of hue’s.
M_5_4_01_GDV_04

I have replaced calcEqualAreaRadius (which should return radii to have equal areas in each depth) for calcAreaRadius (which returns radii in a linear way). It is not clear to me why calcEqualAreaRadius does not returns equal area radii while calcAreaRadius does. This gives more room to see the individual dots. Also increased the size of the diagram. The bezier version of this diagram will be the first version of the diagram which may look nice but is totally not functional.
M_5_4_01_GDV_05

Another totally nonfunctional diagram variation. I only show the bezier version because the line version stayed the same as in the other earlier version. I did not work on that.
M_5_4_01_GDV_06

And because I did not work on the line version I have spent some more time on it. I finally ended up with a variation that shifts all sunburst items in the line version and in the bezier version. Which is again a totally not functional diagram.
M_5_4_01_GDV_07

I adjusted the line thickness and the begin and end of the lines. Modified the transparency a bit. Small adjustments on the size of the diagram to let it better fit into the display window.
M_5_4_01_GDV_08

Pulled everything outside the border of the diagram. Again not very functional because you cannot trace the links between folders files and directories.
M_5_4_01_GDV_09

Default settings of lines and some extravagant adjustment of dots and transparency.
M_5_4_01_GDV_10

Generative Design Variations M.5.3 Sunburst diagrams

Sunburst diagrams. Again something I never used in my work. Here is the description the Generative Design book gives: ‘A sunburst is a visualization technique that simultaneously depicts hierarchical structures and proportions in a radial diagram. The entire diagram is composed of arcs. The farther out the arc lies the lower the object it represents is in the hierarchy. The size of the object is visualized by the angle the arc spans. In the example of data from a hard drive, this means that each arc represents a file or folder size, and the distance from the center represents the hierarchical depth. It is also ensured that the inner arcs span the entire 360º. Instead of (or in addition to) file size, other properties such as file age can be coded in the arc depiction (as color, line value etc.). The arcs of the sunburst diagram are generated by the SunBurstItem class. Sunburst diagrams are special because hierarchical nesting and relative proportions can be displayed and read simultaneously. The legibility of sunburst diagrams can be increased when the areas of the individual rings are identical. This ensures that the arcs situated on different rings remain comparable. Otherwise, the appearance of the arcs would be emphasized more the farther out they are. Using the following function, a circle with a defined radius (here half the display height / 2) is divided up into the number of rings defined by thedepthMax function.’ That is what the Generative Design book tells me. If you would like to see the original code you can find it here.
M_5_3_01

I first copied all comments of the book version into the program. Usually that works best to get an idea of what the program does but this time the program is still not very clear to me. Most of the time I find out how everything connects together during working and modifying the program. But that is not the case yet. I have to solve something else first. In the previous session I thought I could use a FakeDirectory with FakeFolders and FakeFiles. But when I read that FakeDirectory in the Sunburst program it was pretty boring. It might have something to do with the fact that all directories, folders and files are the same. So That was a wrong thought. You might say ‘but why don’t you fill the directories with random FakeFiles. Good question… but that is a lot of work. By the time your tree in the console window looks interesting you might be a few days further. Luckily I had another idea. On the 5th of January in 2015 I started with reviewing films using Processing. I made a very simple program which counts variables together and gives you a number in the end which represents the quality of the film you have seen. Here is one of them. We have seen almost 100 films since the day I started it. And that directory may be a good candidate to use as a sunburst diagram. So I copied the directory with all files to my desktop and let the default folder path point to it. This is what it creates:
M_5_3_01_GDV_01

Also not so impressive. And there are a lot of bezier errors in it. At least I thought it were bezier errors. But when I looked for a bezier function I couldn’t find any. Have to find out why these rendering errors appear. But first I have to reorganize the film review directory. I think we get a directory of 10 levels deep. Our rating is ranked from 0 – 10. And I think a 10-points film can go in the inside ring. All other points will be outside rings. Might as well turn out that I just need to reverse that order in a later stage. This means that the top folder should be filled with films rated 10. I just call the folder 10. In that folder should be a 09 folder. In that folder should be a 08 folder en so continuing until we arrive at a folder which is named folder 00. Although I am almost sure that we did not see a film which has zero or no points at all. Looking at the image the program creates there is something wrong. The inner circle is white. But it should be filled with five films which scored 10 points. But they are located one ring deeper. Oh I see… the inner ring is shaped by the folder called FilmReviewData_GDV_02
M_5_3_01_GDV_02

I changed the path to FilmReviewData_GDV_02/10 but the result stays the same. What happens if I copy the folder named 10 to the desktop and point the Sunburst diagram to that? That seems to work. So I have to change the name of the top folder from FilmReviewData to 10. And that seems to work fine. The only thing I have to find out is why that the diagram has strange unwanted lines (or rendering errors) in it which are made by what? The only thing I can think of is that some Java files in the directory have influence on the shape. Or maybe these are rounding errors? After cleaning up the directories and files they are almost gone. Otherwise I have to remove them in Photoshop.
M_5_3_01_GDV_03

Changed the color range. Used all colors from te color spectrum for the files. Used grey for folders. I halved the thickness of the arcs for folders. And I used radius in a linear way. All circles are now of the same thickness.
M_5_3_01_GDV_04

In this last version I will try to look for other changes. And I must admit it is very difficult to make any change because the program is very tight written. If you try to change something it has an effect on everything. Main thing is that any modification of the diagram is closely connected to the data. When you see it in that light the version I created here is not very functional.
M_5_3_01_GDV_05

I know this does not make any sense but it is interesting to see how far you can deconstruct the image. Of course this hasn’t anything to do with visualizing data but it has everything to do with deconstructing or repeating data.
M_5_3_01_GDV_06

More circular movements. Used the alpha channels for overlays. Again a useless data visualization.
M_5_3_01_GDV_07

This is a bit more functional version. All documents are represented in the full color spectrum. Folders are grey or blue. But it still gives me a lot of render faults.
M_5_3_01_GDV_08

Again not very functional. But the image looks interesting.
M_5_3_01_GDV_09

Another version with different layers and repetitions.
M_5_3_01_GDV_10

After working with the sunburst diagram I think the problem is that anyone can do this. Just choose a directory and let the program do its work. Another point is that the program is very hard to modify to something you would really like to have. As I said before the programming is very tight. Everything is strongly connected with each other because of it’s connection with the data. And that is a good thing. But it gives you less room to design something special. And if you do change something things will get very puzzling. For instance when you change strokes for fills diagram is completely changed to something wich looks interesting. But looking it from the data’s point of view it is a useless change. Another thing is that this diagram gives you an overview of the directories, folders and files in a root directory but it is difficult to see which file is where in the diagram. But maybe my reaction is a bit too premature. Let’s see how the next assignment will evolve.

Generative Design Variations M.5.2 Reading data from the hard drive

This part of the tree diagram chapter is a bit different from the other ones. It’s about reading data from your own hard drive. I quote the Generative Design book: ‘The files in a folder on your hard drive serve as the data basis for the tree structures in this chapter. In the section ‘Collage from collection,’ we demonstrate how several files from one folder could be loaded. This exercise differs from that example in two ways. First, the ‘tree-structure’ within a folder is required for visualisation, meaning that for each folder, all subordinated files and folders have to be traversed recursively. Second, we are no longer interested in the actual file contents but rather only in information about the files, such as their size. In order to load and display a folder structure, a new data class FileSystemItem is created. Each instance of this class can contain any number of FileSystemItem instances. An output method in the FileSystemItem class is needed for an initial simple presentation of the processed tree structure. The printDepthFirst () function recursively processes and displays the entire tree structure in the Processing console with line indentation, which indicates the depth. The tree is processed according to the principle of depth-first search: the algorithm first goes into the depth of the leaves and then branch by branch into the width. The principle of depth-first search is the ‘natural’ way that a recursively defined function processes a hierarchical structure.’ That is what the Generative Design book tells me. If you would like to see the original code you can find it here.

Now the point is… there are no graphics involved. I only get feedback in the console window of the Processing Development Environment. So I think its best to write a bit more about what I did instead of showing a tree-structure in ASCII text. I started with looking for a folder which might be interesting to read. I copied my review of films folder to the desktop and specified the path of the default folder to that film review folder. Than I let the program run. The result is a terrible mess of folders and files. It is an ordered list but it looks very chaotic. But that is because my directory of films is chaotic? Maybe it’s still a good idea to show some screen dumps. It saves me a lot of writing and it shows the idea more clearly. Here is one:

M_5_2_01_GDV_01

Looking under the FileSystemItem tab I found the class FileSystemItem. It’s a class based on code and ideas of Ben Fry. I need to go a bit deeper into that before I can say something sensible about it. FileSystemItem looks for a file or folder. Found references to sub-objects are stored in the array children. It also sorts file names alphabetically. It skips . and .. directory entries and symbolic links. It also checks if the child elements exists. Aliases or shortcuts are skipped. And than a new instance of FileSystemItem is generated for all folders and files. But I needed a much more simpler directory. So I made a fake directory. The root folder is called FakeDirectory. And it contains four FakeFolders to begin with:

M_5_2_01_GDV_02

As I noticed the output gives me two representations of the same FakeDirectory. One is called printDepthFirst and the other one is printBreadthFirst. I was not familiar with these two sorting processes so I looked it up. Depth-first search starts at the root of the directory and then it searches as far as possible along each branch before going back. Breadth-first also starts it’s search at the root directory and then it tries to find the neighbor nodes first before ging into the next level of neighbours. You can see the differences in this screendump:

M_5_2_01_GDV_03

And that is (in short) what there is to tell about this exercise. There are some other issues which I did not mention. But I think I will use that fake directory in the next assignment. Don’t know if that will work but we will see. At this moment I think it’s best to start as simple as possible. Adding complexity later when it is needed.

Generative Design Variations M.5.1 Recursion

This is the start of a new chapter. Chapter M.5 Tree diagrams. Tree structures are graphic representations of hierarchically structured data. The first assignment is about recursion. I quote here the Generative Design book: ‘The principle of iteration – the repetition of parts of a program – is a popular way to tackle complex tasks. The use of for-loops in almost all of this book’s programs reflects this approach. Sometimes, however, this simple method of repetition does not suffice. When processing information or generating structures that are hierarchically nested – such as tree structures – recursion is often the only practical method. Recursion makes use of a function’s ability to be called (again) from within itself. Of course, it is necessary to ensure that at some point the function is no longer called, to avoid an endless loop. In the following program, a ‘branch’ is drawn by a function repeatedly calling itself.’ Here you can find the original program.
M_5_1_01

I did not find it necessary to put my modified code online. I changed not very much. Anyone who is interested in programming can find it out themself (which is –by the way–more instructive). I did prepared a Flickr Album which contains all still images I have made during this assignment. You can find that album clicking this link:
GDV_M_5_1

Recursion is something new for me. I never like to use it much because I thought that the images it delivers are too symmetrical. And generally I do not like symmetrical images. Symmetry makes everything very balanced. And most of the time that is not where I am looking for. But let me give it a try. I flipped the first image which sketch M_5_1_01.pde creates. It is almost a symmetrical image. Well almost because to make it totally symmetrical it should be vertically mirrored. So that is what I did. And because I thought well if it can be vertically mirrored than it can also  horizontally mirrored.
M_5_1_01_GDV_01

In fact this image does look different from the previous sketch but it is not. Instead of mirroring the recursion four times (which is in fact a rotation of 90 degrees) this image is rotated 128 times with a rotation angle of 2.8125 degrees. It is an interesting image but you do not need recursion for that. Using the 1-9 keys you can increase or decrease the amount of the recursion level.
M_5_1_01_GDV_02

So I decided to take a step back. How does recursion actually work? And how can I modify it? I replaced the arcs with straight lines. Visually this makes a great difference.
M_5_1_01_ GDV_03

Just by coincidence I found out that you can also adjust the branches without changing the T-shape. I am now trying to make more complex images. Just keeping the recursion in the back of my mind. I have left out the dot because I don’t know what it is good for. Just repeated the drawT line a few times with some divisions. It gives a more chaotic image in the end. But there are all kinds of interesting things going on. And that is what I prefer.
M_5_1_01_ GDV_04

This sketch is basically using a triangle on it’s point. The recursion pattern is just the same as in every previous sketch. Again I rotated the recursion 128 times with an angle of 2.8125 degrees.
M_5_1_01_ GDV_05

Tried to make a cross (or plus-sign). That worked out fine. But I found another way to modify that cross (or plus) which on it’s turn lead to very different images. Not that I like them. But it is interesting to see what kind of images you can find.
M_5_1_01_ GDV_06

This is the same plus-sign as in the previous sketch. But I just switched off the minimize  function. So every recursion cycle draws of a plus-sign without changing it’s size. And because I used an alpha channel the layering makes the signs darker and brighter.
M_5_1_01_ GDV_07

Another range of variations with the plus-sign used as a street-pavement pattern. Just modifying things a bit can have great consequences for the final image.
M_5_1_01_GDV_08

This is another way of using recursion. A circle. And within that circle are two other circles. And within those two circles are… and so on. But when you rotate the recursion you get very interesting patterns. They look a bit too classic to me.
M_5_1_01_ GDV_09

In fact this is again the same shape as in the previous sketch. I moved the circles out of the large circle. That gives all kind of different possibilities with complex patterns. Interesting. But I don’t know if I would use them in any design. We will see.
M_5_1_01_ GDV_10