CODEWITHSUNDEEP
javascriptgeometrytrigonometry
Zoe
Zoe

Reputation: 33

Evenly distribute points on a circle

I need to distribute points evenly on a circumference of a circle, and I'm out of my wits. The result is not exactly circular but rather spiraly, especially with larger numbers of points. I've researched it vigorously but still can't figure out where I could make a mistake.

  window.onload = function() {
      var num = 15;

      var angle = (2 * Math.PI)/(num+1); var count = 0;
      var demo = document.getElementById("demo"); 

      function Dot() {
          this.angle = angle * count;
          count++;
          this.x = Math.cos(this.angle) * 200; 
          this.y = Math.sin(this.angle) * 200;
      }

      Dot.prototype.create = function() {
          var dot = document.createElement("div");
          dot.style.top = this.y + 100 + "px";
          dot.style.left = this.x + 200 + "px";
          dot.className = "dot";
          demo.appendChild(dot);
      }

      for (var i = 0; i < num; i++) {
          var d = new Dot();
          d.create(); 
      }
  }
  .dot {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: blue;
      position: relative;
      text-align: center;
  }
    <!DOCTYPE html>
    <html>
    <head>
      <title>Metcalfe's Law Demo</title>
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="code.js"></script>
    </head>
        <body>
            <div id="container">
                <div id="demo">
                </div>
            </div>
        </body>
    </html>

Upvotes: 2

Views: 2279

Answers (1)

Michał Sałaciński
Michał Sałaciński

Reputation: 2266

The main mistake is bloody simple - just change the style position: relative to position: absolute:

window.onload = function() {
      var num = 12;

      var angle = (2 * Math.PI)/(num); var count = 0;
      var demo = document.getElementById("demo"); 
      console.log(angle)

      function Dot() {
          this.angle = angle * count;
          count++;
          console.log(this.angle,count)
          this.x = Math.cos(this.angle) * 200; 
          this.y = Math.sin(this.angle) * 200;
      }

      Dot.prototype.create = function() {
          var dot = document.createElement("div");
          dot.style.top = this.y + 200 + "px";
          dot.style.left = this.x + 200 + "px";
          dot.className = "dot";
          demo.appendChild(dot);
      }

      for (var i = 0; i < num; i++) {
          var d = new Dot();
          d.create(); 
      }
  }
.dot {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      background: blue;
      position: absolute;
      text-align: center;
  }
<!DOCTYPE html>
    <html>
    <head>
      <title>Metcalfe's Law Demo</title>
      <link rel="stylesheet" href="style.css">
      <script type="text/javascript" src="code.js"></script>
    </head>
        <body>
            <div id="container">
                <div id="demo">
                </div>
            </div>
        </body>
    </html>

Upvotes: 5

Related Questions