HOW: Positionning circles with different sizes along a reference circle's circumference.

Programming Questions

ignivome

HOW: Positionning circles with different sizes along a reference circle's circumference.

in Programming Questions • 2 years ago

Hi guys, I'm wondering how I can do this : Positionning circles with different sizes along a reference circle's circumference.

If each circle have the same size, it's fine (and easy)... but if each circle have a different size ... I have no clue how to do it.. Maybe I'm missing some maths ...

If you have an idea of how to make it...

Here's an illustration of my problem

thanks

Replies(5)

PhiLho

Re: HOW: Positionning circles with different sizes along a reference circle's circumference.

2 years ago

You must compute the angles of segments going from the center to the points where the circles intersect the big circles. Then you sum up the angles, subtract from 360 and divide by the number of spaces between circles. It should show the spacing you need.

ignivome

Re: HOW: Positionning circles with different sizes along a reference circle's circumference.

2 years ago

I tried something like that but unfortunately, the circles overlaps ... where's the problem ?

final float MAX_SIZE = 130.0;
final float MIN_SIZE = 60.0;
float centerSiz = 40.0;
float rad = centerSiz * 0.5 + MAX_SIZE * 0.5;
int ballAmt = 5;
Ball[] balls;
void setup() {
size(300, 350, P2D);
smooth();
initAll();
stroke(255,0,0);
}
void draw() {
background(0);
translate(width/2, height/2);
fill(255);
ellipse(0, 0, centerSiz, centerSiz);
for(int i = 0; i < ballAmt; i++){
balls[i].draw();
line(0, 0, balls[i].x, balls[i].y);
}
noFill();
ellipse(0,0,rad*2, rad*2);
}
void initAll(){
float rnd_start = 0;
float[] sizes = {random(1), random(1), random(1), 1.0}; // normalised sizes
ballAmt = sizes.length;
balls = new Ball[ballAmt];
float total_temp = 0;
for(int i = 0; i < ballAmt; i++) total_temp += sizes[i];
float per_pi = 0;
for(int i = 0; i < ballAmt; i++){
float per_pi_val = TWO_PI * sizes[i] / total_temp;
per_pi += per_pi_val;
float x = sin(per_pi + rnd_start) * rad;
float y = cos(per_pi + rnd_start) * rad;
float posX = sin(per_pi - per_pi_val/2 + rnd_start) * rad;
float posY = cos(per_pi - per_pi_val/2 + rnd_start) * rad;
float siz = sizes[i];
balls[i] = new Ball(posX, posY, map(siz, 0, 1, MIN_SIZE, MAX_SIZE), x, y);
}
}
void mousePressed(){
initAll();
}
class Ball{
float x;
float y;
float posX;
float posY;
float siz;
Ball(float posX, float posY, float siz, float x, float y){
this.posX = posX;
this.posY = posY;
this.siz = siz;
this.x = x;
this.y = y;
}
void draw(){
ellipse(this.posX, this.posY, siz, siz);
}
}

davbol

Re: HOW: Positionning circles with different sizes along a reference circle's circumference.

2 years ago

essentially the same as phi.lho's answer, except in terms of arc lengths rather than angles, use whichever "view" of the problem seems more natural. (s=r*theta, google it, easy to switch one view to the other, if/when needed)

calculate the circumference of the major circle

sum up the arc lengths where the minor circles intersect the major circle

subtract the latter from the former, then divide by number of minor circles

that is the major arc length "spacing" between the edges of each pair of minor circles (the arcs you've marked in pic)

to calculate the minor circle's centers by angle, you'd start theta at zero, calc x|y = majorradius*cos|sin(theta); draw first minor circle, then advance "theta" by the angle spanned by this larger segment: half the current circle's arc length plus the "spacing" arc length plus half the next circle's arc length; repeat.

perhaps easier to code than to describe! :D

hth

PhiLho

Re: HOW: Positionning circles with different sizes along a reference circle's circumference.

2 years ago

Here is my version of your code, using the maths I suggested:

final float MAX_SIZE = 130.0;
final float MIN_SIZE = 60.0;
final float CENTER_SIZE = 40.0;
float MAIN_RADIUS = CENTER_SIZE * 0.5 + MAX_SIZE * 0.5;
int ballAmt = 5;
Ball[] balls;
void setup() {
size(300, 350);
smooth();
textFont(createFont("Arial", 12));
initAll();
stroke(255, 0, 0);
}
void draw() {
background(200);
translate(width/2, height/2);
fill(255);
ellipse(0, 0, CENTER_SIZE, CENTER_SIZE);
for (int i = 0; i < ballAmt; i++) {
balls[i].draw();
line(0, 0, balls[i].x, balls[i].y);
}
noFill();
ellipse(0, 0, MAIN_RADIUS*2, MAIN_RADIUS*2);
}
void initAll() {
float[] sizes = { random(1), random(1), random(1), 1.0 }; // normalised sizes
println("Main radius: " + MAIN_RADIUS);
ballAmt = sizes.length;
balls = new Ball[ballAmt];
float totalAngle = 0;
for (float size : sizes) {
float ballRadius = getRadius(size);
println("Radius: " + ballRadius);
float ballAngle = getAngle(ballRadius);
showAngle("Angle", ballAngle);
totalAngle += ballAngle;
}
float intervalAngle = (TWO_PI - totalAngle) / ballAmt;
showAngle("Total", totalAngle);
showAngle("Interval", intervalAngle);
float currentAngle = 0;
for (int i = 0; i < ballAmt; i++) {
float ballRadius = getRadius(sizes[i]);
float ballAngle = getAngle(ballRadius);
float x = MAIN_RADIUS * cos(currentAngle);
float y = MAIN_RADIUS * sin(currentAngle);
float posX = MAIN_RADIUS * cos(currentAngle + ballAngle / 2);
float posY = MAIN_RADIUS * sin(currentAngle + ballAngle / 2);
balls[i] = new Ball(posX, posY, ballRadius * 2, x, y, i);
currentAngle += intervalAngle + ballAngle;
showAngle("Current", currentAngle);
}
println("Done\n");
}
float getRadius(float size) {
return map(size, 0, 1, MIN_SIZE, MAX_SIZE) / 2;
}
// Compute the angle of the intersecting points of a circle (of given radius)
// and a bigger circle (of given MAIN_RADIUS) with the center of the small circle on the big circle.
float getAngle(float radius) {
// Length of a cord: c = 2 R sin(alpha/2)
// From center of circle to intersecting point: radius = 2 * MAIN_RADIUS * sin(alpha / 4)
float alpha = 4 * asin(radius / MAIN_RADIUS / 2);
return alpha;
}
void showAngle(String msg, float angle) { println(msg + ": " + degrees(angle)); }
void mousePressed() {
initAll();
}
class Ball {
float x;
float y;
float posX;
float posY;
float siz;
int id;
Ball(float posX, float posY, float siz, float x, float y, int n) {
this.posX = posX;
this.posY = posY;
this.siz = siz;
this.x = x;
this.y = y;
id = n;
}
void draw() {
fill(255);
ellipse(posX, posY, siz, siz);
fill(#005599);
text("" + id, posX, posY);
}
}

ignivome

Re: Re: HOW: Positionning circles with different sizes along a reference circle's circumference.

2 years ago

Thanks a lot, this is exactly it :)

Top Reply