# Camera movement too fast

## Recommended Posts

thefollower    354

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 on other sites
Tangletail    2915

What language, and what engine is this?

##### Share on other sites
thefollower    354

What language, and what engine is this?

Javascript.

##### Share on other sites
L. Spiro    25638

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 on other sites
thefollower    354

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 on other sites
DishSoap    698
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 on other sites
thefollower    354

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 on other sites
Tangletail    2915

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