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.

## Answer

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>