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.

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:

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

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.

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.

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.

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.

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

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.

Again not very functional. But the image looks interesting.

Another version with different layers and repetitions.

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:


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:


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:


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.

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:

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.

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.

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.

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

Generative Design Variations M.4.4 Attractors in space

This is the last assignment for me from the attractors chapter. The Generative Design book describes it as follows: ‘As stated at the beginning of the chapter, it is easy to use attractors and nodes in three-dimensional space. To do this, everywhere in the sketches where calculations with x and y appear, an additional line needs to be added that does the same with z. This addition is included in the classes in the Generative Design library. However, a small problem has to be solved if the 2D tool is to be extended into the third dimension. In the 2D tool, the mouse position is used to control the position of the attractor. In a three-dimensional grid of nodes, however, it is no longer clear how an interaction can be designed so the mouse can influence all the nodes. The solution is to ensure that the attractor is always located on the screen’s x-y layer. If the nodes are rotated in space, the position of the attractor has to be rotated in the opposite direction so that it influences those nodes that are located on the screen plane.’ Here you can find the original program.

And again I could not put my modified programs online because the programs are not supported by JavaScript. JavaScript does not support the Generative Design Library. So I have prepared a Flickr Album which contains all still images I have made during this assignment. You can find those clicking this link:

I did a lot of tweaking on the program’s settings. But I just couldn’t get it right. I also added a zoom factor. Using that it is easier for me to position the cube at a size I would like to see it. To get to know what is going on I lowered xCount, yCount and zCount to their lowest levels. Using the attractor it delivers just a random bunch of lines. Than I increased the gridStepX. Which, finally, did not make any sense at all. I see… xCount, yCount and zCount are counted twice. So when you move the slider to the number 1 you get a cube which exists out of 4 separate cubes. Another thing is that when I was finished with making the variations I noticed that I did not make much use of the attractor itself to modify the grid. I found that some settings of the grid were already interesting enough as an image.

After working with this sketch I noticed that I did not save my settings of the previous sketch. I was too much busy with creating interesting images. That sometimes happens. So I leave that for what it’s good for and continue with the next variations. Still not happy with the image quality.

