Cell-like point distribution

Programming Questions

berechar

in Programming Questions • 1 year ago

Hello everyone,

I was wondering if there's a smart method to distribute points/circles in a radial way.

Let's say you have 100 ellipses with a radius of 10 pixels, how can you determine how may circle-layers are needed and how many/where will their cells be placed on?...

illustration:

Replies(3)

nemecsek69

Re: Cell-like point distribution

1 year ago

Hi. I can answer half of your question.

I don't know if I misunderstood your problem, but it has to do with Hex Numbers (if and only if your circles are placed regularly as in your diagram).

The reference page is http://mathworld.wolfram.com/HexNumber.html (just pay attention they begin with n=0, while we count layers beginning with n=1)

If n is the number of layer, the number of circles c included by it is

c = 3(n-1)(n-1)+3(n-1)+1.

That means:

1 layer -> 1 circle

2 layers -> 3+3+1 = 7 circles

3 layers -> 3*4+3*2+1 = 19 circles...

If you want to place 100 circles and determine how many layers you need, just reverse the formula:

Problem: find n such as c = 3(n-1)(n-1) + 3(n-1) + 1 >= 100

This is solved with n = 7 (c =3*36+3*6+1=127 circles: that means you will fill completely 6 layers leaving 27 empty spaces in the 7th)

Please let me know if I am off track misunderstanding your question before I spend my Christmas holidays trying a solution to place 100 circles :-)

Season's greetings everybody!

Alessandro

berechar

Re: Cell-like point distribution

1 year ago

that is certainly the right direction, thanks!

i will try to write it in suitable code :)

so to find the n variable (the biggest layer), you need to go X times through a loop to test if it is possible?

// EDIT //

ok, so now i'm running through a for loop for 20 times, and it breaks when n >= amountPoints.. and it works!!

so now i'm stuck with the hex-positioning...

size(500, 500);
smooth();
background(255);
fill(0);
int ellipseSize = 10;
int amountTheta = 6;
int amountPositions = amountTheta;
int amountPoints = 19;
int amountCounter = 0;
int amountLayers = 0;
for (int i = 0; i < 30; i++) {
float n = ((3*((i-1)*2)) + (3*(i-1)) + 1);
if (n >= amountPoints) {
println("yes! layer: " + i);
println("with amount of ellipses" + ((3*((i-1)*2)) + (3*(i-1)) + 1));
amountLayers = i;
break;
}
}
amountLayers--;
translate(width/2, height/2);
if (amountPoints > 1) {
ellipse(0, 0, ellipseSize, ellipseSize);
amountCounter++;
for (int i = 0; i < amountLayers; i++) {
for (int j = 0; j < amountPositions; j++) {
float r = (i+1) * ellipseSize + 10;
float x = sin(map(j, 0, amountPositions, 0, TWO_PI))*r;
float y = cos(map(j, 0, amountPositions, 0, TWO_PI))*r;
ellipse(x, y, ellipseSize, ellipseSize);
if (amountCounter <= amountPoints) {
amountCounter++;
}
else {
break;
}
}
amountPositions += amountTheta;
}
}

nemecsek69

Re: Cell-like point distribution

1 year ago

If you don't mind using canvas to check if a cell is already occupied, you can "walk" in a spiral around the already present cells, trying to keep the right side as much as possible. It reminds me the LOGO turtle.

The cell moves along direction dir (in degrees) of a step of length diam (diameter of circles). After placing itself it calculates the next step.

It checks first if the space at the "right side-behind" (corresponding to 4 o'clock) is free. If it is free the new direction (previous direction + 120 degrees) is accepted.

Otherwise it checks the "right side-front" position (corresponding to 2 o'clock). If it is free, the new walking direction is previous direction+60 degrees.

If both cells are not free, the walk proceed straight ahead (there is always space there).

This is the code for 100 circles:

int numSteps = 100; // number of circles
float diam = 30; // diameter of each circle
float posX = 200; // initial position of central circle
float posY = 200;
float dir = 0; // walking direction (in degrees)
size(400, 400);
background(255);
smooth();
PFont f = createFont("Arial", 12);
textFont(f);
textAlign(CENTER, CENTER);
ellipseMode(CENTER);
for (int i=0; i<numSteps; i++) {
// paint the circle
colorMode(HSB, 360, 100, 100);
fill(i*5, 100, 100);
ellipse(posX, posY, diam*.9, diam*.9);
colorMode(RGB, 255, 255, 255);
// and its ID text
fill(0);
text(i+1, posX, posY);
// calculate next position
// is 4 o'clock cell free?
float tempX = posX + diam*cos(radians(dir+120));
float tempY = posY + diam*sin(radians(dir+120));
if (get(int(tempX), int(tempY)) == color(255)) {
// yes, it is free, move there and change heading direction
dir += 120;
}
else { // is 2 o'clock cell free?
tempX = posX + diam*cos(radians(dir+60));
tempY = posY + diam*sin(radians(dir+60));
if (get(int(tempX), int(tempY)) == color(255)) {
// yes, it is free, move there and change heading direction
dir += 60;
}
else { // no, move straight ahead without changing direction
tempX = posX + diam*cos(radians(dir));
tempY = posY + diam*sin(radians(dir));
}
}
// move to the next position
posX = tempX;
posY = tempY;
}

An alternative is to combine some Net's references.

I didn't try them and I'm not sure if they can solve your problem.

From http://stackoverflow.com/questions/2049196/generating-triangular-hexagonal-coordinates-xyz you generate a coordinate system for each circle (they talk about hexagons but it is equivalent)

Then here http://stackoverflow.com/questions/2459402/hexagonal-grid-coordinates-to-pixel-coordinates

you find how to convert hexagons coordinates to (x,y).

Nice day!

Alessandro

Top Reply

Statistics

3 Replies
595 Views
1 Followers

Actions

Permalink