CODEWITHSUNDEEP
javascriptmath
Sir
Sir

Reputation: 8277

Move element around a circle with javascript

I have a JSFiddle of a piece of code that is meant to rotate an element around a given circle.

But i don't know why the circle isn't moving correctly around the line, i must of made a logic error some where but I cannot work out what the error is.

This is my animation/math code:

function move() {  
    if(obj.start == false){
       obj.start    = Date.now();
       obj.now      = Date.now();
    }

var elapsed             = Date.now()-obj.now;
    obj.now             = Date.now();
    obj.curAngle       += elapsed * obj.vector; 

    if((obj.now-obj.start) > obj.animationTime){ 
        alert('Animation Ended!'); 
        return; 
    }

    var x = radius * Math.cos(obj.curAngle);
    var y = radius * Math.sin(obj.curAngle);    

    div.style.left = origin.x + x + 'px';
    div.style.top  = origin.y + y + 'px';

    requestAnimationFrame(move);
};

And the fiddle of the animation:

http://jsfiddle.net/beu63gh5/

Where am I going wrong?

Upvotes: 2

Views: 698

Answers (1)

Bek
Bek

Reputation: 3205

here is you working fiddle http://jsfiddle.net/beu63gh5/2/, you had problem with centering rotating circle and origin, rotating circle was rotate around from top-left corner not center.

#object {
 height:100px;
 width:100px;
 margin-left: -50px; // missing parts
 margin-top: -50px; // missing parts
 background:black;
 border-radius:100%;
 position:absolute;
}

even origin was not calculated from center

var origin = {
  'x': originBox.left + originBox.width / 2,
  'y': originBox.top + originBox.height / 2
};

Upvotes: 4

Related Questions