Hello

I have a function which eases my camera to a target and works as intended, but this only works for static objects. It calculates the distance upon function call. So if the target was moving any reference to it's position after that is not called so for a fast moving object the camera pans to an out dated location.

This is my current code :

function move(start,target,duration){       
    var x   = target.x - camera.x;
    var y   = target.y - camera.y; 
    var startTime   = Date.now();
    var t,amountX,amountY;

    function ease(t, b, c, d) {
         t /= d/2;
         if (t < 1) return c/2*t*t + b;
         t--;
         return -c/2 * (t*(t-2) - 1) + b;
     };

    function update(){

        t = Date.now() - startTime;     

        amountX = ease(t,camera.x,x,duration);
        amountY = ease(t,camera.y,y,duration);

        update_cameraPosition(amountX,amountY);

        if (Date.now() - startTime >= duration){
            return;
        } else {
            setTimeout(update,0);               
        }
    }
    setTimeout(update,0);
}

I was wondering, how would I change this so it would pan to a moving target, but also still have an easing motion ?

Hope you can help!

I could but that then isn't easing. If I choose a speed it no longer eases, it becomes a static movement. I would prefer it to ease, when it comes to camera movement easing makes it look just that bit more polished and nicer on the eyes.

Also I like to learn so just opting for a simpler solution is not really a solution.

The second half of Khat's post covers how to make it ease:

If you want to smoothed you can adjust the speed according to the distance to the target.

Though, rather than just using the distance, I'd do it based on "distance traveled" and "distance left until reaching target".

Something like:

Constants: AmountToTravelBeforeReachingFullSpeed, DistanceFromTargetBeforeSlowingDown, PixelsToMovePerSecondWhenAtMaxSpeed;
Inputs: distanceTravelled, distanceFromTarget;

float maxSpeed = std::max(distanceTravelled / AmountToTravelBeforeReachingFullSpeed), 1.0f);
/* Optional: */ maxSpeed = EaseInAlgorithm(maxSpeed); //Apply an ease if you desire.

float minSpeed = 1.0 - std::max((distanceToTarget / DistanceFromTargetBeforeSlowingDown), 1.0f);
/* Optional: */ minSpeed = EaseOutAlgorithm(minSpeed); //Apply an ease if you desire.

float currentSpeed = std::min(maxSpeed, minSpeed);

float speedInPixelsOrWhatever = (currentSpeed * PixelsToMovePerSecondWhenAtMaxSpeed);
cameraPos += speedInPixelsOrWhatever;
distanceTraveled += speedInPixelsOrWhatever;

Currently you are easing based on time, but you can just as easily ease based on distance.

Easing algorithms don't need to be passed time. You can, for example, ease a color based on the position of an object, just as easily as you can ease a color based on an amount of passed time.

Ease functions are just given a value between (0 and max), and currently you are making "max" be a time duration, and the passed in value being the amount of passed time.

Instead you can make "max" be the target's current location relative to the camera's starting position, and the passed in value being the camera's position relative to the camera's starting position.

This means your "max" of the ease changes every frame, which is perfectly fine.

Though I think the simplest answer to your problem is you are giving your ease function an outdated value. Instead, each time update() is called, you want to pass 'ease()' the current position of the target, not your saved out-dated value.