Sign in to follow this  
thefollower

Camera movement too fast

Recommended Posts

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
}

This here is an example console.log data encase it helps:
Initial : {x: 576.3685331485237, y: -2608.131466851476}
Target  : {x: 577.3685331485237, y: -2615.631466851476}
Deltas  : {Dif X: 1, Dif Y: -7.5}

Can any one shed light on where I am going wrong here?

Edited by thefollower

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Edited by thefollower

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Edited by thefollower

Share this post


Link to post
Share on other sites

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.

Edited by Tangletail

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this