We have x which represents an active value, y represents the value we want the former to reach (may be decimal and / or negative), z describes how fast the former chases the later. The code is ran in an interval and each iteration is meant to get the value of x closer to y by z amount, based on how far ahead or behind the value is to its target. The target value can change to anything else between iterations.
For a simple example: If the current value is 0, the target value we're interpolating to is 1, while the time would probably be at a default value of 1. The result should look something like this:
Iteration 0: x = 0
Iteration 1: x = 0.5
Iteration 2: x = 0.75
Iteration 3: x = 0.875
Iteration 4: x = 0.9375
x never actually reaching 1 is fine since there's going to be some threshold at which to stop, eg: if(Math.abs(y - x) < 0.125) x = y. I primarily have an issue with the math for making x chase after y in a curved manner (slow down the closer it gets). I tried simply using x = (x + y) / 2 which would smoothly bring the value closer as desired, but I'm not sure how it's handling negative numbers or where to plug z in so I can also control the speed.
You may use this formula for each iteration:
x += (target - x) * speed;
let x = 0;
let speed = 0.5;
let target = 1;
const THRESHOLD = 0.001;
while(Math.abs(x - target) > THRESHOLD) {
x += (target - x) * speed;
console.log(x);
}Here's an example using this technique:
let targetX = 0, targetY = 0;
let x = 0, y = 0;
const box = document.querySelector('.box');
let speed = 0.1;
document.body.addEventListener('mousemove', ({x, y}) => {
[targetX, targetY] = [x, y];
});
const tick = () => {
x += (targetX - x) * speed;
y += (targetY - y) * speed;
box.style.left = `${x}px`;
box.style.top = `${y}px`;
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);body {
height: 100vh;
}
.box {
width: 4px;
height: 4px;
background-color: red;
position: absolute;
}<div class="box"></div>