title: Circular animation in javascript, greensock tweenlite
body: <p>I have a point drawn in an canvas (html5). Then I want this point to animate in a circular path.</p>
  
  <p>I saw an example using time differences to set the x and y variables, in respect to time. Some of the variables and formulas used are quite vague, I have forgotten my physics, d*mn. But I have researched quite a bit on circular motion, so I can understand some of it. Here is my <a href="http://codepen.io/joeyhipolito/pen/qEZeOe" rel="nofollow">codepen</a> on how it was done.</p>
  
  <p>Basically here are the parts I have identified so far:</p>
  
  <pre><code>this.orbit    = 100; // this is the radius of the circular orbit
  this.radius   = 5;   // orbiting object's radius
  this.velocity = 50;  // yeah velocity but without direction, should be speed (agree?)
  
  var angle = 0; starting angle of the point in the orbit inside the canvas's quadrant,
  </code></pre>
  
  <p>set <code>x</code> and <code>y</code> coordinates with respect to the coordinates of the canvas
  first get the center of the canvas by dividing the width and the height by 2
  then adding to the product of the orbit's radius and the position of <code>x</code> and <code>y</code>
  with respect to the initial position in the orbit(angle), and since Math trigonometric
  functions uses radians, we should multiply it to the quotient of <code>PI</code> and <code>180</code>.</p>
  
  <pre><code>this.x = _width  / 2 + this.orbit * Math.cos(angle * Math.PI / 180)
  this.y = _height / 2 + this.orbit * Math.sin(angle * Math.PI / 180)
  
  // by doing the above, we now get the initial position of x and y in the orbit.
  </code></pre>
  
  <p>What is quite trivial to me are the next variables <code>_dx</code> and <code>_dy</code> and also the <code>_magnitude</code>.</p>
  
  <p>Here is how the point is animated:</p>
  
  <pre><code>Point.prototype.update = function(dt) {
       var dps   = this.orbit * 2 * Math.PI / this.velocity;
       var angle = (360 / dps) * dt / 1000 * -1;
  
       this.vx = this.vx * Math.cos(angle * Math.PI / 180) - this.vy*Math.sin(angle * Math.PI / 180);
      this.vy = this.vx * Math.sin(angle * Math.PI / 180) + this.vy*Math.cos(angle * Math.PI / 180);
  
       var _magnitude = Math.sqrt( this.vx * this.vx + this.vy * this.vy);
  
       this.vx = this.vx / _magnitude * this.velocity;
       this.vy = this.vy / _magnitude * this.velocity;
  
       this.x += this.vx * dt / 1000;
       this.y += this.vy * dt / 1000;
  }
  </code></pre>
  
  <p>And here is the execution of the script:</p>
  
  <pre><code>  function animate () {
        dt = new Date() - ldt;
  
        if (dt &lt; 500) {
          // context.clearRect(0, 0, canvas.width, canvas.height);
          point.update(dt);
          point.draw(context);
        };
  
        ldt = new Date();
        setTimeout(function() {
            window.requestAnimationFrame(animate);
        }, 1000 / 30)
    }
  
    ldt = new Date();
    animate();
  </code></pre>
  
  <p>With the unclear variables, like <code>_dx _dy _magnitude</code> I cannot understand how it works and how the computation of variables, <code>vx vy</code> which I assume the velocity with respect to x and y respectively.</p>
  
  <p>I wanted to use greensock tweenlite for the animation and it is done like so:</p>
  
  <pre><code>  Point.prototype.update = function(p){
         var _to = {
             x: , // change the value of x
             y: , // change the value of y
             ease: Cubic.easeInOut,
             onComplete: function () { this.update(p) }
          }
  
          TweenLite.to(point, 2, _to)
    }
  </code></pre>
  
  <p>As you can see the first parameter is the current object (point), then the second parameter is the time, I assume this to be the velocity and the the third parameter is the change in the object's properties, x and y.</p>
  
  <h2>Question</h2>
  
  <p>I made the codepen, now How do I use gsap tweenlite to animate the circle like what I did, I suppose using tweenlite will make it a little simple.</p>