Circle grid resize

Programming Questions

jamieht83

in Programming Questions • 1 year ago

Hi,

I am quite a beginner level at processing.

I am trying to create a grid of circles that resizes to fit the set space I have. It's a layout issue and I have tried different approaches like circle packing or recursion. But i think it should be a lot simpler than this? Also I've tried using for loops and have looked at others code but nothing seems quite right.

Here's a rough written algorithm of what I'm trying to achieve:

I have 1 circle to fill the space.

Make it's width and height fill the space.

I have 2 circles to fill the space.

Use a 2x2 layout grid of circles

Therefore divide circle by 2

Put 2 circles in the top 2 spaces in the grid - filling up from top left to bottom right

I have 3 circles to fill the space.

Use a 2x2 layout grid of circles

Therefore divide circle by 2

Put 3 circles in the top 3 spaces in the grid - filling up from top left to bottom right

I have 4 circles to fill the space.

Use a 2x2 layout grid of circles

Therefore divide circle by 2

Put 4 circles in the top 4 spaces in the grid - filling up from top left to bottom right

I have 5 circles to fill the space.

Use a 3x3 layout grid of circles

Therefore divide circle by 3

Put 5 circles in the top 5 spaces in the grid - filling up from top left to bottom right

Etc etc.

Here is where I have got to using someone else's code as a starting point:

Change the 2D array numbers at the top to 3 and 3 or 5 and 5 etc to create a grid that fits the space.

However, my issue is this system only goes up in jumps from 1 to 4 to 9 to 25 etc.

What happens when I want 3 circles in the grid.

What I would ideally want is for the the grid to be laid out like this:

1 circle fills whole space

2 circles is within the 2 by 2 grid and only takes up 2 of the total 4 circles.

This would keep filling up until 5 circles when the grid would change to the 3 by 3 grid.

Etc

It's starting to blow my mind a bit which is sad :(

If anyone needs further explanation or maybe a diagram then please let me know!

Thanks so much in advance!!

boolean grid[][] = new boolean[2][2];
void setup() {
size(250, 250);
smooth();
}
void draw() {
background(128);
float w = width / grid.length;
for (int i=0; i < grid.length; i++) {
for (int j=0; j < grid.length; j++) {
float x = w/2 + i*w;
float y = w/2 + j*w;
if (grid[i][j]) {
fill(0);
}
else {
fill(255);
}
ellipse(x, y, w, w);
}
}
}

Replies(2)

PhiLho

Re: Circle grid resize

1 year ago

Already a little improvement:
for (int j=0; j < grid[i].length; j++) {
It no longer packs in the available area, but it won't crash for new boolean[5][2] (for example).
And I don't see the point of your test (or of your array) since currently the array is always filled with false. Do you plan to change values later?

PhiLho

Re: Circle grid resize

1 year ago

int circleNb = 1;
void setup()
{
size(250, 250);
smooth();
textSize(20);
}
void draw()
{
if (frameCount % 10 == 0)
{
circleNb++;
}
int circlesPerLine = int(sqrt(circleNb) + 0.999);
// println(circleNb + ", " + circlesPerLine);
background(128);
float w = (float) width / circlesPerLine;
int count = 0;
int j = -1;
while (count < circleNb)
{
int i = count % circlesPerLine;
if (i == 0) j++;
float x = w/2 + i*w;
float y = w/2 + j*w;
fill(255);
ellipse(x, y, w, w);
count++;
}
fill(#FF5588);
text(circleNb + ", " + circlesPerLine, 10, 30);
}