Wartybliggens

Colliding Groups

Recommended Posts

I would like to have multiple "areas" that cannot overlap on the screen (that collide). The areas would vary in size, and would be rather round/oval-shaped. Then within each area I will have a lot of circles (imagine marbles) which are also separate from each other (perhaps colliding or keeping away from each other as if suspended in a gel), around a title. I've attached a crude drawing to give the general idea (using animals for example, not the actual intended outcome). So my challenge is to have nested bounds, and I can't find an example like this. Can someone point me in the right direction? 

animal_group_example.jpg

Share this post


Link to post
Share on other sites

I'm not sure how useful it would be to use but d3 is used to render stuff like this all the time, maybe have a look around there for a way to proceed.

There may be better ways to do it, but I'd start with:

Organise dots in to groups.

Each group has a central text area.

Each tick dots should follow a couple of rules:

* They should try to remain close to the central text area i.e. if they are too far away move them closer

* They should not overlap the text i.e. if too close move them away

* They should move away from dots in the same group (or all groups) i.e. if too close to another dot then move away

Those rules could also be followed for the groups, i.e. they want to move to the centre of the whole area but must also maintain separation from other groups in the entire set.

By implementing those rules you'll get a system that ends up looking how you want, if you parameterise some of your algorithms then you can fiddle with the values to get more fine-grained control over behaviour i.e. proximity thresholds, movement rates etc etc.

Hardest thing is deciding when you let a dot settle it's position i.e. take any dot, it wants to move towards the centre of its group, but, not all dots can be close to the centre so outside ones will try to move in, but be constrained by the dot-proximity rule, which can lead to them constantly moving around, so you have work out a heuristic that lets balls settle in to a position, or accept that they'll probably always be moving a small amount.

If you've ever heard of boids then all this will be familiar.

Share this post


Link to post
Share on other sites

If you have static bodies (cell groups not moving) you can do something like this:

Your drawing kind of looks like cells, so you might get more ideas from the example. You can switch to a dynamic cell within the update function. Groups can collide with each other, so collisions between cells should be possible. I think you will rely on some OOP techniques to build up multiple cells, so that you can define different cell shapes and also bodies inside the cell. Also, this can become very expensive in your case.. but maybe you can figure something out. You can also do this in P2 physics, close example:

 

 

Share this post


Link to post
Share on other sites

Hello @samid737 and @mattstyles - I have been meaning to thank you for posting suggestions here. I did try out Samid's idea, and learned a ton from it. Eventually I came up with a different approach, using object-oriented code of course, which you may find interesting. Imagine egg whites and yolks:

  • The egg whites (the outer circles - each a sprite using setCircle and P2 physics) all belong to the same collision group, but are invisible.
  • The inner circle "yolks" are also invisible but track to their outer circles.
  • A text box follows each inner circle.
  • All "marbles" (also sprites using setCircle) belong to another collision group. Sets of marbles are created for each "egg" and are connected by invisible springs (P2 spring physics) of varying length. This way, marbles from different groups do collide, which helps keep the groups separate from each other. 

There are many (many) more details in the code as you can imagine, but that's the gist.

Thanks again.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.