How to make an object smoothly catch up with the mouse?

Question

JavaScript

That is, with sudden movements, the object should smoothly accelerate and then slow down when approaching the mouse. The position of the mouse can constantly change, so we only know the position of the object and the coordinates of the mouse at a particular moment in time, in the next frame the data may be different.

Answer 1

On the mousemove event, add the mouse coordinates to the queue
On requestAnimationFrame, pull out several elements from the queue, and the larger the queue, the more we pull (you need to select), adjust the velocity vector according to the received set of coordinates and draw the movement

Answer 2

A series of tutorials that will answer all your questions .

Answer 3

PID controller without integral part. The vector from the object to the mouse is the regulation deviation. The acceleration vector of the object in one cycle is the control action.