Hello,

I have a camera function which the user clicks on the screen and the camera moves to that location. The problem how ever is the camera moves way past the point the user clicked, and the camera moves faster the further away the location of the click was from the camera.

I believe it is related to my maths in the fraction function but this is the whole animation code:

if(evt.button == 0){ // left click              
  clearInterval(this.scroll);

  var initial      = worldPosition(canvas.width/2,canvas.height/2),
      target       = worldPosition(mouse.onElement.x,mouse.onElement.y),            
      deltaX       = (target.x - initial.x),
      deltaY       = (target.x - initial.y),
      timeStart    = Date.now(),
      timeLength   = 800;


    // see below code snippet for data example 
    console.log(initial);
    console.log(target);
    console.log({'Dif X':target.x-initial.x,'Dif Y':target.y-initial.y}); 


    function update(){
        function fraction(t){       
            var difx      = target.x - (initial.x + t*deltaX);
            var dify      = target.y - (initial.y + t*deltaY);
                camera.x -= difx;
                camera.y -= dify;
        }   

        function easing(x){
            return 0.5 + 0.5 * Math.sin((x - 0.5) * Math.PI);
        } 

        var t = (Date.now() - timeStart) / timeLength;
          if (t > 1) {
            fraction(1);
            clearInterval(this.scroll);
          } else {
            fraction(easing(t));
          }
    }
    this.scroll = setInterval(update, 1); //start animation
}

Initial : {x: 576.3685331485237, y: -2608.131466851476}
Target  : {x: 577.3685331485237, y: -2615.631466851476}
Deltas  : {Dif X: 1, Dif Y: -7.5}

What language, and what engine is this?

What language, and what engine is this?

Javascript.

Increase timeLength to make it take longer.

If timeLength is always the same number, then it only makes sense that it would move faster if the distance increases. How else is it going to cover a larger distance in the same amount of time?

L. Spiro

Increase timeLength to make it take longer.

If timeLength is always the same number, then it only makes sense that it would move faster if the distance increases. How else is it going to cover a larger distance in the same amount of time?

L. Spiro

Good point, perhaps my method to approach this idea is not the best way. I'm kinda guessing as I go on finding what is the most elegant and manageable way to handle animation using delta time and easing functions. Are there better approaches that i can try?

Could you make time length a function of the distance?

I'm not sure what you are doing for units on both variables. But if you calculate the distance to a point multiply it by how long you'd like to take per unit distance.

I'm not 100% sure what you mean ?

I did some work on it further and have got it to this : http://jsfiddle.net/hsrvh0L2/

It is a bit more working but it still doesn't move correctly.. not sure why but i think its related to updating camera but i am unsure.

First problem, your camera position seems to be screwing things up. I noticed this after changing the starting position to zero instead of half of the element's width.

After doing this, I can see that the behavior is somewhat decent, The camera continues to rise to the top left, which implies that you have some sort of logic error. It may not be related to the actual math. I suggest outputting your pointer location each time you click. Your camera desires to move to the left, which implies x is always negative. It also desires to move up, so Y is possitive. I can see that you are always adding when you change the cam position.

PS... I don't believe when you create a screen... there is natively a quadrant system. You might want to convert your click to world coordinates.