)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}

Lerp

  1. const lerp = (a, b, t) => a + (b - a) * t;
  2.  
  3. console.log(lerp(0, 100, 0.5));
  4. console.log(lerp(0, 100, 0.1));
  5.  
  6. console.log(lerp(50, 100, 0.5));
  7. console.log(lerp(100, 50, 0.5));
  8.  
  9. const c = document.body.appendChild(document.createElement`canvas`)
  10.   .getContext`2d`;
  11. c.canvas.width = c.canvas.height = 100;
  12. c.fillStyle = 'black';
  13. c.fillRect(0, 0, 100, 100);
  14.  
  15. let time = 0;
  16. const loop = () => {
  17.   c.fillStyle = 'rgba(255, 255, 255, .5)';
  18.  
  19.   time += 0.01;
  20.  
  21.   if (time < 1) {
  22.     c.fillRect(lerp(10, 55, time), lerp(10, 90, time), 5, 5);
  23.   }
  24.   window.requestAnimationFrame(loop);
  25. };
  26. loop();
snippet.zone ~ 2021-22 /// {s/z}