How to get angle of swipe from javascript touch events

Question

I have the following code:

swipeDetect = function(el, callback){

    var touchsurface = el,
    swipedir,
    startX,
    startY,
    distX,
    distY,
    threshold = 7, //required min distance traveled to be considered swipe
    restraint = 100, // maximum distance allowed at the same time in perpendicular direction
    allowedTime = 500, // maximum time allowed to travel that distance
    maxangle=40,
    elapsedTime,
    startTime,
    touchinprocess=false,
    handleswipe = callback || function(swipedir){};

    touchsurface.addEventListener('touchstart', function(e){

        touchinprogress = true;
        var touchobj = e.changedTouches[0];
        swipedir = 'none';
        dist = 0;
        startX = touchobj.pageX;
        startY = touchobj.pageY;
        startTime = new Date().getTime();
    }, false);

    touchsurface.addEventListener('touchmove', function(e){


        var touchobj = e.changedTouches[0];
        distX = startX - touchobj.pageX;
        distY = startY - touchobj.pageY;
        rads = Math.atan(distY,distX);
        var deg = rads * (180 / 3.14);
        console.log(deg);
        if (Math.abs(distY) > restraint && Math.abs(deg) > maxangle) e.preventDefault();

    }, false);

    touchsurface.addEventListener('touchend', function(e){

        var touchobj = e.changedTouches[0];
        distX = touchobj.pageX - startX;
        distY = touchobj.pageY - startY;
        elapsedTime = new Date().getTime() - startTime;

        if (elapsedTime <= allowedTime){ // first condition for awipe met
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint){ // 2nd condition for horizontal swipe met
                swipedir = (distX < 0)? 'left' : 'right'; // if dist traveled is negative, it indicates left swipe
            }
            else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint){ // 2nd condition for vertical swipe met
                swipedir = (distY < 0)? 'up' : 'down'; // if dist traveled is negative, it indicates up swipe
            };
        };
        handleswipe(e,swipedir);
        return true;
    }, false);
},

I'm trying to get the angle in degrees of a touch swipe in the touch move function (and kill the default scroll if the swipe is above a certain number of degrees). But It keeps outputting numbers around 80. No matter how I swipe. What is wrong here?

I'm using this for image swiping and I want to let the user swipe and not have it scroll and swipe at the same time.

Maybe i'm going about this all wrong.

Thanks for your help.

Answer 1

The Math.atan(x)[1] function takes a single argument, which in your case should be the ratio of y over x:

rads = Math.atan(distY/distX);

It might be hard to see the difference, but in your initial code you have a , rather than a /. I ran your code with this change and it worked. Keep in mind that Math.atan2(y,x) does take two arguments.

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/atan