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. CODEPEN

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