May
19
God that sounds boring. But actually, it's pretty cool :D
A common problem is wanting to make things look pretty. Often you have a diagram of some kind that you'd like to layout automatically. If the diagram is made up of nodes connected by lines, you can do it automatically using some physics trickery.
As you can see in this example prototype that I've whipped up, it looks really fluid and organic. Click on any node to add a child connected to it. The larger, solid nodes are "pinned" in place.
How does it work? Basically, using this pseudocode algorithm from Wikipedia implemented in flash. Each node is acting like a magnet repelling every other node, and the lines are acting like springs. So the nodes are being simultaneous repelled from and attracted to each other, which eventually results in some sort of equilibrium.
It turns out that this state of equilibrium is generally pleasing to the human eye – so the diagram looks symmetrical and balanced (as much as possible), chains eventually untangle themselves etc. Try dragging the nodes around to see what I mean.
It turns out that the same algorithm works just as well in 3D (assuming you've written your vector classes properly so that they're dimension independent ;) So here's the same idea but moved into 3D view. There’s no repositioning nodes in this one (dragging is hard in 3D), but it has essentially the same behaviour.
Filed under:
flash, physics
Next Article:
Return to our Insight blog