Calculating mouse velocity with accuracy
http://stackoverflow.com/questions/17516101/calculating-mouse-velocity-with-accuracy#17516230
by NunoMira
HTML
<div id="mapa">
</div>
<br>
Tipo de pernas: <span id="imagem"></span><br>
<br>
Movement - X : <span id="movementX"></span> px<br>
Movement - Y : <span id="movementY"></span> px<br>
Movement : <span id="movement"></span> px<br>
Speed : <span id="speed"></span> px/s<br>
Max. Speed : <span id="maxSpeed"></span> px/s<br>
Acceleration : <span id="acceleration"></span> px/s<sup>2</sup><br>
Max. Positive Acceleration : <span id="maxPositiveAcceleration"></span> px/s<sup>2</sup><br>
Max. Negative Acceleration : <span id="maxNegativeAcceleration"></span> px/s<sup>2</sup><br>
CSS
body{
background-color:#000;
color:gold;
font-family:sans-serif;
}
span{
color:yellow;
}
#mapa {
width: 100%;
height: 150px;
background-color: yellow;
display: inline-block;
}
JavaScript
var imagem = ['===========================>>>>', '=========>', '-->'];
function getImage(s) {
if (s < 100)
return imagem[2];
else if (s > 100 && s < 500)
return imagem[1];
else
return imagem[0];
}
var prevEvent, currentEvent;
/*document.documentElement.onmousemove=function(event){
currentEvent=event;*/
document.getElementById('mapa').onmousemove=function(event){
currentEvent=event;
}
setInterval(function(){
if(prevEvent && currentEvent){
var movementX=Math.abs(currentEvent.screenX-prevEvent.screenX);
var movementY=Math.abs(currentEvent.screenY-prevEvent.screenY);
var movement=Math.sqrt(movementX*movementX+movementY*movementY);
document.getElementById("movementX").innerText=movementX;
document.getElementById("movementY").innerText=movementY;
document.getElementById("movement").innerText=Math.round(movement);
//speed=movement/100ms= movement/0.1s= 10*movement/s
var speed=10*movement;//current speed
document.getElementById("imagem").innerText=getImage(speed);
document.getElementById("speed").innerText=Math.round(speed);
document.getElementById("maxSpeed").innerText=Math.round(
speed>maxSpeed?(maxSpeed=speed):maxSpeed
);
var acceleration=10*(speed-prevSpeed);
document.getElementById("acceleration").innerText=Math.round(
acceleration
);
if(acceleration>0){
document.getElementById("maxPositiveAcceleration").innerText=Math.round(
acceleration>maxPositiveAcc?(maxPositiveAcc=acceleration):maxPositiveAcc
);
}
else{
document.getElementById("maxNegativeAcceleration").innerText=Math.round(
acceleration<maxNegativeAcc?(maxNegativeAcc=acceleration):maxNegativeAcc
);
}
}
prevEvent=currentEvent;
prevSpeed=speed;
},100);
var maxSpeed=0,prevSpeed=0,maxPositiveAcc=0,maxNegativeAcc=0;