# Dynamically arrange some elements around a circle

I'm looking for a function to arrange some elements around a circle.
result should be something like :  For an element around a centre at (x, y), distance r, the element's centre should be positioned at:

``````(x + r cos(2k?/n), y + r sin(2k?/n))
``````

where n is the number of elements, and k is the "number" of the element you're currently positioning (between 1 and n inclusive). I've combined ThiefMaster's fiddle with the jQuery pointAt plugin:

``````the code is somewhat like above.
might be interesting to some of you.
`````` # Arrange Elements In Circle (Javascript)

``````function arrangeElementsInCircle (elements, x, y, r) {
for (var i = 0; i < elements.length; i++) {
elements[i].scaleX = 1 / elements.length
elements[i].scaleY = 1 / elements.length
elements[i].x = (x + r * Math.cos((2 * Math.PI) * i/elements.length))
elements[i].y = (y + r * Math.sin((2 * Math.PI) * i/store.length))
}
}
``````

Where `x,y` is point co-ordinates and `elements` is array of elements to be placed and `r` is radius. ``````var numElements = 4,
angle = 0
step = (2*Math.PI) / numElements;
for(var i = 0; i < numElements.length; i++) {
var x = container_width/2 + radius * Math.cos(angle);
var y = container_height/2 + radius * Math.sin(angle);
angle += step;
}
``````

It is not complete but should give you a good start.

Update: Here's something that actually works:

``````var radius = 200; // radius of the circle
var fields = \$('.field'),
container = \$('#container'),
width = container.width(),
height = container.height(),
angle = 0,
step = (2*Math.PI) / fields.length;
fields.each(function() {
var x = Math.round(width/2 + radius * Math.cos(angle) - \$(this).width()/2),
y = Math.round(height/2 + radius * Math.sin(angle) - \$(this).height()/2);
\$(this).css({
left: x + 'px',
top: y + 'px'
});
angle += step;
});
``````

Demo: http://jsfiddle.net/ThiefMaster/LPh33/
Here's an improved version where you can change the element count.