JavaScript: How to make a variable gradually approach a target value at a given speed?

user_7563454 0
Viewed 85

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.

javascript
1 Answers

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>

user_102892650
Related