пакет в маленьких кругах в более крупный круг

Question

Я пытаюсь выяснить способ упаковки меньших кругов в большую, но по какой-то причине меньшие круги не выровнены правильно.

Я считаю, что это расчет положения, который, вероятно, отсутствует.

Пожалуйста, смотрите код для более подробной информации:

var c_el = document.getElementById("myCanvas"); 
 
var ctx = c_el.getContext("2d"); 
 

 
var canvas_width = c_el.clientWidth; 
 
var canvas_height = c_el.clientHeight; 
 
var circle1 = { 
 
\t r: 50, /// radius 
 
\t pos: { 
 
\t \t x: (canvas_width/2), 
 
\t \t y: (canvas_height/2) 
 
\t } 
 
} 
 

 
var circle2 = { 
 
\t r: 5, 
 
\t pos:{} 
 
} 
 

 
var c2h = circle2.r * 2; /// circle height //// 
 
var c2w = c2h; //// circle width ///// 
 

 
var c1h = circle1.r * 2; /// circle height //// 
 
var c1w = c1h; //// circle width ///// 
 

 
var max_circles2_H = c1h/c2h; 
 

 
var r = circle1.r; 
 
var d = circle1.r - 2; //// segement distance from center //// 
 

 
drawCircle(circle1); 
 
for(var col = 1; col < max_circles2_H; col++){ 
 
\t var d = circle1.r - (col * c2h); /// distance from center to segment /// 
 
\t var c = 2 * (Math.sqrt((r*r) - (d * d))); //// circle's chord length 
 
\t var max_circles2_W = c/c2w; 
 
\t for(var row = 1; row < max_circles2_W; row++){ 
 
\t \t circle2.pos.x = (row * c2w) + (circle1.pos.x - circle1.r); 
 
\t \t circle2.pos.y = (col * c2h) + (circle1.pos.y - circle1.r); 
 
\t \t drawCircle(circle2); 
 
\t } 
 
} 
 

 

 
function drawCircle(circle){ 
 
\t ctx.beginPath(); 
 
\t ctx.arc(circle.pos.x, circle.pos.y, circle.r, 0, 2 * Math.PI); 
 
\t ctx.stroke(); 
 
}

<canvas id="myCanvas" width="300" height="150">

Любая помощь очень ценится.

Answer 1

Это близко, но нужно немного подгонять. Вы можете увидеть, где вычисляется x_offset, и попробовать другую математику, чтобы затянуть ее.

обновление Добавлен Math.ceil в max_circles2_W и, похоже, подходит.

var c_el = document.getElementById("myCanvas"); 
 
var ctx = c_el.getContext("2d"); 
 

 
var canvas_width = c_el.clientWidth; 
 
var canvas_height = c_el.clientHeight; 
 
var circle1 = { 
 
\t r: 50, /// radius 
 
\t pos: { 
 
\t \t x: (canvas_width/2), 
 
\t \t y: (canvas_height/2) 
 
\t } 
 
} 
 

 
var circle2 = { 
 
\t r: 5, 
 
\t pos:{} 
 
} 
 

 
var c2h = circle2.r * 2; /// circle height //// 
 
var c2w = c2h; //// circle width ///// 
 

 
var c1h = circle1.r * 2; /// circle height //// 
 
var c1w = c1h; //// circle width ///// 
 

 
var max_circles2_H = c1h/c2h; 
 

 
var r = circle1.r; 
 
var d = circle1.r - 2; //// segement distance from center //// 
 

 
drawCircle(circle1); 
 
for(var col = 1; col < max_circles2_H; col++){ 
 
\t var d = circle1.r - (col * c2h); /// distance from center to segment /// 
 
\t var c = 2 * (Math.sqrt((r*r) - (d * d))); //// circle's chord length 
 
\t var max_circles2_W = Math.ceil(c/c2w); 
 
    
 
    // CALCULATE OFFSET HERE 
 
    var x_offset = Math.floor((c1w - (max_circles2_W * c2w))/2); 
 
    
 
\t for(var row = 1; row < max_circles2_W; row++){ 
 
\t \t circle2.pos.x = (row * c2w) + (circle1.pos.x - circle1.r) + x_offset; 
 
\t \t circle2.pos.y = (col * c2h) + (circle1.pos.y - circle1.r); 
 
     ctx.fillText(row, circle2.pos.x-3, circle2.pos.y+4); 
 
\t \t drawCircle(circle2); 
 
\t } 
 
} 
 

 

 
function drawCircle(circle){ 
 
\t ctx.beginPath(); 
 
\t ctx.arc(circle.pos.x, circle.pos.y, circle.r, 0, 2 * Math.PI); 
 
\t ctx.stroke(); 
 
}

<canvas id="myCanvas" width="300" height="150">