Как задать скорость и направление движения фона нажатием мыши?

Почему скорость у бг с каждым нажатием становится все больше и больше?

Мне нужно чтобы фон двигался со скоростью, которая будет задаваться положением клика и меняться после каждого последующего, ну и направление должно зависеть от клика

вот пример как это работает сейчас:https://drive.google.com/file/d/1fl2UYJzu2PaFD1CIrm-ed_yFXlY5putR/view?usp=share_link

А вот как выглядит код:

задал начальную позицию для бг

function flight() {
    let wmap = document.querySelector('#wmap');
    let pos1 = wmap.clientWidth;
    let pos2 = wmap.clientHeight + 800;

    wmap.style.backgroundPositionX = `${pos1}px`;
    wmap.style.backgroundPositionY = `${pos2}px`;

    let v, v1;
    let x0, y0;

задал центр дива чтобы определять скорость по расстояние от центра до точки нажатия, чем ближе к краю нажатие, тем быстрее будет перемещаться фон

 wmap.addEventListener('mouseover', takeOff);

    function takeOff(e) {
        console.log(e.offsetX);
        x0 = 350;
        y0 = 350;

    }

определил скорость и направление, заставил двигаться

 wmap.addEventListener('mousedown',move);

     function move(e) {
       if(v != undefined) clearInterval(movement);
        
        console.log(e);
        v = -(e.offsetX - x0);
        v1 = -(e.offsetY - y0);
        console.log(v, v1);
        let movement = setInterval(moveBg, 20);
       
        // requestAnimationFrame(moveBg);
        // moveBg();
    }
    function moveBg() {
        pos1 += v * 0.01;
        pos2 += v1 * 0.01;
        wmap.style.backgroundPositionX = `${pos1}px`;
        wmap.style.backgroundPositionY = `${pos2}px`;
    }
}
flight();

А еще интересно как сюда вставить requestAnimationFrame вместо setInterval и можно ли заменить background-position на transform-translate?