Introduction

There is no need to introduce Pi! Pi is one of the most interesting mathematical constant. Originally, Pi has been defined as the ratio of a circle’s circumference to its diameter. However, Pi is more than that: it unexpectedly shows up in almost all areas of mathematics and physics.

So, why not use it to explore a bit more of computer programming?

One thing that you must know about Pi: Pi is irrational, meaning that you cannot write it as a finite (nor cyclic) suite of digits. Actually Pi is even transcendental, but it has nothing to do with this post! So, Pi is an infinite and fascinating suite of digits that starts like this 3.1415926535897932384626433…

Super computers have already computed thousands, millions, billions of Pi digits, but this is nothing compare to the Pi digits suite length.

So here is our challenge:

Compute Pi’s 300 first digits using Javascript and only Javascript. Why is it hard? Because, Javascript has its own limitations when dealing with float precisions, especially when dealing with non trivial math functions.

Let’s see what we can do!

A Naive algorithm to compute Pi

All sources needed here are available in the following JSFiddle. Do not hesitate to modify it and test Javascript behaviour!

Let’s build a very simple HTML & CSS User Interface:

<!DOCTYPE html>
<html>
 <head>
   <title>Pi Calculator</title>
   <style>
     body {
       background: #20262E;
       padding: 20px;
       font-family: Helvetica;
     }
     .pi-calculator-container {
       background-color: white;
       width: 500px;
       border-radius: 10px;
       text-align: center;
       padding: 10px;
       min-height: 300px;
     }
     .pi-calculator-container button {
       background: #0084ff;
       border: none;
       border-radius: 5px;
       padding: 8px 14px;
       font-size: 15px;
       color: #fff;
       cursor: pointer;
     }
     .pi-calculator-container .pi-content {
       color: #aaa;
       font-size: 0.8em;
       min-height: 200px;
       word-break: break-all;
     }
   </style>
 </head>
 <body>
   <div class="pi-calculator-container">
     <h1>Pi Calculator</h1>
     <p id="pi" class="pi-content"></p>
     <button onclick="computePi()">Compute me</button>
   </div>
 </body>
 <script type="text/javascript">
   function computePi() {
     document.getElementById('pi').textContent = '3.14'
   }
 </script>
</html>

As you can see, Pi is hard coded as 3.14 for now through computePi() function. We are going to iterate over this function in the next paragraphs.

First improvement: compute Pi for real using math functions. According to this web page, there is a simple expression of Pi based on atan() function:

π = 4·arctan(1).

Hopefully, arctan() is available in Javascript Math Class:

function computePi() {
 document.getElementById('pi').textContent = 4 * (Math.atan(1))
}

Click on ‘Compute me’. Here is the output:

That’s a good start! We now have a first approximation of Pi with 17 correct digits!

Can we go further? What if we try to increase Javascript precision using toPrecision()?

function computePi() {
 document.getElementById('pi').textContent = (4 * Math.atan(1)).toPrecision(100) 
}

Run it again:

It looks very bad! We get a lot of zero at the end and new digits are wrong! It seems we have reached Javascript limits.

Coding our own atan() Function

We won’t go further using basic Javascript. We have to code our own functions. To do so, we are going to need a little help from mathematics. Most of the functions, if they are nice enough (continuity / derivability), can be approached by an infinite sum. These infinite sums are called Taylor Series.

In our case, we have the following expression:

arctan(x) = x − x3/3 + x5/5 − x7/7 + x9/9 − x11/11 + . . .

Programmatically:

function computePi() {
 document.getElementById('pi').innerHTML = (4 * atan(1))
}
 
function atan(x) {
 var result = x;
 var xSquared = x * x;
 
 var term = x;
 var divisor = 1;
 
 while (term != 0) {
   divisor += 2;
   term *= xSquared;
   result -= term / divisor;
 
   divisor += 2;
   term *= xSquared;
   result += term / divisor;
 }
 
 return result;
}

