20100606

Force Directed Bundling / eerkit

Update: There is a new version of eerkit and the underlying fvlib. You can find it here and here (blog post here)

I recently came upon an interesting paper by Danny Holten and Jarke van Wijk of TU Eindhoven (paper at visualcomplexity.com), regarding edge bundling in graphs in order to reduce visual clutter. Their method is based on the use of flexible graph edges that visually group neighboring links. The edges are modeled as point-spring systems that are attracted to each other based on a set of relevancy  criteria.

This gave me the idea to implement a similar technique of defining attract-repulse relations between graph links in 3D space as a method to generate spatial arrangements diagrams (e.g. form finding or circulation diagrams) that adhere to proximity constraints. I've implemented an alternative approach using agent flows (ribonkit) in the past, but this approach looks equally, if not even more promising.

The outcome so far is a simple interactive applet (eerkit) that allows one to draw edges in space, which are subsequently grouped or separated depending on their direction, distance from each other etc.

Use shift-click or ctrl-click to generate new nodes. Between two subsequent nodes an edge is automatically drawn. Hit 'R' to start over.

eerkit was developed using Processing 1.1peasycam and a new version of fvlib which I will release soon.





The fact that 'bundling' methods are based more or less on the simulation of forces renders them interesting in yet another way: Their result can be modeled quite easily in reality as a maquette. The following photos contain aspects of the result of such an effort.



I modeled those using flexible cylindrical plastic elements (the ones used for architectural model-making) and cyanacrylate adhesive. There are 7 nodes and about 20 edges connecting the nodes. The form of the object was quite easy to achieve using temporary fasteners in order to simulate the attractive forces between the links. The flexibility and linear stiffness of the plastic elements did the rest of the job by itself. I'm planning on repeating the 'experiment' with elements of different thicknesses, in order to simulate edge stiffness.






8 σχόλια:

  1. Fascinating work, thanks for sharing!
    I've worked a little with something similar in Kangaroo, inspired by Frei Otto's wool threads/water form-finding experiments, but never heard the term 'Force Directed Edge Bundling' until now. Great paper, and seems like the approach has a lot of potential. Looking forward very much to seeing how you develop this. Dan

    ReplyDelete
  2. Thanks for your comment!
    I've checked out kangaroo in the past, its a really useful tool. I also visited your blog, the studies on medial axes are quite inspiring I must say! Such topological profiles could be useful for spatial optimization.

    With this effort I tried to approach optimization using physics based processes, like attraction and springs, so it'd be possibly interesting if other shapes apart from linear flex elements could be incorporated. Still, lots of functionality is missing so there's a long way till it's even halfway to being usable.

    Yiannis

    ReplyDelete
  3. Interesting read and good implementation as usual ;)
    Did some similar experiments although it was rather graphic the force driven.
    (http://www.flickr.com/photos/21825226@N05/sets/72157623673734170/) Your force directed approach makes more sense actually.

    Concerning your fvlib, is it possible to add a simple gravity force?

    regards,
    corneel

    ReplyDelete
  4. did some more quick experiments:
    http://www.flickr.com/photos/21825226@N05/sets/72157624521497453/with/4857687042/

    very usefull design tool ;)

    ReplyDelete
  5. thanks a lot for commenting.

    Checked your experiments, i was impressed especially by the second set and if its ok with you I'd like to include one or two on the eerkit page
    (http://www.volatileprototypes.com/projects-2/eerkit, with credits and everything of course (; ).

    I'd also like to understand the way you approached the first set. Did you use an underlying "weight matrix", like the one seen on some of your photos? Do you have a description somewhere?

    About fvlib, I had a bit of a setback but nevertheless I plan on releasing the new version within the next few days. It will natively support all the physics used in eerkit.

    For the moment the only way of adding gravity is the traditional one: Adding a PVector to every point's sforce field:

    point.sforce.add(gravityVector);

    A bit ugly, I know. However, I intentionally left gravity out to keep things as minimal (and fast) as possible.

    However, the next version of the library is based on a modular class structure, so I will include a simple class that adds a predefined vector to an array of points.

    regards,
    yiannis

    ReplyDelete
  6. I can send you the sketch for the second one, feel free to use any images ;) Inspiration for the second one: http://www.patrikschumacher.com/Images/Digital%20Cities/wool-thread-model_sm.jpg

    The first experiment connected a grid of dots, where each had a random initial weight, which increased once a thread was connected to it.

    I used the fvlib.jar from your applet. The one i downloaded from the site didn't work with the source code.

    Thanks for the explanation on adding gravity... i'm still not sure which physics lib for processing suits me best ;) but fvlib seems quite fast.

    ReplyDelete
  7. Thanks for the info. If you'd like to send me the sketch, my mail is here:
    http://www.volatileprototypes.com/about

    the current fvlib version indeed doesn't work with eerkit since some extra functionality is needed. I'm almost done with the next release of both fvlib and eerkit, so in a few day they'll be online.

    ReplyDelete
  8. I was trying to run it but it keeps on saying that I missed the library of fvlib. I did download and install everything. Could you please clarify what the problem might be?

    ReplyDelete