<h2>Intuitive Response<font size=2> (for those who don't understand the more analytical responses)</font></h2>
The answer is easy. We just have to zoom in.
[![Π &ne 4 solution image][1]][1]
[1]: https://i.sstatic.net/EJIJh.gif
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.]
<br>-- see Update 1 at bottom and see "Simple Geometrical Explanation" below.
<hr>
<hr>
<p>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
<p>In case the above explanation + pic is not enough, here is another explanation:
<hr>
<hr>
<p>Simple Geometrical Explanation:
<p><i>[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.]</i>
<p>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?
<p>The answer is simple:
<p>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). <b>We <em>won't</em> 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</b>. This is very intuitive.
<p>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. <b>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.</b>
<p>[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).]
<p>[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.]
<hr>
<hr>
<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>
<hr>
<hr>
<p>Update 1:
<p>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?
<p>Well, with basic Euclidean geometry, we can prove Pythagoras Theorem; thus, we are asking, given a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>, 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.