CODEWITHSUNDEEP
javascriptcanvasgeometry
Alexus
Alexus

Reputation: 1973

pack in small circles into a bigger circle

I'm trying to figure out a way to pack in smaller circles into a bigger one , but for some reason smaller circles are not correctly aligned.

I believe it's the position calculation that is probably missing something.

Please see the code for more details:

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 = {
	r: 50, /// radius 
	pos: {
		x: (canvas_width / 2),
		y: (canvas_height / 2)
	}
}

var circle2 = {
	r: 5,
	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++){
	var d = circle1.r - ( col * c2h); /// distance from center to segment ///
	var c = 2 * (Math.sqrt((r*r) - (d * d))); //// circle's chord length
	var max_circles2_W = c / c2w;
	for(var row = 1; row < max_circles2_W; row++){
		circle2.pos.x = (row * c2w) + (circle1.pos.x - circle1.r);
		circle2.pos.y = (col * c2h) + (circle1.pos.y - circle1.r);
		drawCircle(circle2);
	}
}


function drawCircle( circle ){
	ctx.beginPath();
	ctx.arc(circle.pos.x, circle.pos.y, circle.r, 0, 2 * Math.PI);
	ctx.stroke();
}
<canvas id="myCanvas" width="300" height="150">

Any help is greatly appreciated.

Upvotes: 4

Views: 443

Answers (1)

wolfhammer
wolfhammer

Reputation: 2661

This is close but it's needs a little adjusting. You can see where x_offset is calculated and try some different math to tighten it up.

update Added Math.ceil to max_circles2_W and it seems to fit.

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 = {
	r: 50, /// radius 
	pos: {
		x: (canvas_width / 2),
		y: (canvas_height / 2)
	}
}

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


function drawCircle( circle ){
	ctx.beginPath();
	ctx.arc(circle.pos.x, circle.pos.y, circle.r, 0, 2 * Math.PI);
	ctx.stroke();
}
<canvas id="myCanvas" width="300" height="150">

Upvotes: 3

Related Questions