You should get same output. However, for performances reasons, we are going to use a slightly different expression of Pi:

π = 4·(4·arctan(1/5) – atan(1/239))

This formula converges way faster using our custom atan function. Just have a look our Taylor Series using x = 1 and x = 1/5 and look at term sizes.

Our latest Pi algorithm now looks like this:

function computePi() {
 document.getElementById('pi').innerHTML = (4 * atan(1/5) - atan(1/239)) * 4
}
 
function atan(x) {
 var result = x;
 var xSquared = x * x;
 
 var term = x;
 var divisor = 1;
 
 while (term != 0) {
   divisor += 2;
   term *= xSquared;
   result -= term / divisor;
 
   divisor += 2;
   term *= xSquared;
   result += term / divisor;
 }
 
 return result;
}

Still getting correct Pi digits:

Pi Calculator Result with custom atan() function

Using toPrecision() tricks:

Pi Calculator Result using toPrecision() again

Not better. We managed to replace this obscure atan function by something we can control. However, we did not manage to compute more Pi digits from now on. We need to go one step further!

Computing arctan using Javascript big.js Library

Javascript is not able to handle such precision. The following JS expression in your Javascript console:

Javascript and float precision!

We need a way to keep float precisions when adding, multiplying, dividing floats together. In order to do that, we are going to use the great big.js Library. This library provides an API to run operations between numbers with an arbitrary precision.

For example, lets compare x = 1/5 using big.js and Javascript:

const bigOne = new Big(1)
let preciseX = bigOne.div(5)
 
let x = 1/5

Big.js precision is way better

We can now come with a new version of our atan() function:

var precision = 300
Big.DP = precision
 
function computePi() {
 var bigOne = new Big(1)
 document.getElementById('pi').innerHTML =
   ((atan(bigOne.div(5)).times(4)).minus(atan(bigOne.div(239)))).times(4)
.toPrecision(precision)
}
 
function atan(x) {
 var preciseX = new Big(x);
 var result = preciseX;
 var xSquared = preciseX.times(preciseX);
 
 var term = preciseX;
 var divisor = new Big(1);
 
 while (term.times(new Big(10).pow(precision)) > 1) {
   divisor = divisor.plus(2);
   term = term.times(xSquared);
   result = result.minus(term.div(divisor));
 
   divisor = divisor.plus(2);
   term = term.times(xSquared);
   result = result.plus(term.div(divisor));
 }
 
 return result;
}

Latest algorithm sources are available in this JSFiddle if you don’t want to update previous one!

Note: he arithmetic methods always return the exact result except div, sqrt and pow (with negative exponent), as these methods involve division.

Press ‘Compute me’ button… and let magic happens:

Final output!

Comparing to Pi’s first digits:

π = 3.141592653589793238462643383279502884197169399375105820974944592307816406286208998628034825342117067982148086513282306647093844609550582231725359408128481117450284102701938521105559644622948954930381964428810975665933446128475648233786783165271201909145648566923460348610454326648213393607260249141273724587006606315588174881520920962829254091715364367892590360011330530548820466521384146951941511609433057270365759591953092186117381932611793105118548074462379962749567351885752724891227938183011949129833673362440656643086021394946395224737190702179860943702770539217176293176752384674818467669405132000568127145263560827785771342757789609173637178721468440901224953430146549585371050792279689258923542019956112129021960864034418159…

Great! We have achieved our goal: code an algorithm to compute Pi’s 300 first digits!
You can go as far as you want, depending on how fast is your CPU. Take time to try different values of precisions. You can also try to implement different Pi expression in your computePi() function.

Conclusions

I love Pi. But Pi was just a pretext to dive into Javascript float precision. I hope you now have a better understanding of Javascript limits. If you want to learn more about big.js and how calculations are done behind the scene, feel free to have a look at big.js source code available on GitHub. It’s quite interesting!

Compute Pi with Javascript and big.js

Who we are

Two Software Engineers passionate about modern web technologies

Hot Tags

Popular posts