Search the Community

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