Crickets Chirping

mon qui si, mon qui d’où

Force Directed Graph Layout With Processing, Take 2

with 6 comments

Once upon a time I wrote a force-directed graph layout application using processing. I rolled it all myself, so that meant the physics calculations were a) sloppy and b) slow. In the time since then, a wonderful physics library has come to my attention so it’s time for some updates. (As if I wanted to write my own Runge-Kutta integrator. pshaw right. I failed calculus in high school, but I made a 4 on the AP exam. I don’t do homework. :)

graphtoy.gif

The demonstration app is a toy with a few simple rules:

  • Expand: Click on the red nodes to expand a randomly generated subtree.
  • Connect: Click on a blue node to connect it to whichever node you currently have selected.
  • Fade: The nodes age with time. They eventually fade and disappear, so you have to keep expanding and connecting in order to keep the graph alive. Clicking on a node resets its clock.

I liken the activity to playing with bubble-wrap that keeps regenerating itself the more you pop it.

I’ve got some ideas for a game based on this, but by all means let me know if you have suggestions.

Written by banksean

February 26th, 2007 at 9:39 am

Posted in General,Processing

«
»

6 Responses to 'Force Directed Graph Layout With Processing, Take 2'

Subscribe to comments with RSS

  1. hello
    I am a student in China, I am so interested in your force-directed graph layout, so could you show me your code or give me some related books
    Thankyou

    fisher

    31 Jul 07 at 1:46 am

  2. Oh, man. I was just googling about for some information on force directed graphs so I could implement them in processing, and here you’ve gone and created a fantastic base for them (as well as an excuse to download the traer libraries). Thank you so much, this is awesome, as are your explanations.

    steen

    6 Oct 08 at 9:09 am

  3. Hi, I’m a new processing user and wanted to drop you a line — I was interested in Force Directed graphing and used your GraphToy2 as a learning utility (read: I used a bunch of your code) to write my own which I’ve made available here:

    http://www.remix.net/static/MassiveForce/

    The main difference is that there is a parent/child relationship between nodes, child nodes maintain their springs/particles and drawing is done by recursively generating a node list - the performance is currently terrible above 60 nodes which is likely due to my implementation, but it satisfied my need for a more hierarchical version of this concept.

    Anyway, just wanted to post this to let you know your work got me a leg up on my work and you might enjoy what I’ve done. Thanks again!

    Nathan Ramella

    3 Dec 08 at 6:47 pm

  4. Hi,

    I love your example above. Unfortunately I keep getting the following error in processing even though I have downloaded the Traer libraries:
    the function moveTo(float, float, float) does not exist.

    When I comment it out, it can’t find another function. Is it that the syntax has changed in the Traer libraries since the code was made?

    Thanks,
    Jamie

    JamieThompson

    8 Mar 10 at 7:57 am

  5. I’m having the exact same problem as JamieThompson above. Has anyone solved this?

    Rick Borovoy

    11 Aug 10 at 1:39 pm

  6. Graph.pde and GraphToy.pde required a few small changes to work with the latest version of the physics library. I have it running now. If anyone wants the code, you can send me an note at my last name at media dot mit dot edu

    Rick Borovoy

    Rick Borovoy

    11 Aug 10 at 3:32 pm

Leave a Reply