Track mouse speed with JS

var timestamp = null;
var lastMouseX = null;
var lastMouseY = null;

document.body.addEventListener("mousemove", function(e) {
    if (timestamp === null) {
        timestamp = Date.now();
        lastMouseX = e.screenX;
        lastMouseY = e.screenY;
        return;
    }

    var now = Date.now();
    var dt =  now - timestamp;
    var dx = e.screenX - lastMouseX;
    var dy = e.screenY - lastMouseY;
    var speedX = Math.round(dx / dt * 100);
    var speedY = Math.round(dy / dt * 100);

    timestamp = now;
    lastMouseX = e.screenX;
    lastMouseY = e.screenY;
});

With current modern browser we can now use movementX or movementY to detect mouse's movement speed. Before you want to use it you should see the compatibility table because older browser will have a prefix like webkitMovementX.

document.addEventListener("mousemove", function(ev){
    console.log(`Movement X: ${ev.movementX}, Y: ${ev.movementY}`);
}, false);

The result above is not an average speed like pixel/second but it's total movement between triggered mousemove event. If you need px/s then you can do it like below:

var totalX = 0;
var totalY = 0;
var moveX = 0;
var moveY = 0;

document.addEventListener("mousemove", function(ev){
    totalX += Math.abs(ev.movementX);
    totalY += Math.abs(ev.movementY);
    moveX += ev.movementX;
    moveY += ev.movementY;
}, false);

setInterval(function(){
    console.log(`Speed X: ${totalX}px/s, Y: ${totalY}px/s`);
    console.log(`Movement X: ${moveX}px/s, Y: ${moveY}px/s`);
    moveX = moveY = totalX = totalY = 0;
}, 1000);

Negative number represent movement to the left or top, while positive represent movement to the bottom or right direction.

I also had a requirement to find the acceleration, speed, movement of the mouse. Below is the code which is implemented for the react application. Through this we were able to find the movement, speed, max speed, acceleration, maximum acceleration of the mouse.

    let previousEvent, currentEvent;        
    let maxSpeed = 0, previousSpeed = 0, speed = 0, maxPositiveAcc = 0, maxNegativeAcc = 0;
    componentDidMount() {
              
                document.addEventListener('mousemove', (event) => {
                    currentEvent = event
                });
        
                setInterval(function () {
                    if (currentEvent && previousEvent) {
                        let movementX = Math.abs(currentEvent.pageX - previousEvent.pageX);
                        let movementY = Math.abs(currentEvent.pageY - previousEvent.pageY);
                        let movement = Math.sqrt(movementX * movementX + movementY * movementY);
         //Dividing by 100 since the setInterval function is called every 100ms
                        speed = 10 * movement; 
                        maxSpeed = Math.round(speed > maxSpeed ? (maxSpeed = speed) : maxSpeed);
        
                        let acceleration = 10 * (speed - previousSpeed);
        
                        if (acceleration > 0) {
                            maxPositiveAcceleration = Math.round(acceleration > maxPositiveAcc ? (maxPositiveAcc = acceleration) : maxPositiveAcc);
                        } else {
                            maxNegativeAcceleration = Math.round(acceleration < maxNegativeAcc ? (maxNegativeAcc = acceleration) : maxNegativeAcc);
                        }
                    }
                    previousEvent = currentEvent
                    previousSpeed = speed;
                }, 100);
            }

I'm looking for a way to track mouse speed as well. I found this video on Youtube https://www.youtube.com/watch?v=Lrfmu9V_foE. You can see how to track mouse speed with mousemove event once has defined previous mouse event and current mouse event.

Anyways, I want to store the speed as a value to use elsewhere but don't know how to.