function loop() {
        if(lastRender) {
            let timestamp = performance.now();
            var progress = timestamp - lastRender
            update(progress);
            draw();
            lastRender = timestamp;
        } else lastRender = performance.now();
        window.requestAnimationFrame(loop);
    }
    function update(progress) {
        offset += progress / (1000 / MIDI.noteplayer.bpm);
        updateParticles();
    }


    function addParticle(particles) {
        let velX = .5- Math.random();
        velX = Math.min(Math.max(velX, -.2), .2);
        particles.push({
            offsetX: (.5  - Math.random()) * 10,
            offsetY: 0,
            velX: velX,
            velY: -Math.max(1, (Math.random() * 2)),
            opacity: .6,
            size: 2,
            color: getRandomBrightColor()
        });
    }

    function getRandomBrightColor() {
        let result = [];
        let big = 200 + Math.random() * 30;
        let bigIndex = Math.random() * 3 | 0;
        result[bigIndex] = big;
        if(bigIndex == 0) {
            result[1] = Math.random() * big;
            result[2] = Math.random() * big;
        } else if(bigIndex == 1) {
            result[0] = Math.random() * big;
            result[2] = Math.random() * big;
        } else if(bigIndex == 2) {
            result[0] = Math.random() * big;
            result[1] = Math.random() * big;
        }
        return result;
    }

    function updateParticles() {
        Object.keys(MIDI.keyboard.activeKeys).forEach(key => {
            if(MIDI.keyboard.activeKeys[key]) {
                MIDI.noteplayer.keyParticles[key] = MIDI.noteplayer.keyParticles[key] || [];
                let particles = MIDI.noteplayer.keyParticles[key];

                addParticle(particles);

                if(particles.length > 100)
                    particles.shift();
            }
        })
        Object.keys(MIDI.noteplayer.keyParticles).forEach(key => {
            let particles = MIDI.noteplayer.keyParticles[key];
            particles.forEach(p => {
                p.offsetX += p.velX;
                p.offsetY += p.velY;
                p.velY = Math.min(-.2, p.velY *= .98);
                p.opacity *= .99;

            });
            particles = particles.filter(p => p.opacity > .05);
            if(particles.length == 0) delete MIDI.noteplayer.keyParticles[key];
        });
    }


    function drawParticles(canvas, ctx) {
        Object.keys(MIDI.noteplayer.keyParticles).forEach(key => {
            let particles = MIDI.noteplayer.keyParticles[key];

            let index = findNthWhiteKey(key);
            let keyWidth = canvas.width / 52;
            particles.forEach(p => {
                let [r,g,b] = p.color;
                ctx.fillStyle = `rgba(${r + 52},${g + 235}, ${b + 97}, ${p.opacity})`;
                if(isWhiteKey(key)) ctx.fillRect(index * keyWidth + (keyWidth / 2) - (p.size / 2) + p.offsetX, canvas.height + p.offsetY, p.size, p.size);
                else ctx.fillRect(index * keyWidth - (p.size / 2) + p.offsetX, canvas.height + p.offsetY, p.size, p.size);
            });
        });
    }