Calculate PI

README.md

This is an educational project that aims to show how pi works, and how that definition can be used to calculate it.

In this example a square is made. Then a circle with the radius of half the square's length is used, making it fit perfectly within the square. Now we create random coordinates within the square and use pythagoras to decide if the coordinate is within the circle (it's distance to the center would be less then the circle radius). If this is done let's say 10 times, and 8 points would be within the circle, that means that on average the ratio of [surface area circle : surface area square] is about [8:10].

If we understand that 4*r^2 is the surface area of the full square, and pi*r^2 is the surface area of the circle, we understand that pi is this ratio of circle:square times four. So by rougly calculating this ratio we can also calculate pi

In the example we don't use 10 but rather 500 or a thousand random points to calculate this ratio as closely as possible.

pi.html

<style>body{background-color: rgb(100,100,100); color: #fff}</style>

<p>4*r^2 is the full square, pi*r^2 is the circle. Pi is the ratio of a circle's surface area to a square's surface area</p>
<p style="display:inline-block;">dots:</p>
<input style="display:inline-block;" type="text" id="accuracy" value="500">
<button style="display:inline-block;" onclick="calc()">calc</button>
<canvas style="display:block;" id="piCalcWindow" width="800" height="800">Your browser doesn't support the canvas, try changing browsers</canvas>
<p id="result">pi: </p>
<p id="accuracyResult">result accuracy: </p>

<script>
let canvas = document.getElementById('piCalcWindow');
let ctx = canvas.getContext('2d');

dcanvas();

//Draw canvas
function dcanvas() {
	ctx.beginPath();
	ctx.lineWidth=3;
	ctx.fillStyle = "Black";
	ctx.strokeStyle = "White";
	ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2*Math.PI);
	ctx.rect(0,0,canvas.width,canvas.height);
	ctx.fill();
	ctx.stroke();
}

function calc() {
	let accuracy = parseInt(document.getElementById('accuracy').value);
	
	dcanvas();
	
	//Draw dots
	let count = 0;
	let dotsInCircle = 0;
	let dotsOutOfCircle = 0;
	while (count < accuracy) {
		
		ctx.beginPath();
		let x = Math.random() * (canvas.width - 2) + 2;
		let y = Math.random() * (canvas.height - 2) + 2;
		ctx.arc(x, y, 1, 0, 2*Math.PI);
		
		if (canvas.width/2 > Math.sqrt(Math.pow(x - canvas.width/2, 2) + Math.pow(y - canvas.height/2, 2))){
			ctx.fillStyle = "Green";
			dotsInCircle++;
		} else ctx.fillStyle = "Red";
		
		ctx.fill();
		count++;
	}

	//Redraw circle
	ctx.beginPath();
	ctx.arc(canvas.width/2, canvas.height/2, canvas.width/2, 0, 2*Math.PI);
	ctx.stroke();

	let pi = dotsInCircle/accuracy * 4;
	document.getElementById('result').innerHTML = 'pi: ' +  pi;
	document.getElementById('accuracyResult').innerHTML = 'result accuracy: ' + 
	(/* small/big */(pi > Math.PI ? Math.PI : pi )/(pi > Math.PI ? pi : Math.PI) * 100).toFixed(5) + '%';
}
</script>