Intuitive Response (for those who don't understand the more analytical responses)
The answer is easy. We just have to zoom in. [![Π &ne 4 solution image][1]][1]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.]
-- see "Simple Geometrical Explanation" below for longer but still simple explanation. The Updates at bottom add more insight once the simple geometrical explanation is not good enough for you. [Need to add more pics to clarify some aspects better.. ultimately potentially leading into something approaching a formal proof.]
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 very short explanation + pic is not enough, here is a longer re-explanation (leveraging pic):
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.
Update 2:
The main issue with the right triangles is this, no matter how small they get and how many, those within a given region (in neighborhood of a given angle), even as you go to infinitely many of them, adding the lengths of the (purple) legs of each one will be a significant fraction extra than by taking the straight (green) hypotenuse path. This fraction goes to a given number (say 30%-50% extra near the +-45 degree region.. as a lower bound) that is clearly not zero. This is for every single triangle in that region no matter how many you make, so it factors out of all of them (distributive property). 4 is an upper bound all right. Any shape you use (a saw/staircase), inside or outside the circle, will converge to a higher number as long as it isn't a straight path distance as you get closer and closer to the circle. Distance is defined as the smallest path from point A to B. Every other path shape that does not approach it in value (below epsilon for all n>N0) but instead stays above some lower bound difference against that straight line path (within some "wide" angle region of circle) cannot come arbitrarily close to specifying π. ..this response could use another pic that shows calculations of length and how clearly all "right triangles" within a "wide" region of circle (except tightly at N, E, S, W) will add extra length. A given region of circle, and given path definition, can have a higher-than-zero lower bound plucked out (distributed out) of that region. Being a clear value higher than zero higher than pi in a "wide" region of circle is a sure way to not approach π.