title: Why does't this draw an orbit and just draws an ellipse?
body: <p>I started to create a very rough simulation of a solar system using <strong>p5.js</strong>, inspired by <strong>Daniel Shiffman</strong>'s video. </p>
  
  <p>I tried to draw the orbit for every planet by saving the positions where the planet was in an array, then using a for loop to iterate through them and draw a circle at every saved position.</p>
  
  <p>Except it doesn't work!</p>
  
  <p>It should have worked because to be sure that it was the best way to do that I searched and got in another of <strong>Daniel Shiffman</strong>'s videos, and apparently it worked for him but unfortunately not for me!</p>
  
  <p>Could someone please tell me what's the problem with what I'm doing. (Sorry for my poor English)</p>
  
  <p>Down here there's the code in a snippet!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Planet
  {
      constructor(orbitCenter, color, mass, velocityLimit)
      {
          this.orbitCenter = orbitCenter;
          this.color = color;
          this.mass = mass;
          this.velocityLimit = velocityLimit;
  
          this.position = createVector(width/2, 50);
          this.radius = 15;
          this.velocity = createVector(30, 10);
          this.acceleration = createVector(0.0, 0.0);
          this.pathPoints = [];
      }
  
      render() 
      {
          const diameter = this.radius * 2;
          ellipseMode(CENTER);
          noStroke();
          fill(this.color);
          ellipse(this.position.x, this.position.y, diameter);
  
          if(this.pathPoints.length &gt; 1000) 
          {
              this.pathPoints.splice(0, 1);
          }
  
          for(let i = 0; i &lt; this.pathPoints.length; i++)
          {
              let pos = this.pathPoints[i];
              fill(255);
              ellipse(pos.x, pos.y, 5, 5);
          }
      }
  
      update() 
      {     
          this.position.add(this.velocity);
          this.velocity.add(this.acceleration);
          this.acceleration = createVector(this.orbitCenter.x, this.orbitCenter.y)
              .sub(this.position)
              .mult(this.mass);
          this.velocity.limit(this.velocityLimit);
          this.pathPoints.push(this.position);
      }
  }
  
  class Star
  {
      constructor(color, position, diameter) 
      {
          this.color = color;
          this.position = position;
          this.diameter = diameter;
      }
  
      render()
      {
          fill(this.color);
          noStroke();
          ellipse(this.position.x, this.position.y, this.diameter);
      }
  }
  
  let sun;
  let earth, mars;
  let sunDiameter = 40;
  
  function setup()
  {
      createCanvas(windowWidth, windowHeight);
      frameRate(60);
  
      let sunPos = createVector(width/2, height/2);
      sun = new Star(color(255, 255, 0), sunPos, sunDiameter);
  
      earth = new Planet(sunPos, color(0, 100, 255), 0.0008, 4.5);
      mars = new Planet(sunPos, color(255, 100, 0), 0.0004, 5);
  }
  
  let toggleOrbit = true;
  function draw()
  {
      background(0);
      sun.render();
  
      earth.render();
      mars.render();
  
      if(toggleOrbit)
      {
          earth.update();
          mars.update();
      }
      
  }
  
  function windowResized()
  {
      resizeCanvas(windowWidth, windowHeight);
      setup();
  }
  
  function keyPressed(e)
  {
      if(e.key == ' ')
      {
          toggleOrbit = !toggleOrbit;
      }
      
      if(e.key == 'c')
      {
          console.log(earth.getPathPoints());
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;Gravity Simulation&lt;/title&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"&gt;&lt;/script&gt;
  
          &lt;style&gt;
              *
              {
                  margin: 0;
                  padding: 0;
                  box-sizing: border-box;
              }
  
              body
              {
                  width: 100vw;
                  height: 100vh;
                  display: flex;
                  align-items: center;
                  justify-content: center;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script src="main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>