css - Circular animation in javascript, greensock tweenlite -

i have point drawn in canvas (html5). want point animate in circular path.

i saw example using time differences set x , y variables, in respect time. of variables , formulas used quite vague, have forgotten physics, d*mn. have researched quite bit on circular motion, can understand of it. here codepen on how done.

basically here parts have identified far:

this.orbit    = 100; // radius of circular orbit this.radius   = 5;   // orbiting object's radius this.velocity = 50;  // yeah velocity without direction, should speed (agree?)  var angle = 0; starting angle of point in orbit inside canvas's quadrant, 

set x , y coordinates respect coordinates of canvas first center of canvas dividing width , height 2 adding product of orbit's radius , position of x , y respect initial position in orbit(angle), , since math trigonometric functions uses radians, should multiply quotient of pi , 180.

this.x = _width  / 2 + this.orbit * math.cos(angle * math.pi / 180) this.y = _height / 2 + this.orbit * math.sin(angle * math.pi / 180)  // doing above, initial position of x , y in orbit. 

what quite trivial me next variables _dx , _dy , _magnitude.

here how point animated:

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; } 

and here execution of script:

  function animate () {       dt = new date() - ldt;        if (dt < 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(); 

with unclear variables, _dx _dy _magnitude cannot understand how works , how computation of variables, vx vy assume velocity respect x , y respectively.

i wanted use greensock tweenlite animation , done so:

  point.prototype.update = function(p){        var _to = {            x: , // change value of x            y: , // change value of y            ease: cubic.easeinout,            oncomplete: function () { this.update(p) }         }          tweenlite.to(point, 2, _to)   } 

as can see first parameter current object (point), second parameter time, assume velocity , the third parameter change in object's properties, x , y.

question

i made codepen, how use gsap tweenlite animate circle did, suppose using tweenlite make little simple.

in case trying use tweenlite animate point crow flies, , trigger tweenlite.to() function each new position of point. method of using tweenlite.to() function has no sense , performance, because distance between 2 position of point short. so, method slow down animation because instead of draw point in new position want animate it. best solution in case trying use tweenlite's methods animate whole circle. take on article: tween around circle

especially on these examples: 1) http://codepen.io/greensock/pen/jcdbq (not canvas, displays main idea)

tweenmax.to("#logo", 4, {rotation:360, transformorigin:"40px -100px", repeat:10, ease:linear.easenone}); 

2) , http://codepen.io/rhernando/pen/kjmdo