4umi.com/web/javascript/pi

Pi for the web

Math Javascript

 The Greek letter π or pi. is the most interesting number with many unusual and useful characteristics. It is more whole than any whole number, more integer than all integers. It is the key to many truths. Pi never repeats. Pi never ends. It is holy.

In October 2006, the world record for recitating pi from memory was broken by Akira Haraguchi, from Chiba, east of Tokyo, who took sixteen hours to recite exactly 100,000 digits by heart. Thanks to professor Yasumasa Kanada and colleague computer scientists at the University of Tokyo, we know the first 1,241,100,000,000 digits (that 's 1,2411 × 1012), but the Internet is too small to hold them all.

Pi for real

The first 2000 decimals of pi are printed below. Also available are 5,000, 50,000, 200,000 decimals or even 500,000 decimals, just be aware that 's half a megabyte of text to download. The source, this file 4umi.com/code/pi.txt, weighs 2.02 MB and contains 2120001 digits, one decimal dot and no whitespace characters. They have been checked against various online sources, including the below Reference, by downloading each locally and running them through a Perl script, and then a PHP script, and found without flaw.

Some breathing space and grip can be added with this Javascript and the controls provided.

Spacing Space after:   Font:
Pi
3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091456485669234603486104543266482133936072602491412737245870066063155881748815209209628292540917153643678925903600113305305488204665213841469519415116094330572703657595919530921861173819326117931051185480744623799627495673518857527248912279381830119491298336733624406566430860213949463952247371907021798609437027705392171762931767523846748184676694051320005681271452635608277857713427577896091736371787214684409012249534301465495853710507922796892589235420199561121290219608640344181598136297747713099605187072113499999983729780499510597317328160963185950244594553469083026425223082533446850352619311881710100031378387528865875332083814206171776691473035982534904287554687311595628638823537875937519577818577805321712268066130019278766111959092164201989380952572010654858632788659361533818279682303019520353018529689957736225994138912497217752834791315155748572424541506959508295331168617278558890750983817546374649393192550604009277016711390098488240128583616035637076601047101819429555961989467678374494482553797747268471040475346462080466842590694912933136770289891521047521620569660240580381501935112533824300355876402474964732639141992726042699227967823547816360093417216412199245863150302861829745557067498385054945885869269956909272107975093029553211653449872027559602364806654991198818347977535663698074265425278625518184175746728909777727938000816470600161452491921732172147723501414419735685481613611573525521334757418494684385233239073941433345477624168625189835694855620992192221842725502542568876717904946016534668049886272327917860857843838279679766814541009538837863609506800642251252051173929848960841284886269456042419652850222106611863067442786220391949450471237137869609563643719172874677646575739624138908658326459958133904780275900

Absolutely breath-taking.

Pi calculated

There are numerous methods that may be used to get an idea of the exact value of the number. In historical days, mathematicians have developed elaborate algorhythms to approach π in almost philosophical ways, some of which are still used in today's world, where all the crunching is left to computers and efficiency seems the main concern.

// We can conjure pi out of the whole numbers, like this:
pi²/6 = 1/1² + 1/2² + 1/3² + 1/4² + 1/5² + ...

// Or we can do it with just the odd numbers:
pi/4 = 1/1 - 1/3 + 1/5 - 1/7 + 1/9 - 1/11 + ...

// Or their squares:
pi²/8 = 1/1² + 1/3² + 1/5² + 1/7² + 1/9² + ...

// Or with evens and odds combined:
pi/2 = 2/1 * 2/3 * 4/3 * 4/5 * 6/5 * 6/7 * ...

Let 's try that out:

var o = ' =\n\n';
function q( r, s ) { return window.confirm( r + o + eval( r ) + s ); }
function t( u ) { return o + eval( u.replace( /pi/g, 'Math.PI' ) ) + o + u.replace( / \* pi/, '\u00b2' ) + '\n\nContinue?'; }


var a = 0, b = '0', c = t( 'pi * pi / 6' );

do { a++; b += ' + ' + '1/(' + a + '*' + a + ')'; } while ( q( b, c ) );/**/


var d = -1, f = '0', g = ' - ', h = t( 'pi / 4' );

do { d += 2; f += ( g = g===' - ' ? ' + ' : ' - ' ) + '1/' + d; } while ( q( f, h ) );/**/


var i = -1, j = '0', k = t( 'pi * pi / 8' );

do { i += 2; j += ' + 1/(' + i + '*' + i + ')'; } while ( q( j, k ) );/**/


var l = 0, m = '1/1', n = t( 'pi / 2' );

do { m += ' * ' + ( ++l%2 ? (l+1)+'/'+l : l+'/'+(l+1) ); } while ( q( m, n ) );/**/

The Unicode \u00b2 is what creates the ² character in the display box.

Pi in HTML

The capital version of the 16th letter of the Greek alphabet is supposedly rendered in html 4.0 as Π or Π, the small letter as π or π, an entity from the ISO-8879 standard, which is not yet recognized by many current browsers.

Here is a table with examples of each of the methods, as rendered in your browser:

CodeMonospace Sans serifSerifFantasy
CourierLucidaArialImpactVerdana BookmanTimesFantasy
Πis Πis Πis Πis Πis Πis Πis Πis Π
πis πis πis πis πis πis πis πis π
Πis Πis Πis Πis Πis Πis Πis Πis Π
πis πis πis πis πis πis πis πis π

If a font does not contain a glyph for π, the browser falls back on the generic font-family. If this table demonstrates one thing, it has to be that the various fonts are horizontally supported by the glyphs :-) Or was it the other way around?

