title: Moving an object on a path using p5.js
body: <p>I'm trying to write a code that mimics what happens in <a href="https://www.facebook.com/brightside/videos/893000730828671/" rel="nofollow">this video</a> in an HTML canvas. </p>
  
  <p>My code differs in that each time the page loads or is refreshed, the radiuses of the two circles are randomly generated. I need the "planets" to travel at the same speed along the circumferences of their respective circles.</p>
  
  <p>I'm using the p5.js to draw to the canvas. Is there something in p5.js that draws an object according to a path, in my case a path that is a circle? </p>
  
  <p>I've looked through the references and came across vectors but I don't quite understand what they do.</p>
  
  <p>My code so far:</p>
  
  <pre><code>var w = window.innerWidth;
  var h = window.innerHeight;
  var r1, r1;
  var d;
  var x1, x2, y1, y2;
  var angle = Math.PI / 4;
  
  function setup() {
      // canvas setup
      createCanvas(w, h);
      background(255);
      angleMode(RADIANS);
  
      // randomly generated radiuses 
      r1 = Math.floor(Math.random() * (h/2-300)) + 300;
      r2 = Math.floor(Math.random() * (200-100)) + 100;
  
      // drawing the two ellipses
      ellipseMode(CENTER);
      noFill();
      ellipse(w/2, h/2, r1*2, r1*2);
      ellipse(w/2, h/2, r2*2, r2*2);
  
  }
  
  function draw() {
  
      // points on the circles
      x1 = (r1 * (Math.cos(angle))) + (w/2);
      y1 = (h/2) - (r1 * (Math.sin(angle)));
      x2 = (r2 * (Math.cos(angle))) + (w/2);
      y2 = (h/2) - (r2 * (Math.sin(angle)));
  
      // drawing two circles at those points
      ellipseMode(CENTER);
      noStroke();
      fill('rgb(140, 140, 140)');
      ellipse(x1, y1, 20, 20);
      ellipse(x2, y2, 20, 20);
  
      // randomly generated color for the line
      var r = random(0, 255);
      var g = random(0, 255);
      var b = random(0, 255);
      stroke(r, g, b);
      strokeWeight(1);
      // drawing the line that connects the two points
      line(x1, y1, x2, y2);
  
      // animation????
      angle = angle + (10 * (Math.PI / 180));
  
  }
  </code></pre>
  
  <p>The problem with the last line is that it creates <a href="http://i.stack.imgur.com/ZSQFh.png" rel="nofollow">evenly spaces lines</a>, not the pattern that is created in the video.</p>