I'm looking for a mathematical formulae to calculate map scrolling inertia. Basically I have an HTML5 Canvas displaying part of a map and I capture the mousedown
/ mousemove
/ mouseup
to calculate my new offset.
And when I scroll the map I want the map to continue scrolling for a few moments after the user stopped dragging the cursor.
I do have a sample implementation but I'm not really satisfied with it. I'd be looking for a nice clean math formulae to achieve this. I'd like my map to behave for example like in Civ-5 when you scroll the map around.
Here is part of my implementation: (working jsfiddle: https://jsfiddle.net/CowWarrior/dkxnj5d8/1/)
//mouseup
stopMapDrag: function (e) {
var movementX = (e.pageX - this.startX);
var movementY = (e.pageY - this.startY);
this.mapOffsetX = parseInt(this.mapOffsetX) + movementX;
this.mapOffsetY = parseInt(this.mapOffsetY) + movementY;
this.isDragging = false;
this.displayMap();
//calculate last vector
ui.vectorX = parseInt(e.pageX - ui.absStartX);
ui.vectorY = parseInt(e.pageY - ui.absStartY);
//show inertia
setTimeout(function(){ ui.dragInertia(2); }, 30);
console.log("(vectorX:" + ui.vectorX + ", vectorY:" + ui.vectorY + ")");
$('#canViewport').css('cursor', 'default');
},
//need to find a good formulae for inertia
dragInertia: function (factor) {
var movementX = parseInt(ui.vectorX / factor);
var movementY = parseInt(ui.vectorY / factor);
ui.mapOffsetX = parseInt(ui.mapOffsetX + movementX);
ui.mapOffsetY = parseInt(ui.mapOffsetY + movementY);
ui.displayMap();
if (factor < 8)
setTimeout(function(){ ui.dragInertia(factor * 1.2); }, 30);
},