Approximating Pi (Monte Carlo Method)

March 14th, 2015

In honor of P​i Day,​ I’ve decided to share a cool trick for approximating the number pi using the Monte Carlo Method. I’ve built a simple HTML5/JavaScript applet to demonstrate the Monte Carlo simulation further down on this page. Feel free to copy and paste the code into a text editor to learn more about how the algorithm works.


A Bit About Pi

Pi ​(approximately 3.14159) is an irrational number (can’t be represented as a fraction) with infinite digits. In the real world, pi (represented by the Greek letter π) is the ratio between the circumference and diameter of any circle. It’s philosophically interesting because it’s a non-repeating decimal, meaning that the digit combinations are random (without an infinitely repeating pattern). Because of this randomness, it’s possible that your name in ASCII could be represented somewhere in this long digit string. Some people speculate that every written and unwritten book in the world could be represented somewhere down the line in Pi’s vast array of digits. Although it’s a beautiful thought, it’s important to remember that just because something is possible doesn’t mean that it must happen.

Approximating Pi

We understand that pi is a ratio between the circumference and diameter of any circle. In the real world, it’s easy to measure the circumference of a circle using a tape ruler. In the computing world, however, getting the precise length of an arc is virtually impossible since every number in a computer is treated as discrete rather than continuous. The distance between two points is measured as a line, not a curve (see the distance formula). How do we get around the problem of measuring curves? We approximate!


First, imagine a square with a circle inscribed inside it. Now divide this square up into four quadrants. The side length of each quadrant is the radius of the circle. To save time, we will only use one quadrant in our simulation. For some duration of time (in this example, thirty seconds), we will place dots randomly in this quadrant. Then we will approximate pi by dividing the number of dots in the circle by the number of dots total (in both the circle and the square), and then, multiplying that quotient by four.

Monte Carlo Pi Approximation

Click the button to view a thirty-second animation.

Your browser does not support the HTML5 canvas tag.

In the simulation above, we can tell that the orange dots resemble a quarter of a circle while the blue dots resemble the space outside outside of that circle. How do we know whether to make the dots orange or blue? If the distance between the center of the circle and any given point has a distance less than or equal to the circle’s radius, we say that the point is within the circle (and color it orange). Otherwise, we say that the dot is outside of the circle (and color it blue).


Code for the Simulation

Below is the code I wrote for the Monte Carlo simulation on this page. It’s in HTML5 and JavaScript. To see this demonstration in action, simply copy and paste the code below into a text editor and save as approxPi.html.​ Next, open the file with a web browser to play with the simulation. Happy Pi Day!

Things to Think About

  • Could you use the digits of pi to make a good random number generator?

  • What’s possible may not be actual. Is the reverse true?

  • What’s the largest number of pi digits computed today?


Categories: mathphilosophytechnologytutorials

The Philosophy of Flat Design

September 16th, 2014

Flat design is the style of the times. It describes the look and feel of many modern websites, software applications, and operating systems. It’s distinguishable from skeuomorphism, a way of styling elements of a user interface (UI) to resemble real-world objects. For example, in a skeuomorphic interface, a telephone icon on a smartphone might look like an actual phone, complete with shadows, shading, and appearance of being three-dimensional. In a flat design interface, the same icon might look like a one-dimensional, one-hued cut-out of a phone. It may not look like an actual phone, but the minimalist shape suggests that the icon is related to a phone.

Another example of the differences between flat design and skeuomorphic design is the Safari web browser on the iPhone. In older versions, the Safari icon resembled a shiny, smooth compass. The outer edge appeared to have a metallic sheen while the inside appeared to have a rounded glass cover. The north-facing needle had a shadow beneath it, suggesting that the needle hovered above the dial the way real compass needles do. To keep up with modern trends, Apple decided to alter their official browser symbol, taking away the three-dimensional look and making it look “flat” on the screen.

Why is Flat Design the New Trend?

I’m going to speculate that flat design is popular for at least a few different reasons. First of all, flat design is aesthetically pleasing to many people. Unlike skeuomorphic design, it’s clean, simple, and minimalist, making it easy on the eyes. Secondly, it reflects the tech-savviness of of our times. Finally, I would venture to say that flat design is, perhaps, a reaction to the recent “information overload” people claim to be experiencing as a result in the explosive growth of the Internet and the abundance of information.


Personally, I think flat design is tasty! I used to be that hipster who thought that anyone who adopted flat design was a “sell out” to the faceless, corporate “mainstream.” I used to rant and rave that flat design was a step towards conformity and away from creativity. By removing the detail and “realness” of icons and font, the interface was losing its personality, and literally, becoming a shadow of its former glory. Everything started “looking the same,” and I thought that was a bad thing. Then I started using flat design in my own work. Realizing that flattery is the sincerest compliment, eventually I too had fallen in love with the sexy new design of modern websites and apps. Why is it aesthetically pleasing? Let’s break it down.

  • Congruency: Elements exhibiting the “flat look” easily match the look and feel of the rest of the page. Rather than having a mess of differently shaped and colored social media icons, for instance, a website could have a unified look to its “Connect with Us” icons.

  • Simplicity: Flat design objects don’t look a busy as the more ornate skeuomorphic objects. In some cases, this could be a bad thing. One example that comes to mind where flat design is inappropriate would be Blizzard’s website and games. The games are supposed to take the player into an immersive, richly textured world. It makes sense that the user interface would reflect the sci-fi and fantasy elements of the game. The flat design’s simplicity comes in handy in social media and professional settings where the focus is on efficiency rather than adventure. A tool like Facebook probably should have a “transparent” quality to it so that it doesn’t draw attention to itself as much as it emphasizes the people that use it. Unlike an immersive videogame, Facebook is a means rather than an end. The real entertainment of Facebook is what people post, not the experience of sitting behind some “wall” watching news appear.

Cultural Shift Towards Tech-Savviness

It’s no surprise to say that current and future generations are becoming more computer literate as technology permeates more and more of our daily lives. As a result, more of our lives take place in the digital world. It’s changing the way we think about things like friends, work, and health. In a way, it’s making daily life feel more “gamified.” Friends are objects we collect and store in a giant, online repository. Our popularity can be quantified and qualified with precision unknown to pre-Internet existence. Health data allows us to compete with our friends or against ourselves to adopt better habits. The blur between “real life” and “online life” is increasing, for better or for worse. This means that we don’t need our digital icons to mimic their real life counterparts. We have grown accustomed to what various buttons do, and therefore, the detail of skeuomorphic icons have become redundant to those who live and breathe technology, especially the young people.

A Rational Response to “Information Overload”

Some people see the proliferation of information as a bad thing and call it “information overload.” Some people see it in a more positive light and call it “information abundance.” No matter what, we have more information at our fingertips than ever before. Therefore, we need a way to parse through it all to find what’s important to us and what isn’t. Objects in a flat design interface are minimalist. They quietly and discretely sit in the background of our daily lives, not drawing our attention away from the details that really matter. Of course, they may not be as eye-catching as their skeuomorphic counterparts, but in a way, flat design has its own zen-like beauty. In a world of increasing abundance and decreasing time to make enjoy it, minimalist design can offer some relief and much-needed orderliness.


For further reading on the flat design trend, check out the following links.

Categories: culturedesignphilosophy