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

Advertisements

Comments? Leave a reply.

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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