使用正弦和余弦将圆圈定位在一个圆圈中

Question

所以我想将我的圆圈放在一个圆圈中，这就是我目前为止的情况。

Here's codepen如果你想现场查看它。

SCSS

$num: 200; 

$angle: 0; 
$step: (pi())/10; 


@for $i from 1 through $num { 

    $angle: $step + $angle; 
    //$radians: rad($angle); 

    $mar: $num; 

    $top: $i * cos($angle); 
    $left: $i * sin($angle); 

    .cir:nth-child(#{$i}) { 

    margin-left:$left + px; 
    margin-top:$top + px; 

    background: hsl($i*pi(), 50, 70); 
    opacity:0.8; 

    border-radius: 50%; 
    //border:1px solid gray; 

    width:5px; 
    height:5px; 

    position:absolute; 

    opacity:0; 


    animation:no-#{$i} 1s ease infinite; 
    animation-delay:$i*0.01s; 


    } 

Haml的（就在那吐出200个div的循环）

- 200.times do 
    .cir 

使用这种算法，我能够创造这样的事情：

我知道因为它从中心增加的事实，并且当前div和下一个之间的空间每次增加。

我试图使它使得每个圆圈是也许在360 /（numberOfDivs）度直到div的已形成一个圆，并且下面的图像是具有少得多的圆圈类的一个实例：

我希望我有道理，如果是这样，我将不胜感激任何帮助。

我知道有什么毛病我的算法：（可能在这一领域）

$top: $i * cos($angle); 
$left: $i * sin($angle); 

，并希望有人知道如何解决它。

预先感谢您。

Answer 1

考虑：
大圈与CX, CY
问题为中心的半径R：
周围放置大的无间隙

首先，我们必须找到小圈子r半径N小圆圈：
大，小圆圈的中心和触点形成正确的矩形与斜边R+r，角度Pi/N和腿（cathetus）r。所以，简单的三角函数给我们的公式：

r = (R + r) * Sin (Pi/N) 
r = R * Sin (Pi/N)/(1 - Sin(Pi/N)) 

（快速检查了6圈给人角度Pi/6和r = R - 真）

现在，我们可以计算出中心坐标为第i个小圈子：

XC[i] = CX + (R + r) * Cos(i * 2 * PI/N) //round to integers if needed 
YC[i] = CY + (R + r) * Sin(i * 2 * PI/N) //angles in radians 

如果需要边界平方的无限坐标，只需从上面计算的值中减去r

$num: 12; 

$step: 2*pi()/$num; 

@for $i from 1 through $num { 

    $angle: $step * $i; 

    $top: use my formula