Public Group

# Easing my camera towards a target that is also moving.

This topic is 1119 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

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!

##### Share on other sites

Just choose a speed and have it move toward the target at the indicated speed each frame. If you want to smoothed you can adjust the speed according to the distance to the target.

##### Share on other sites

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.

Edited by thefollower

##### Share on other sites

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;

##### Share on other sites

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.

Edited by Servant of the Lord

1. 1
2. 2
Rutin
16
3. 3
4. 4
5. 5

• 11
• 26
• 10
• 11
• 9
• ### Forum Statistics

• Total Topics
633722
• Total Posts
3013540
×