As I strive to arrange 15 div elements evenly in a circle with a radius of 150px, my current code seems to produce an oddly shaped ellipse that overlaps. Can you help rectify this issue?
Check out the Fiddle for reference.
// To maintain global reference to the div#main element, initially assign it ... in a meaningful location :)
var main = document.getElementById('main');
var circleArray = [];
// Function to move a circle based on mouse approach distance
var moveCircle = function(circle, dx, dy) {
};
// Examination of all circle elements to determine any necessary movements.
var checkMove = function() {
};
var setup = function() {
for (var i = 0; i < 15; i++) {
// Create an element, add it to array, and trigonometrically assign its coordinates.
// Then append to "main" div
var circle = document.createElement('div');
circle.className = 'circle number' + i;
circleArray.push(circle);
circleArray[i].posx = Math.round((150 * Math.cos(i * (2 * Math.PI / 15)))) + 'px';
circleArray[i].posy = Math.round((150 * Math.sin(i * (2 * Math.PI / 15)))) + 'px';
circleArray[i].style.position = "relative";
circleArray[i].style.top = circleArray[i].posy;
circleArray[i].style.left = circleArray[i].posx;
main.appendChild(circleArray[i]);
}
};
setup();
window.addEventListener('load', function() {
});div {
box-sizing: border-box;
}
div#main {
position: absolute;
left: 50%;
top: 50%;
}
div.circle {
position: absolute;
width: 20px;
height: 20px;
border: 2px solid black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}<div id="main"></div>If you have any insights or recommendations on what might be going wrong here, please share them. Thank you!