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=πR2

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/R2

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> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Menambahkan Random Key sebagai ID Pembeda di Google Sheet dengan Apps Script

Menghapus Baris di Google Sheets yang Memiliki Sel Kosong dengan Apps Script

Genetics Algorithm Method with Progressive Error Prediction

Menampilkan Undetermined Circle Progressbar di Java

Eliminasi Gauss-Jordan untuk Invers Matrix dengan C++

Kaidah Baku untuk Konsistensi Data (PT, Tbk, Pty., & Ltd.)

Menyikapi Ucapan AI Pejabat

Jasa Penjadwalan Semester, UTS dan UAS Perguruan Tinggi menggunakan Google Sheet

Kebodohan Karyawan Menyalahkan Sistem