Question

I’ve been trying to create something (much more basic) as in the video linked below:

http://blog.theclinic.eu/?p=653 (Should start at 14:30 ish)

It’s a talk by John Maeda & he demonstrates his application called Powershop. I’ve been trying to recreate something that had the same effect, but I can’t figure out how I could make the circles stay at a distance like that without collision, any suggestions on how to approach it?

I’ve tried to make the constraints have a min & max distance so that they’d follow around, I tried to let circles orbit, but none seems to look like his.

I’m trying this with javascript/ HTML5, but I would just like some tips or suggestions on the approach! (My physics/math knowledge is limited, so I might be missing out on some obvious concept to apply?)

Thanks in advance!

Answer 1

If you are looking for a nice canned solution, instead of building everything from the ground up, I suggest you look at Box2D.

The system you see in the Powershop graphics is a simple physical model where each “ball” or “node” or whathaveyou is a charged object that repels all the other balls/nodes. If you model the system as a collection of points connected by freely-rotating lines, all you have to do is understand a little physics to get this effect working with Box2D. Namely, like charges repel.

It should be that easy. You will constrain a set of points so that each has to stay within a length L from a center, and this will be your model of the arms all the balls rotate on. Then you will give each point the exact same charge and they will repel each other and spread out evenly with nice bouncy effects.

(The part where you get creative is how you want to add a whole new collection of points, like when the speaker in your Powershop talk clicks on a node.)