To avoid the limitations of HTML and ISO, the character may also be coded as the two-byte UTF-8 sequence \317\200, thanks to the character set specified in the "content-type" <meta> tag in the <head> section of the page:

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

pi Further down this path, another tip is a markup language called MathML, especially designed to meet the challenges of mathematical notations, yet with reduced availability and public awareness. As a last resort, noting the uncertainties still involved in browser and font support, many opt for graphics and images of the character displayed inline with its context, scaled to an average nobody's font size and color. As if that creates any certainties.

Pi in Javascript

Just for refreshment, what was the pi all about? It is an irrational number and cannot be written as the ratio of two integers. It is the ratio of a circle's circumference to its diameter. It is the area of a circle of radius 1. It is Archimedes' magical mathematical constant equal to approximately 3.1415926535897932. With Pythagoras and Euclid, please welcome to the stage some core Javascript Math methods:

alert( Math.cos( Math.PI ) ); // -1/**/
alert( Math.sin( Math.PI ) ); // 0, ideally.../**/
alert( Math.tan( Math.PI ) ); // -0.00000000000000012246063538223772 no less/**/

Isn't it embarrassing? The sinus of the real pi is of course 0. It is wise to remember that Javascript does have a limitation to its level of accuracy. There is no news under the sun.

The Unicode code for the pi character is U+03C0, the string sister of numeral Math.PI. Try these script statements:

var pi = '\u03c0' + ' is ' + Math.PI;

window.alert( pi ); // may display the letter as a single "p"/**/
window.alert( '\u03c0'.length ); // 1/**/
window.alert( pi.charCodeAt() ); // 960/**/
window.alert( pi.toUpperCase().charCodeAt() ); // 928/**/
document.write( pi.link( 'javascript:history.go(-1)' ).big().big() ); document.close();/**/

Now, what a ride.

The script

The function space that distributes the whitespace among the digits above is called in the onchange event handling attribute of both <select> elements. An object referring to the paragraph with the 2001 characters of the text (let 's not forget that decimal dot) is stored into variable o and the selects themselves into n and c.

The following bit deals with the ‘other’ option, and adds a newly created member to the list, if the user enters a numerical value.

Next the regular expression can be built from the various choices made by the user, and stored in variable a, while b is assigned to o.firstChild; its purpose is to establish if o is a textarea, in which case b will be null and depending on which p and q are set, so that they may reflect the textnode and the text itself respectively.

Finally the text is trimmed from all whitespace in s, and then directly fed back into the textnode value, with or without whitespace added according to master regex a.

function space() {
 var o = gid( 'p' ), n = gid( 'n' ), c = gid( 'c' ), l,
 m = +n.options[n.selectedIndex].value;
 c = c.options[c.selectedIndex];
 if( isNaN( m ) ) {
  m = +window.prompt( 'A space after how many ' + c.text + '?', '72' );
  if( isNaN( m ) ) { return; }
  l = n.options.length - 1;
  while( +n.options[l-1].text>m ) {
   n.options[l+1] = new Option( n.options[l].text, n.options[l].value ); --l;
  }
  n.options[l+1] = new Option( n.options[l].text, n.options[l].value );
  n.options[l] = new Option( m, m, false, true );
 }
 var a = m ? new RegExp( '(' + c.value + '{'+ m +'})', 'g' ) : '',
  b = o.firstChild,
  p = b || o,
  q = b ? 'nodeValue' : 'value',
  r = p[q],
  s = r.replace( /\s/g, '' );
 p[q] = m ? s.replace( a, '$1 ' ) : s;
}

gid( 'n' ).selectedIndex = 3; space();

If anyone knows of an effective way to store regular expressions in an array together with their respective replace strings so that they can be moved around without too much hassle, please post it on a public forum. If you include a link to this page, we will find it and update the above with something which is a little easier to maintain and read from the human point of view.

Reference