Fastest hypotenuse in javascript?

I’ve seen a number of questions about simulations and animations in javascript, which often involve calculating the hypotenuse:

hypot = Math.sqrt(x*x + y*y);

Since cartesian coordinates are the weapon of choice in most of these engines, these calculations are needed to find the distance between pairs of points, etc. So any speedup in calculating the hypotenuse could be a great help to many projects.

To that end, can you see a faster method than the simple implementation above? I found an approximation which was marginally faster in Chrome, but turned out to be much slower in Firefox, based on this approximation function in SuperCollider.

Edit 2015-08-15: I’ve switched the accepted answer to being the Math.hypot one; I suspect the pragmatic approach at present would be to use Math.hypot or a synthesized hypot function if not available, and to compare against the square (per sch’s answer) if that is sufficient and Math.hypot is not available.

46 thoughts on “Fastest hypotenuse in javascript?”

  1. An important point that many do not know:

    hypot = Math.sqrt(x*x + y*y);

    That works in theory, but in practice it may fail. If x is so large
    that x*x overflows, the code will produce an infinite result.

    Here’s how to compute sqrt(xx + yy) without risking overflow.

    max = maximum(|x|, |y|)
    min = minimum(|x|, |y|)
    r = min / max
    return max*sqrt(1 + r*r)
    

    Reference and complete text: John D. Cook – http://www.johndcook.com/blog/2010/06/02/whats-so-hard-about-finding-a-hypotenuse/

    Reply
  2. You can look to equality of x and y. If are equals you can calculate hypotenuse as (x + y)/sqrt(2) where sqrt(2)is a constant.

    So this method can be used for case where x = y. For other cases it can be used with maximum imprecision of ~41%. This is a big error. But when you specify allowable error limits you can use this method. For example, if define allowable error to 5% you can get that b must be between 0.515*a and 1.942*a.

    So if you don’t need perfect imprecision of your calculations, you can improve performance of calculations with range of values.

    By analogy you can look to equality of x or y to zero. And with some accuracy calculate hypotenuse more faster for this cases.

    P.S. I’ve read about this in the one russian article.

    Reply
  3. Often, you don’t need to compute the square root and hypot^2 = x*x + y*y is enough. This is the case for example if you want to compare the distances and don’t need the actual values.

    Reply
  4. Performance of Math.sqrt() and Math.hypot() depends on javascript running environment.

    I just run this code in Node.js, Chrome and Firefox:

    let z = performance.now();
    for (let i = 0; i < 1000000000; i++) {
        Math.hypot(i, i);
    }
    console.log(performance.now() - z);
    
    z = performance.now();
    for (let i = 0; i < 1000000000; i++) {
        Math.sqrt(i * i + i * i);
    }
    console.log(performance.now() - z);
    

    with the following results:

    Node.js v14.15.4:

    24394.656100034714
    419.97210001945496
    

    Chrome 88.0.4324.150:

    26474.060000036843
    422.13000007905066
    

    Firefox 85.0.2:

    423
    419
    

    which means V8 has awful implementation of Math.hypot(). Actually I wouldn’t be much surprised if it also depended on CPU architecture/model.

    Note that in my example I feed integer numbers to Math.sqrt() and Math.hypot(). Another test revealed that with floating-point numbers Node.js runs test code 20% slower than on integers. In Chrome Math.sqrt() performance is exactly the same and Math.hypot() runs like 3% slower. Firefox: no difference.

    Reply
  5. In ECMAScript ES6 you can use Math.hypot:

    // ES5 support
    
    Math.hypot = Math.hypot || function(x, y){ return Math.sqrt(x*x + y*y) }
    
    var x = 3, y = 4;
    
    document.write(Math.hypot(x, y))

    Edit: You can run this test on a blank tab, are 2 million operations with both methods, the results are very good, it is 24% faster.

    var i, tmp, x = 55, y = 66, end, ini = performance.now();
    
    // Math.sqrt operation
    i = 0;
    ini = performance.now();
    tmp = 0;
    while(i++ < 2000000){
        tmp += Math.sqrt(x*x + y*y)
    }
    end = performance.now();
    console.log(tmp, "Math.sqrt operation: " + (end - ini) + " ms");
    
    // Math.hypot
    
    i = 0;
    ini = performance.now();
    tmp = 0;
    while(i++ < 2000000){
        tmp += Math.hypot(x, y)
    }
    end = performance.now();
    
    console.log(tmp, "Math.hypot: " + (end - ini) + " ms");
    

    Note: In this test, it’s used ES6’s Math.hypot.

    enter image description here

    Reply

Leave a Comment