The answer is easy. We just have to zoom in. 
We can see at low zoom how the (purple) staircase hugs circle, but higher zoom shows it always remains a crude approximation to the circle's shrinking matching segments except near 0, π/2, π, and 3π/2. [In contrast, the (green) inscribed polygon is an increasingly good approximation and equally good at all angles.]
The javascript code used to make the picture frames of the gif follows at the bottom. The code can be used as a starting point to make your own improved gif/animation or just single png frame. [may try to clean js code up later on as well as make more running time efficient]. I then clicked through to each pic, carefully screen captured the same bordered region for each pic, and saved to file. I integrated them into a gif using http://gifcreator.me/ (most frames got 250ms delay, but the first and the last of each of the 6 sequences got 750ms). I took that final gif and uploaded to stackexchange http://meta.stackexchange.com/questions/75491/how-to-upload-an-image-to-a-post
In case the above explanation + pic is not enough, here is another explanation:
Simple Geometrical Explanation:
[To get a simple explanation, we have to have a simple approach. A circle is a simple, easy-to-make shape, and this problem was studied ages ago with simplified reasoning.]
The question posed is why can't we approximate the length of a circle [PI = the length of a circle of diameter 1] by measuring the length of a "staircase" path that hugs the circle tightly?
The answer is simple:
If we aim to find the length of some near straight object from point A to point B, we want to measure as closely as possible to a straight path from A to B (see green/red quasi-overlap). We won't get the correct answer if instead, like the staircase approach above (purple), we measure from A to a point far off to the side and then from that point to B. This is very intuitive.
Now, to approximate the length of a circle, we replace the whole circle with many little straight paths following closely the shape of the circle (green). We do use a single direct connecting (green) piece between every two adjacent points A and B (A and B, not pictured, would be where adjacent gray lines intersect red circle) instead of using the inaccurate 2-piece (purple) step. Do observe a key point that makes this work out: any little arc of a circle, as with any small section of any simple curve, becomes nearly indistinguishable from a similarly sized line segment when these are short enough.
[Recap:] So, at any angle around the circle, for large N, a small green line segment ≈ small red arc. Meanwhile around most of circle 2 right angled purple line segments are clearly > matching red arc, no matter N. This is why the green approximation gets very close to π while the purple approximation is way off at 4. [Note: green π = N sin (pi/N) and is easily derivable from basic geometry by summing 2*N pieces that are opposite radial triangles with hypotnuse .5 and central angles 2π/(2N).]
[Finally, I apologize if you can't discern green from red. I may change colors later but found these convenient and generally easy to differentiate.]
<html> <body> <table style="border:3px solid black;"><tbody> <tr><td colspan="2"><center><b><font size="4"><span style="color:red;">π = 3.141592...</span></font></b></center></td></tr> <tr><td><center><b><span id="sp1" style="color:purple;">N = 4</span></b></center></td><td style="margin-left:50px;"><center><b><span id="sp2" style="color:purple;">π = 4</span></b></center></td></tr> <tr><td><center><b><span id="sp3" style="color:green;">N = 4</span></b></center></td><td style="margin-left:50px;"><center><b><span id="sp4" style="color:green;">π = 3.1111...</span></b></center></td></tr> <tr><td> <center style="position:relative;"><span id="ssp1" style="background-color:white; position:absolute; top:6px; border:2px solid red; padding:3px; z-index:1;">1x</span></center> <center style="position:relative;"><span id="ssp1b" style="background-color:; position:absolute; top:36px; left:145; border:0px; padding:0px; z-index:1;">hugs</span></center> <center style="position:relative;"><span id="ssp1c" style="background-color:; position:absolute; top:56px; left:145; border:0px; padding:0px; z-index:1;">circle</span></center> <svg id="svg1" height="200px" width="200px" style="margin-left:0px; border:2px solid black;"> <!--<svg viewBox="0 0 200 200">--> <circle cx="51" cy="51" r="50" stroke-width="1" stroke="green" fill="transparent"/> </svg> </td><td> <center style="position:relative;"><span id="ssp2" style="background-color:white; position:absolute; top:6px; border:2px solid red; padding:3px; z-index:1;">5x</span></center> <svg id="svg2" height="200px" width="200px" style="margin-left:0px; border:2px solid black;"> <!--<svg viewBox="0 0 200 200">--> <circle cx="51" cy="51" r="50" stroke-width="1" stroke="green" fill="transparent"/> </svg> </td></tr> <tr style="margin:20px; border:20px solid blue;"><td> <center style="position:relative;"><span id="ssp3" style="background-color:white; position:absolute; top:6px; border:2px solid red; padding:3px; z-index:1;">20x</span></center> <center style="position:relative;"><span id="ssp3b" style="background-color:white; position:absolute; top:36px; left:145; border:0px; padding:0px; z-index:1;">bad</span></center> <center style="position:relative;"><span id="ssp3c" style="background-color:white; position:absolute; top:56px; left:145; border:0px; padding:0px; z-index:1;">approx</span></center> <center style="position:relative;"><span id="ssp3dd" style="background-color:white; position:absolute; top:36px; left:145; border:0px; padding:0px; z-index:1;">ok</span></center> <center style="position:relative;"><span id="ssp3d" style="background-color:white; position:absolute; top:36px; left:145; border:0px; padding:0px; z-index:1;">good</span></center> <center style="position:relative;"><span id="ssp3e" style="background-color:white; position:absolute; top:56px; left:145; border:0px; padding:0px; z-index:1;">approx</span></center> <svg id="svg3" height="200px" width="200px" style="margin-left:0px; border:2px solid black;"> <!--<svg viewBox="0 0 200 200">--> <circle cx="51" cy="51" r="50" stroke-width="1" stroke="green" fill="transparent"/> </svg> </td><td> <center style="position:relative;"><span id="ssp4" style="background-color:white; position:absolute; top:6px; border:2px solid red; padding:3px; z-index:1;">100x</span></center> <center style="position:relative;"><span id="ssp4e" style="background-color:white; position:absolute; top:36px; left:25; border:0px; padding:0px; z-index:1;">a<sup>2</sup> + b<sup>2</sup></span></center> <center style="position:relative;"><span id="ssp4f" style="background-color:white; position:absolute; top:56px; left:25; border:0px; padding:0px; z-index:1;">≇ c<sup>2</sup></span></center> <center style="position:relative;"><span id="ssp4b" style="background-color:white; position:absolute; top:36px; left:145; border:0px; padding:0px; z-index:1;">circle</span></center> <center style="position:relative;"><span id="ssp4c" style="background-color:white; position:absolute; top:56px; left:145; border:0px; padding:0px; z-index:1;">looks</span></center> <center style="position:relative;"><span id="ssp4d" style="background-color:white; position:absolute; top:76px; left:145; border:0px; padding:0px; z-index:1;">straight</span></center> <svg id="svg4" height="200px" width="200px" style="margin-left:0px; border:2px solid black;"> <!--<svg viewBox="0 0 200 200">--> <circle cx="51" cy="51" r="50" stroke-width="1" stroke="green" fill="transparent"/> </svg> </td></tr> </tbody></table> <br> <br> <input type="button" onclick="doprev();">Prev</input> <input type="button" onclick="donext();" style="margin-left:30;">Next</input> <script> alert('js syntax ok'); function xxx(iter,first,second,third,fourth) { xxxcore(iter,"svg1",first,second,third,fourth,1,document.getElementById('ssp1') ); xxxcore(iter,"svg2",first,second,third,fourth,5,document.getElementById('ssp2') ); xxxcore(iter,"svg3",first,second,third,fourth,20,document.getElementById('ssp3') ); xxxcore(iter,"svg4",first,second,third,fourth,80,document.getElementById('ssp4') ); } function xxxcore(iter,svgid,first,second,third,fourth,mult,ssp) { var i,j,ktf; //var iter=3; var alpha1=Math.PI*2/40; var alpha2=Math.PI*2*3/16+0.000; var steps=Math.pow(2,(iter+2)); //(iter+1)*4; var delta=Math.PI*2/steps; //var first=true; //var second=true; //var third=true; var cx0=100; var cy0=100; var r0=50; var cx=cx0+(mult-1)*r0*Math.cos(alpha2)-30 ; //351; var cy=cy0-(mult-1)*r0*Math.sin(alpha2)-10 ; //-401; var r=r0*mult; var geostr1=""; if (first!=0) geostr1+="<circle cx='"+cx+"' cy='"+cy+"' r='"+r+"' stroke-width='1' stroke='red' fill='transparent'/>"; for (i=0,j=(Math.PI*2/steps); i<steps; i++) { ktf=i<steps/4||i>=2*steps/4&&i<3*steps/4; if (second!=0) { //second=1; if (second!=0&&i*j==alpha2) { //floating variation? geostr1+="<path d='M "+cx+" "+cy+" L "+(cx-r*Math.cos(i*j))+" "+(cy+r*Math.sin(i*j))+"' stroke-width='2' stroke='blue' fill='transparent'/>" } else if (0&& (i-1)*j==alpha2) { geostr1+="<path d='M "+cx+" "+cy+" L "+(cx-r*Math.cos(i*j))+" "+(cy+r*Math.sin(i*j))+"' stroke-width='1' stroke='blue' fill='transparent'/>" } else if (1||0) { geostr1+="<path d='M "+cx+" "+cy+" L "+(cx-r*Math.cos(i*j))+" "+(cy+r*Math.sin(i*j))+"' stroke-width='1' stroke='gray' fill='transparent'/>" } } if (third!=0) { geostr1+="<path d='M "+(cx-r*Math.cos(i*j))+" "+(cy+r*Math.sin(i*j))+" L "+(cx-r*Math.cos((i+1)*j))+" "+(cy+r*Math.sin((i+1)*j))+"' stroke-width='1' stroke='green' fill='transparent'/>"; } if (fourth!=0) { geostr1+="<path d='M "+(cx-r*Math.cos(i*j))+" "+(cy+r*Math.sin(i*j))+" L "+(ktf?cx-r*Math.cos(i*j):cx-r*Math.cos((i+1)*j))+" "+(ktf?cy+r*Math.sin((i+1)*j):cy+r*Math.sin(i*j))+" L "+(cx-r*Math.cos((i+1)*j))+" "+(cy+r*Math.sin((i+1)*j))+"' stroke-width='1' stroke='purple' fill='transparent'/>"; } } //also stroke-opacity fill-opacity document.getElementById("sp1").style.visibility="hidden"; document.getElementById("sp2").style.visibility="hidden"; document.getElementById("sp3").style.visibility="hidden"; document.getElementById("sp4").style.visibility="hidden"; document.getElementById("ssp1b").style.visibility="hidden"; document.getElementById("ssp1c").style.visibility="hidden"; document.getElementById("ssp3b").style.visibility="hidden"; document.getElementById("ssp3c").style.visibility="hidden"; document.getElementById("ssp3dd").style.visibility="hidden"; document.getElementById("ssp3d").style.visibility="hidden"; document.getElementById("ssp3e").style.visibility="hidden"; document.getElementById("ssp4b").style.visibility="visible"; document.getElementById("ssp4c").style.visibility="visible"; document.getElementById("ssp4d").style.visibility="visible"; document.getElementById("ssp4e").style.visibility="hidden"; document.getElementById("ssp4f").style.visibility="hidden"; var pistr=new Number(steps*Math.sin(Math.PI/steps)).toPrecision(7); if (third!=0) { document.getElementById("sp3").style.visibility="visible"; document.getElementById("sp4").style.visibility="visible"; document.getElementById("sp3").innerHTML="N = "+steps; document.getElementById("sp4").innerHTML="π = "+pistr+"..."; if (fourth==0) { if (steps==8) { document.getElementById("ssp3dd").style.visibility="visible"; document.getElementById("ssp3e").style.visibility="visible"; } if (steps>=16) { document.getElementById("ssp3d").style.visibility="visible"; document.getElementById("ssp3e").style.visibility="visible"; } } } if (fourth!=0) { document.getElementById("sp1").style.visibility="visible"; document.getElementById("sp2").style.visibility="visible"; document.getElementById("sp1").innerHTML="N = "+steps; document.getElementById("sp2").innerHTML="π = 4"; //π if (third==0) { if (steps>=32) { document.getElementById("ssp1b").style.visibility="visible"; document.getElementById("ssp1c").style.visibility="visible"; } // if (steps>=256) { //don't bother adding a,b,c labels and just keep invisible.. else fix "circle looks straight" to "circle (hypot) looks straight" but // keep in mind that c is not c but approx straight. etc. so avoid imprecision and just use visual pic. // document.getElementById("ssp4e").style.visibility="visible"; // document.getElementById("ssp4f").style.visibility="visible"; // } document.getElementById("ssp3b").style.visibility="visible"; document.getElementById("ssp3c").style.visibility="visible"; } } document.getElementById(svgid).innerHTML=geostr1; ssp.innerHTML=mult+"x" } //end func var ii=0; var jj=0; sz=5; //of each line below var xxxarr=[ 0, 1,0,0,0, //hold a bit 0, 1,1,0,1, 1, 1,1,0,1, 2, 1,1,0,1, 3, 1,1,0,1, 4, 1,1,0,1, 5, 1,1,0,1, 6, 1,1,0,1, 7, 1,1,0,1, //0, 1,0,0,1, //1, 1,0,0,1, //2, 1,0,0,1, //3, 1,0,0,1, //4, 1,0,0,1, //5, 1,0,0,1, //6, 1,0,0,1, //7, 1,0,0,1, 0, 1,1,1,0, 1, 1,1,1,0, 2, 1,1,1,0, 3, 1,1,1,0, 4, 1,1,1,0, 5, 1,1,1,0, 6, 1,1,1,0, 7, 1,1,1,0, 0, 1,1,1,1, 1, 1,1,1,1, 2, 1,1,1,1, 3, 1,1,1,1, 4, 1,1,1,1, 5, 1,1,1,1, 6, 1,1,1,1, 7, 1,1,1,1, 0, 1,0,0,1, 1, 1,0,0,1, 2, 1,0,0,1, 3, 1,0,0,1, 4, 1,0,0,1, 5, 1,0,0,1, 6, 1,0,0,1, 7, 1,0,0,1, //0, 1,0,0,1, //1, 1,0,0,1, //2, 1,0,0,1, //3, 1,0,0,1, //4, 1,0,0,1, //5, 1,0,0,1, //6, 1,0,0,1, //7, 1,0,0,1, 0, 1,0,1,0, 1, 1,0,1,0, 2, 1,0,1,0, 3, 1,0,1,0, 4, 1,0,1,0, 5, 1,0,1,0, 6, 1,0,1,0, 7, 1,0,1,0, 0, 1,0,1,1, 1, 1,0,1,1, 2, 1,0,1,1, 3, 1,0,1,1, 4, 1,0,1,1, 5, 1,0,1,1, 6, 1,0,1,1, 7, 1,0,1,1, ] var xxxstr=""; //for (i=0; i<1; i++) { //keep in sync with below xxxstr+="xxx("; for (j=0; j<sz-1; j++) { // xxx(xxxarr[1*ii+jj]); xxxstr+=xxxarr[j]+","; } xxxstr+=xxxarr[sz-1]+");"; eval (xxxstr); //} //alert(xxxstr); function donext () { xxxstr=""; if (++ii==xxxarr.length/sz) ii=0; //common with below xxxstr+="xxx("; for (j=0; j<sz-1; j++) { xxxstr+=xxxarr[ii*sz+j]+","; } xxxstr+=xxxarr[ii*sz+sz-1]+");"; eval (xxxstr); } function doprev() { xxxstr=""; if (--ii<0) ii=xxxarr.length/sz-1; //same as above; xxxstr+="xxx("; for (j=0; j<sz-1; j++) { xxxstr+=xxxarr[ii*sz+j]+","; } xxxstr+=xxxarr[ii*sz+sz-1]+");"; eval (xxxstr); //alert(xxxstr) } alert('initialization done'); </script> </body> </html> Update 1:
After seeing the picture (eg, green/red overlap zoom 80x for large N), we still might wonder (and not outright accept) why the two sides of right triangle don't equal the hypotenuse, why doesn't a+b=c?
Well, with basic Euclidean geometry, we can prove Pythagoras Theorem; thus, we are asking, given a2+b2=c2, why doesn't a+b=c? Well, a simple counterexample of 3,4,5 shows that Pythagoras holds where the other simpler equation doesn't (3+4≠5), so a+b=c is not true generally. That being the case, we can't conclude PI=4.