Menghitung Nilai Pi dengan Pixel di HTML5 Canvas

Salah satu metode yang dapat dilakukan untuk menghitung nilai pi (π) adalah dengan menggunakan dot atau pixel.

Konsep ini mengacu pada persamaan matematis untuk menghitung luas lingkaran:

Area=πR²

Dengan mengasumsikan pixel yang berada pada posisi lebih kecil dengan jari-jari lingkaran, sebagai nilai dari Area, maka dengan membaginya dengan nilai jari-jari yang dikuadratkan, maka akan didapatkan nilai pi.

π=Area/R²

Kode di bawah ini adalah contoh perhitungan nilai pi dengan ide pixel yang berada lebih kurang dari nilai R (jari-jari lingkaran) sebagai penambah nilai Area:

<html> 
<head> 
<title>Cari Nilai Pi</title> 
</head> 
<body> 
<div id="hasil" style="padding-left:200px;"></div> 
<canvas id="myCanvas" width="800" height="600"> 
</canvas> 
<script> 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
 
var R=300; 
 
ctx.strokeStyle="black"; 
ctx.lineWidth=5; 
ctx.beginPath(); 
ctx.arc(400,300,R, 0, 2 * Math.PI); 
ctx.stroke(); 
ctx.closePath(); 
 
var Area=0,d=100; 
 
var x=[],y=[]; 
for(i=0;i<d;i++){ 
 x[i]=-R-i*5; 
 y[i]=-R+i; 
} 

function Menggambar() 
{ 
 for(i=0;i<d;i++){ 
  var r=Math.sqrt(x[i]*x[i]+y[i]*y[i]); 
  if(r<R){ 
   ctx.fillStyle="red"; 
   Area++; 
   var pi=Area/(R*R); 
   document.getElementById("hasil").innerHTML="π = "+pi; 
  }else ctx.fillStyle="green"; 

  if(x[i]>=-R && y[i]>=-R && x[i]<=R && y[i]<=R){ 
   ctx.beginPath(); 
   ctx.fillRect(0.5*canvas.width+x[i],0.5*canvas.height+y[i],2,2); 
   ctx.closePath(); 
  } 

  x[i]++; 
  if(x[i]==R){ 
   x[i]=-R; 
   y[i]+=d; 
  } 
 } 
 if(x[d-1]<=R && y[d-1]<=R)window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>