How do I create circles connected with elastic lines in Processing.js?

Question

In Processing.js, I'd like to have circles that represent nodes, with lines connecting linked nodes. I'd like those connected circles to naturally pull toward each other with a kind of elasticity of the lines, and the circles to bounce against each other when they touch. Any ideas on how to do this?

Answer 1

I think this sample might get you going in the right direction:

• Box2D.JS with Processing.js

It has the circles, the lines, and the bouncing.

Answer 2

Or if you want it yourself this is the Google search term you're looking for: http://www.google.com/search?hl=en&q=force+directed+graph+javascript&aq=f&aqi=g-c1&aql=&oq=&gs_rfai=

The base algorithm is pretty simple, getting a tuned example to work a little less so. I've looked through this stuff before, but this quick search just turned up this little js project that seems to do it quite properly: http://github.com/jackrusher/jssvggraph

Shouldn't be too difficult to port.