Interpolating mouse positions using Javascript

-

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 parentcontainer, 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. 

Example Instantiation

new Interpolater({ trackSpeed: 200,
                   fraction: 0.5,
                   elements: {
                    parent: document.getElementsByTagName(“body”)[0],
                    mouse: document.getElementById(‘mouse’)
                   },
                   step: function(data) {
                     data.mouse.style.left = data.position.x + ‘px’;
                     data.mouse.style.top = data.position.y + ‘px’;
                   }
                 });

Example Instantiation Using Sockets

new Interpolater({ trackSpeed: 200,
                   fraction: 0.5,
                   elements: {
                    parent: document.getElementsByTagName(“body”)[0]
                   },
                   step: function(data) {
                     socket.emit(‘mouse’, { x: data.position.x, y: data.position.y, });
                   }
                 });

 

The Interpolater Class

function Interpolater(data) {
  var self = this;
  this.fraction = (typeof data.fraction !== ‘undefined’) ? data.fraction : 0.5;
  this.trackSpeed = (typeof data.fraction !== ‘undefined’) ? data.trackSpeed : 200;
  this.parent = data.elements.parent;
  this.mouse = data.elements.mouse;
  this.step = data.step;
  this.x = 0;
  this.y = 0;
  this.parent.onmousemove = function(e) {
    self.x = e.clientX – this.offsetLeft;
    self.y = e.clientY – this.offsetTop;
  }
  this.cords = [ { x: this.x, y: this.y }, { x: this.x, y: this.y } ];
  this.track();
}
Interpolater.prototype.track = function() {
  var self = this;
  var mouseCords = setInterval(function() {
    self.cords.push({ x: self.x, y: self.y });
    self.cords.shift();
    self.calculate(function(position) {
     position.x = position.x – 51.5;
     position.y = position.y – 51.5;
     self.step({ mouse: self.mouse, position: { x: position.x, y: position.y} });
    });
  }, self.trackSpeed);
}
Interpolater.prototype.calculate = function(callback) {
  var nx = this.cords[0].x + (this.cords[1].x – this.cords[0].x) * this.fraction;
  var ny = this.cords[0].y + (this.cords[1].y – this.cords[0].y) * this.fraction;
  callback({ x: nx, y: ny });
}

Your comments.