✨ Get Dizzy with Digits: Celebrating Pi Day with JavaScript 🥧
Tags: webdev, javascript, tutorial
Published: 2024-03-14 18:52:36


![Pi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/535m7btxnf3kvym848x2.gif)

Check out my project here:
https://the-best-codes.github.io/projects/pi/

Happy Pi Day, fellow developers! 🥧✨

Today, we're diving into the delicious world of mathematics to celebrate our favorite irrational number, π (Pi). And what better way to honor this mathematical constant than by calculating its digits? While mathematicians have reached mind-boggling digit counts (in the Trillions!), we can still go on our own JavaScript adventure to squeeze out as many digits of Pi as our devices can handle. 

**Reminder:** Calculating an enormous number of pi digits is resource-intensive. Be prepared for your computer to work up a sweat if you leave the code running too long!


### The Magic Code

The `generateDigitsOfPi` function is a beautiful example of a spigot algorithm in action. This type of algorithm “spigots” out digits of π one at a time in a stream (hence the name).

```javascript
function* generateDigitsOfPi() {
  let q = 1n;
  let r = 180n;
  let t = 60n;
  let i = 2n;
  while (true) {
    let digit = ((i * 27n - 12n) * q + r * 5n) / (t * 5n);
    yield Number(digit);
    let u = i * 3n;
    u = (u + 1n) * 3n * (u + 2n);
    r = u * 10n * (q * (i * 5n - 2n) + r - t * digit);
    q *= 10n * i * (i++ * 2n - 1n);
    t *= u;
  }
}

// More code
function displayTenNextDigits() {
  let digits = "";
   for (let i = 0; i < G_NUMBER_OF_DIGITS; i++) {
      digits += generator.next().value;
   }
    // Do something with the digits here
}
```

Let's crack the code:

* **Variables:**
    * `q`, `r`, `t`: These hold BigInt values (large integers) used in the algorithm. 
    * `i`: A counter variable.
* **The Loop:**
    * The `while(true)` loop acts as the engine, continuously generating digits.
    * `digit` is calculated using a complex formula involving `q`, `r`, `t`, and `i`. This formula is based on the Bailey-Borwein-Plouffe (BBP) algorithm, renowned for its efficiency in pi calculation.
    * `yield Number(digit)`: This special keyword pauses the function, returning the current digit (`digit`) and allowing you to resume later.

**Under the Hood**

While a full explanation of the BBP algorithm goes beyond this article (check out [https://en.wikipedia.org/wiki/Bailey_...](https://en.wikipedia.org/wiki/Bailey%E2%80%93Borwein%E2%80%93Plouffe_formula) if you are curious!), here's a simplified understanding:

* The formula manipulates BigInt values (`q`, `r`, `t`) to progressively converge towards the actual digits of pi.
* Each iteration calculates a new digit and updates the variables for the next round.

**Unveiling the Hidden Digits**

The second function, `displayTenNextDigits()`, takes the baton:

* **`digits`**: An empty string to store the retrieved digits.
* **The Loop:**
    * It iterates a predetermined number of times (`G_NUMBER_OF_DIGITS`) using a for loop.
    * Within the loop, it calls `generator.next().value`. Remember `generateDigitsOfPi()`? This retrieves the next pi digit using the `yield` statement.
    * Each retrieved digit is appended to the `digits` string.

**Bringing it all Together**

Here's where you get creative! Replace the comment `// Do something with the digits here` with your desired output format. You can:

* Use `console.log(digits)` to print the digits to the console.
* Get fancy and visualize them using a JavaScript charting library like Chart.js.
* Challenge yourself to write the digits to a file (be aware, this might take a significant amount of time for a large number of digits).

**Remember:**

* Adjust `G_NUMBER_OF_DIGITS` based on your machine's capabilities. Start small and gradually increase as you experiment.
* This is for educational purposes. Calculating an extreme number of digits might overload your system.
* Take a pie break every now and then; after all, it’s a celebration!

Check out how I used the base code:
{% codesandbox p46q78 %}

Happy coding, and may your Pi Day be as infinite and transcendental as the number itself! 🎉

_This article was written with the assistance of AI._

----
**Fun fact about `Pie`:**
The mirror image of `PI.E` is (an admittedly sloppy) `3.14`:

![pi pie mirror](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ywcf32qzitnfzhdcbh53.png)

----
_Article by BestCodes_
_[https://the-best-codes.github.io/](https://the-best-codes.github.io?dev.to=pi-day)_