Circular animation in javascript, greensock tweenlite

[joeyhipolito]

I have a point drawn in an canvas (html5). Then I want this point to animate in a circular path.

 

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 [codepen][1] on how it was done.

 

Basically here are the parts I have identified so far:

 

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,

 

set `x` and `y` 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 `x` and `y`

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 `PI` and `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)

 

by doing the above, we now get the initial position of x and y in the orbit.

 

What is quite trivial to me are the next variables `_dx` and `_dy` and also the `_magnitude`.

 

var _dx = this.x - _width  / 2;

var _dy = this.y - _height / 2;



var _magnitude = Math.sqrt( _dx * _dx + _dy * _dy);

 

Here is how the point is 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 is the execution of the 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)}



     dt = new Date();

     animate();

}

 

With the unclear variables, like `_dx _dy _magnitude` I cannot understand how it works and how the computation of variables, `vx vy` which I assume the velocity with respect to x and y respectively.

 

I wanted to use greensock tweenlite for the animation and it is done like so:

     

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)

}

   

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.

 

 

During the time of the writing I realized what are the variables `_dx` and `_dy`, they are the differences or change in the position of x and y

See the Pen qEZeOe by joeyhipolito (@joeyhipolito) on CodePen

[Carl]

Hi Joey,

 

Welcome to the GreenSock forums.

Thanks for sharing all that info. 

 

I'm not 100% sure if you are looking for more help. It seems you did find a way to animate the proper values with TweenLite, however it looks like the CodePen you linked to is just using the requestAnimationFrame loop. 

 

It would be great to see a CodePen of your solution, or if you need some help please let us know.

 

Thanks

[GreenSock]

joey, I see that you cross-posted at http://stackoverflow.com/questions/27501642/circular-animation-in-javascript-greensock-tweenliteand what I'm not entirely clear about is:

1. Are you trying to literally draw a circle on a <canvas>? Or is your goal to move an object along a circular path? Can you use SVG? (any of these are possible - I just need to know what you want)
2. Do you still need help or did you find a solution? 

FYI, if your goal is to draw a circle progressively, it'd probably be super easy to just use an <svg> along with the new DrawSVGPlugin. It'd be one line of code. Let me know if you need any help with that. 

[joeyhipolito]

Basically what I want to achieve is create  random points that animate in circular path, counter clockwise or clockwise. In my codepen I did not clearRect so that you will see that it is a perfect circle.

I have found this codepen and I was trying to replicate it using tweenlite, or any gsap library. It looks like random, but it is not, each point is animating in circular path, random radius and random direction, random starting angle too.

 

See the Pen qKgGd?editors=101 by Wryte (@Wryte) on CodePen

[GreenSock]

Sorry, joey, I totally missed this - did you ever get what you needed? Do you still need help?