Interpolating mouse positions using Javascript
by Jordan Leigh -Introduction
When trying to mirror mouse positions over a network, it can put heavy load on the server & client even when using appropriate technologies such as Node.jsand Web Sockets.
How interpolation works
Linear interpolation works by estimating a position based on two given points. Using Javascript you can periodically catch the mousemove event and parse it using some math to create and estimated position.
Parameters
The first parameter is trackSpeed, this is how often you want to receive updates from the class; the update returns the current interpolated mouse position to the step function. The default track speed in 200ms.
The second parameter is fraction. The fraction parameter allows you to define which point you want to be closer to, the latest and oldest know value. The default value is 0.5 which produces interpolated value exactly in the middle of the latest and oldest known values.
The third and fourth parameters are the DOM elements. The first is the parent container, the Interpolater class will produce position values based relative to this element. The second is the mouse element, this is the element you want to position to show the interpolated results.