How to circle pack ellipses of pre-defined sizes in p5.js

p5.js Coding Questions
1

I saw the coding train tutorials on how to grow circles until they touch each other in circle packing, but if I already have some circles of specific sizes, say 10 circles of the sizes in the range of random(5,10), how can I circle pack them using force layout or other means? Thanks!

1 Like
2

Well, the means that you choose matters quite a lot, and you can determine the means in part based on your goals.

Is it a known number of circles that you are trying to pack together into an unbounded space, or are you trying to fill a bounded space with as many of those as possible? Do they have defined starting points? You mention force layout – is there a predefined network of attachments between the circles?

3

it is a known number of circles of varying sizes that I am trying to pack together into an unbounded space. There is no predefined starting point, as long as they don’t overlap.

4

There is an existing circle packing sketch in Processing(Java) that demonstrates an approach to this. Its size needs to be made static for P3, and it needs to be centered, but otherwise it meets your criteria with a simple approach center-out approach that has each circle search its perimeter.

You will want to correct setup like this:

void setup () {
  size(800, 600);

and center draw like this:

void draw () {
  background(255);
  translate(width/2,height/2);

CirclePack
CirclePack.png800×600 23.4 KB

Adapting this approach into p5.js should be pretty straightforward!

2 Likes
5

There’s also an approach on my p5.js collision detection lib’s examples, but I cant speak to the efficiency if it, only that it’s functional as.a demonstration of collision detection:


https://bmoren.github.io/p5.collide2D/examples/randomPlacement/index.html

2 Likes
6

One warning – if you care about packing specifically, randomly placing objects with a collision check will not generate a packing under most circumstances – or the odds of it generating any form of tight packing (with touching edges) are incredibly small, or would require unbelievably long run times.

You can however use random empty space placement to seed a space that is then packed by an additional force (e.g. central gravity).

1 Like