How to Place Elements Around Cirlcle

Question

I found something like this

Most of the math that goes into basic shape-based positioning is relatively straightforward. Most likely, you probably already covered him at school, so much of this would seem familiar. Consider that the circle has a center (j, k) and a radius r. The x and y positions for any point that occurs on the path circle, then

x (t) = r cos (t) + j, y (t) = r sin (t) + k. A more general way to write this text, which can be used for our first attempt at positioning based on coordinates :? 12

x = centerX + Math.cos (radian) * radius; y = centerY + Math.sin (radian) * radius;

where radians = (angle_of_the_circle / 180) * Math.PI. centerX is the center of the X circle on our page, and center Y is the center of the Y circle.

Can someone explain my concept to the above methods how it works?

Answer 1

Since you seem to like my example posted in a comment, I thought I would post it as an answer so that it could live forever in the answer section.

$(document).ready(function() { var radius = 100; var xCenter = 120; var yCenter = 120; var cnt = $('li').length; var angle = 0; var angleDelta = 2 * Math.PI / cnt; $('li').each(function(i, el) { x = radius * Math.cos(angle) + xCenter; y = radius * Math.sin(angle) + yCenter; $(this).css({top: y, left: x}); angle += angleDelta; }) }) 

And some of the scripts based on this jsfiddle.net/9Z7a8 Simple start
jsfiddle.net/9Z7a8/1 A larger example is simply changing the radius, the number <li> and the offset value for the center.
jsfiddle.net/9Z7a8/6 Adding <li> at runtime

jsfiddle.net/9Z7a8/7 Some randomness when adding new elements.
jsfiddle.net/9Z7a8/8/ And for fun one with a color change (not perfect)