I need help arranging a group of circles around another circle without any of them overlapping. I have all the radius measurements for each circle, as well as the coordinates for the target circle.
The target circle will always be large enough to contain all the smaller circles.
Refer to this diagram:
https://i.sstatic.net/9teFn.png:
interface Circle {
radius: number;
x: number;
y: number;
}
const childRadii = [1, 3, 2, 5, 1, 2];
const largeCircle = { radius: 10, x: 0, y: 0 };
const arrangedCircles = positionCirclesOnCircle(largeCircle, childRadii);
function positionCirclesOnCircle(
largeCircle: Circle,
radii: number[]
): Circle[] {
const arrangedCircles: Circle[] = [];
//for each of our radii find the correct x and y position along largeCircle
for (let index = 0; index < radii.length; index++) {
//find the x and y pos for this circle
//push to arrangedCircles
}
return arrangedCircles;
}
I'm unsure of what equations or mathematical formulas to apply in order to determine the x and y positions for each of the child circles.
I came across a similar concept on a Math forum, but I'm struggling to convert it to TypeScript.