JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div>
    <span>Velocity:&nbsp;</span>
    <span id="result"></span>
    <span>inches/second</span>
    (<span id="cm_result"></span>
    <span>centimeters/second</span>)
</div>

JavaScript

var pos = [];

$(document).mousemove(function (e) {
    var now = performance.now();
    pos.unshift({
        x: e.clientX,
        y: e.clientY,
        t: now
    });

    // Average velocity over last 1 second
    pos = pos.filter(function (pos) {
        if ((now - pos.t) > 1000) {
            return false;
        }
        return true;
    });

    var vels = calculateVelocities(pos); // in "pixels per millisecond"
    var accels = calculateAccelerations(vels);
    var vel = average(vels);
    var accel = average(accels);

    // Convert to american measurements
    var inchSeconds = vel / (96 / 1000);
    var inchSecondsRounded = Math.round(inchSeconds * 100) / 100;
    var inchSecondText = ('0' + inchSecondsRounded.toFixed(2)).slice(-5);

    // Convert to human measurements
    var cmSeconds = inchSeconds * 2.54;
    var cmSecondsRounded = Math.round(cmSeconds * 100) / 100;
    var cmSecondText = ('00' + cmSecondsRounded.toFixed(2)).slice(-6);

    $('#result').text(inchSecondText);
    $('#cm_result').text(cmSecondText);

    // Color text based on mean acceleration
    if ( accel > 0) {
        $('#result, #cm_result').css('color', 'green');
    } else if ( accel < 0) {
        $('#result, #cm_result').css('color', 'red');
    } else{
        $('#result, #cm_result').css('color', 'black');
    }

    prevVelocity = inchSecondsRounded;
});

function calculateVelocities (pos) {
    return pos.reduce(function (out, pos, index, posArr) {
        if (index > 0) {
            var prevIndex = index - 1;
            var dx = pos.x - posArr[prevIndex].x;
            var dy = pos.y - posArr[prevIndex].y;

            out.push(Math.sqrt(dx * dx + dy * dy) / (posArr[prevIndex].t - pos.t));
        }
        return out;
    }, []);
}

function calculateAccelerations (vels) {
    return vels.reduce(function (out, vel, index, velsArr) {
        if (index > 0) {
            var prevIndex = index - 1;

            out.push(velsArr[prevIndex] - vel);
        }
       ...