In the previous sketches I worked with a default setting which I have modified a bit. The next sketches I will work with the sets that are incorporated in the program. I give it a go with set1 (a setting that already was made available by the Generative Design people. First of all I think the line weight is too heavy. So I decreased that. And I increased the alpha channel. Added red to the set. Maybe a very obvious conclusion but I get the impression that you get the best images by doing as little as possible (which is very difficult).

As I mentioned before I noticed that you can also make interesting images by not using the attractor at all. Just adding or subtracting gridsteps x, y and z gives interesting moiré patterns. And it gives a lot of depth in the images. I rendering these images in a 2400 x 2400 resolution using Marius Watz’s TileSaver. And it behaves still the same as in former sketches. If you run the program once it’s working fine. But after refining the settings in the GUI it breaks the image down in four parts and puts it together again in a wrong order. Which I might eventually like even better although it’s wrong. But I decide that later when I will put the images back together in the right order.

Continuing with set2. Ah… found a setting with an improvement to the image quality. Should have known this much earlier. It’s still not 100% but it is better than what I had in the beginning.

The only thing I like at these variations is that they seem not to be computer generated. They have a roughness in it which I sometimes like.

Set3 is leading me to the indiviual pixels. This is really getting somewhere. Atleast I think I am working now on pixel level. That’s why you might notice squares in some of the images.

The program (or tool) evolves now more to a kind of structure or pattern generator than a tool which uses attractors in space. And at certain moments I do not know what I am looking at and at what angle and how close. Good that I added that zoom function.

Continuing with the last set (wich is set4). Replace the color-range by my color-range (which is an adaptation of the original one which was included in the tool).

Working further with the color-range and trying to get some slightly small attractor manipulation in the image. As I conclusion I think that the attractors in space should be used very carefull. It is easy to make a big mess of it. It is much more difficult to keep the chaos to acceptable limits.

Generative Design Variations M.4.3.1 The attractor tool

This assignment is about using the attractor tool. And as usual I start with the description of the Generative Design Book: ‘The previous discussed ways of dealing with nodes and attractors have been combined into one tool, which can be used to investigate the individual parameters. In addition, there are more setting options installed in the tool, some of which will be explained in more detail here. In previous examples, a grid consisting of nodes was always generated in which each node was represented as a point. The tool contains additional ways to manipulate and draw the grid. As many as nine grids can be superimposed using layerCount and each of these can be influenced separately. Different colors can be used to indicate the individual layers. It is possible to specify which grid points are connected by lines, or – if nothing is selected – if points are drawn at all. All this greatly expands the repertoire of possible shapes. If Draw Curves is selected the individual grid points are not connected by straight lines but by curves.’ You can find the attractor tool at this link.

I did not modify this tool program very much. I just used it to create images. I thought it would be of no use to put my modified programs online because the programs are not supported by JavaScript. JavaScript does not support the Generative Design Library and controlP5. So I have prepared a Flickr Album which contains all still images I have made during this assignment. You can find those clicking this link:

It was pretty difficult to find the right settings in this tool. But after a few days of tweaking I found some. It is still not very clear what everything does (and sometimes doesn’t) because the program itself is very large. Another thing is that I could not find a way to get the initializing settings right in the beginning. The program seems to behave very different from the other programs because when you initialize the program it does not use the new settings. Later I found out that these settings can be changed by modifying the different sets (set1, set2, set3, set4) of the program.

In this second version I tried some experiments with layers. Whoops… never seen this one. java.lang.RuntimeException: java.lang.OutOfMemoryError: Java heap space. It seems that its better to keep the lineweight at 1.00 Otherwise the program will not run smooth.

Made the grid vertical instead of horizontal. Did some images with vertical lines only. It seems that you can make the lines thicker when you are ready with the editing process. When the image is ready you can adjust the thickness of the lines without any problem (I thought). Except when you are working in curves mode.

I was a bit annoyed by the mediocre image quality. I did not find the images smooth enough. First of all I thought maybe render everything in a higher size: 1600 x 1600 instead of 800 x 800. I might resize all images back to 800 x 800 because that is the image size I worked in until now. But fortunately I found a setting which gave me a better resolution within 800 x 800. These images are very crisp and deliver a nice feeling. Had to increase the maximum available memory of Processing to 2048 Mb though. But until now that seems to be no problem. By the way it works only with lines. You could use curves but they make it very slow.

These are the first attempts which make use of the new settings. I think some of them are giving a very organic feeling. And I think some images are way too complex. But this could be the right time to use some color. And maybe some more layers. I only used two layers until now.

Hey… the pdf’s are working! But the .png’s are delivering transparency so I have to adjust those in Photoshop. Changed image creation to jpg in the tool. Made some justifications to the setParas and the initial settings of the sliders of ControlP5. I know now how to get the adjustment right. So that is giving me a lot less work.

I made a horizontal setup. Tried to make a compact chaos in a complex grid. But I could not find what I wanted (or liked). And I was bothered by vertical lines which kept on popping up in the image. Just by coincidence I bumped into an extremely large attractor setting. And that might ask for even more layers in other colors.

Added two more colors but the images are not getting any better. I could add more colors but I would rather bring in some unexpected qualities.

Found another way to create interesting moiré patterns. Let’s see where this leads to.

Looking back to this assignment I must admit that I haven’t used the layers function very often. I used a maximum of 4 layers (each for a different color). And I have to stop working with this program before I will repeat myself. Altough repetition seems to be very unlikely with this tool.

Generative Design Variations M.4.2.4 Attractor vortex

This is some of the text from the Generative Design book: ‘It is also fairly easy to change the attractor so the force f no longer has an attracting or repelling effect but rather leads to a vortex effect. Like the node class, this attractor class can be found in a slightly expanded form in the Generative Design Library. The attractor functions just discussed can be configured using the property mode, the value of which is one of the constants: Basic, Smooth and Twirl.’ Here you can find the original program.

I could not put my modified programs online because the programs are not supported by JavaScript. JavaScript does not support the Generative Design Library. So I have made a Flickr Album which contains all still images I have made during this assignment. You can find those clicking this link:

The links below the following paragraphs will redirect you to the Flickr page to the image I describe in that paragraph. It is quite interesting to see how these chapters lead you into very complex programs. It all starts very simple and during the making of the assignments you get a better understanding how the final tool does its work. In this assignment I began with inverting the lines and background color. The lines are in fact build by very tiny ellipses. Changed the grid size to 1000 x 1000 pixels. That gives me more headroom to misuse the grid of nodes. Ah… the pdf turns out to be a wrong example of the Processing sketch. It draws the ellipses with black outlines. So I do not worry about that and continue with working with png’s. Made some variations with those swirly lines. In the last variation you can notice the separate dots very well. But its nice that they still behave in line of each other. I also kept everything just black and white. Doing that keeps me concentrate on creating shapes without worrying if it’s a good color combination. If it works in black and white it surely will work in some colors.

Made a few variations with the twirl. I think it is too frivolous. I don’t like this series. But still I thought it would be good to show them.

I lowered the damping to 0.1. That is giving me the opposite effect of what I would like to see. But maybe this is another opportunity to do something with it. I also replaced the ellipses by a rectangle. That makes the program faster and because the rectangle is only 2 x 2 pixels you don’t notice that it is not an ellipse. I also increased the alpha channel to 32. Start with grey lines and because they are overlapping each other they create white areas. I think the compositions are best when you leave some areas of the horizontal line pattern untouched.

Reduced the attractor size and the attractor damping. The damping is now so low that it takes almost a minute to end all motion. I think it’s too low so I raised it again.

Increased the impact radius of the attractor. Decreased yCount because of the disturbances in the image. And also increased the attractor ramp. The program generates very unusual images. The side effects are also very interesting. Looks like a sound wave has gone through the lines.

In the previous sketch I dragged random through the display image with the cursor. In these images I just pointed with the cursor at a few arbitrary places in the display window. I tried not to move or drag with it.

Just keeping the cursor still roughly in the middle of the display window.

In these examples I made very small  circular movements with the cursor in the middle of the screen.

I Changed the force to the node speed. I divided dy and dx by f.

Brought everything in to extreme high numbers. Which seems to be a good thing for creating strange images. Not that I like them. But I never thought you could create them. Which is also a good thing.

Generative Design Variations M.4.2.3 Attractor curves

A short description from the Generative Design book: ‘When calculating the force, the formula contains the fixed number 0.5, which is multiplied by a new parameter. In order to name this parameter appropriately, one needs to examine how this multiplication changes the curve. Obviously, the more quickly the curve reaches its highest point, the greater the value. The parameter could therefore be called ramp. The corresponding line in the attractor class could be as follows:

float f = 1 / pow (s, 0.5 * ramp) – 1;

When examined closely, a bend in the curve at the radius is visible, meaning that an unattractive kink would occur on the graph as well. This kink is eliminated when the following formula is used to calculate the force:

float s = pow (d / radius, 1 / ramp);

float f = s * 9 * strength * (1 / (s + 1) + ((s – 3) / 4)) / d;’

Here you can find the original program.

I could not put the programs online because the programs are not supported by JavaScript because JavaScript does not support the Generative Design Library. So I have prepared a Flickr Album which contains all still images I have made during this assignment. You can find those clicking this link:

The links below the paragraphs will redirect you to the Flickr page with the image I describe in that actual paragraph. I began with inverting the fills and background color. Changed the grid size to 800 x 800 pixels. XCount and yCount are on 801 (xCount and yCount is the amount of nodes). Left all settings as they were but made a few variations with them. Ah… the pdf-file turns out to be just a black document. Changed the grid-size back to 600. When I reset everything the pdf-file does contain an image but it doesn’t look like the one which is generated by Processing without creating a png file. Checked the file in Photoshop and it contains no image. So I do not worry about that and continue with working with png’s. Made same variations with these grey moiré patterns.

I decreased the attractor radius of impact (influence size on the nodes) to 50. The nodes themselves (xCount and yCount are 701 x 701. Which means you get a finer pattern in the display window. In fact it is just the same pattern as in the previous sketch.

I decreased the attractor radius of impact (influence size on the nodes) to 500. Did not change anything else. And than you get these moiré patterns. A bit more harsh and somewhat less refined.

Increased the radius of impact for the attractor to 800 pixels. XCount and yCount are on 201. I use rectangles made of 8 x 4 pixels. Made a few variants with different rectangle sizes. Interesting that these patterns are not depending on the shapes they are created with.

Decreased xCount and yCount. Gridsize is increased. The attractor strength is 4 times as high (in the negative) and the attractor ramp is doubled. Interesting to see that ellipses which enter the borders are piling up to each other. This gives a kind of rough photo-edge. But in the end I decided to clean it up because I found it disturbing for the final image.

This version is the inverted variation of the previous sketch.

Tried to make some variations with 3 ellipses of different size and position.

Five variations with five different cubes under different angles. Cube front left, front right front outside, front inside, front transparent.

Made five variations with lines only. They are not perfect but I think this imperfection is not a negative thing in this case.

Made four patterns with different objects. Two flower and leaflike patterns. One with honeycombs and used some ellipses for more flowers in this time of the season.