JS - cant increment rotation attribute within loop?

Question

Currently all the circles(atoms) are being placed on top of each other.

I am trying to increment a specific attribute so that the circles(atoms) start on the opposite side of each other. In my fiddle I am creating SVG's and trying to set a different rotation within each loop.

Attempts: Tried to increment using ++ and += although I cant seem to programmatically add an equal amount of separation between each atom. Also tried to add an array of desired values that can be added to the rotation property but in the end those values will change because the amount of atoms will change.

Here is my working JS fiddle:

https://jsfiddle.net/hab_1/qj9rwdmf/5/

  let mainAtom = function(xPos, yPos, name){
for(i = 0; i < ring; i++){
    var mainAtom = document.createElementNS('http://www.w3.org/2000/svg','circle');
    mainAtom.setAttribute('cx', xPos);
    mainAtom.setAttribute('cy', yPos);             
    mainAtom.setAttribute('r', '5');
    mainAtom.setAttribute('fill', atomFillColor);
    mainAtom.setAttribute('stroke', atomStrokeColor);
    mainAtom.setAttribute('stroke-width', '3');
    mainAtom.setAttribute('z-index', '2');
    // mainAtom.setAttribute('rotate', '36');
  /*   const name = [" one", " two", " three"]   */
    mainAtom.setAttribute('class', 'atom' + " " + name + " " + i) 
  var svg = document.getElementById('svgx'); 
    svg.appendChild(mainAtom); 
}

}

Question: Is there a way to space the created circles(atoms) evenly, rather than be placed on top of each other?

Answer 1

If I understood your question correctly, you need to use trigonometric functions to assign the correct coordinate to each atom (instead of trying to rotate it). This should give you an idea:

rings =[2, 8, 18, 32, 32, 18, 8]

rings.forEach(ring => {

  let mainRingStrokeColor = "orange"
  let mainRing = function(xPos, yPos, r) { 
    let mainRing = document.createElementNS('http://www.w3.org/2000/svg','circle');
      mainRing.setAttribute('cx', xPos);
      mainRing.setAttribute('cy', yPos);  
      mainRing.setAttribute('r', r);
      mainRing.setAttribute('fill', 'rgba(0,0,0,0)');
      mainRing.setAttribute('stroke', mainRingStrokeColor);
      mainRing.setAttribute('stroke-width', '3');
    let svg = document.getElementById('svgx');
        svg.appendChild(mainRing); }
      
  let atomFillColor = "white"
  let atomStrokeColor = "orange"
  
  let mainAtom = function(xPos, yPos, r, name){
    for(i = 0; i < ring; i++){
        var mainAtom = document.createElementNS('http://www.w3.org/2000/svg','circle');
        mainAtom.setAttribute('cx', xPos + r * Math.cos((2 * Math.PI * i)/ring));
        mainAtom.setAttribute('cy', yPos + r * Math.sin((2 * Math.PI * i)/ring));
        //mainAtom.setAttribute('cx', xPos);
        //mainAtom.setAttribute('cy', yPos);
        mainAtom.setAttribute('r', '5');
        mainAtom.setAttribute('fill', atomFillColor);
        mainAtom.setAttribute('stroke', atomStrokeColor);
        mainAtom.setAttribute('stroke-width', '3');
        mainAtom.setAttribute('z-index', '2');
        //mainAtom.setAttribute('rotate', '180deg');
      /*   const name = [" one", " two", " three"]   */
        mainAtom.setAttribute('class', 'atom' + " " + name + " " + i) 
      var svg = document.getElementById('svgx'); 
        svg.appendChild(mainAtom); 
    }
  } 
  
    //create atoms and rings
    if(ring <= 2){
        mainRing(120, 120, 30) 
        mainAtom(120, 120, 30, "orbit1")
    } else if (ring <= 8 && ring > 2 ) {
        mainRing(120, 120, 50)
        mainAtom(120, 120, 50, "orbit2")
    }   else if (ring <= 18 && ring > 8) {
        mainRing(120, 120, 70)
        mainAtom(120, 120, 70, "orbit3")

        mainRing(120, 120, 90)
        mainAtom(120, 120, 90, "orbit4")
    }
  
})

https://jsfiddle.net/2uq14gx9/36/