Tempo Steadiness

by Andrew Maxwell

HTML

<body style="margin:0; overflow:hidden">
    <canvas id="C" onselectstart="return false"></canvas>

JavaScript

var C = document.getElementById("C"),
    W = C.width = innerWidth,
    H = C.height = innerHeight,
    T = C.getContext('2d')

var startText = "Click repeatedly to measure your tempo."

var times

function reset(){
    T.textAlign = "center"
    T.textBaseline = "middle"
    T.font = "30px sans-serif"
    T.fillText(startText, W / 2, H / 2)
    T.lineWidth = 2
    
    times = []
    
    return false
}

C.onclick = function(){
    times.push(new Date())
    
    var diffs = [], maxDiff = 0
    for (var i = 0; i < times.length - 1; i++){
        diffs[i] = times[i + 1] - times[i]
        if (diffs[i] > maxDiff) maxDiff = diffs[i]
    }
    
    T.clearRect(0, 0, W, H)
    
    T.strokeStyle = "#DDD"
    T.beginPath()
    for (var i = 1; i < 10; i++){
        var y = (60000 / i / 30) / maxDiff * H
        T.moveTo(0, y)
        T.lineTo(W, y)
    }
    T.stroke()
    
    
    T.strokeStyle = "black"
    T.beginPath()
    for (var i = 0; i < diffs.length; i++){
        var x = i * W / diffs.length
        var y = diffs[i] / maxDiff * H
        T.lineTo(x, y)
        //T.fillText
    }
    T.stroke()
    
    
}

C.oncontextmenu = reset
reset()