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

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

Menyembunyikan Failed Load Images di Blogger

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

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

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Kebodohan Karyawan Menyalahkan Sistem

Menghilangkan Karakter Baris Baru di Google Sheets dengan Apps Script

Menyikapi Ucapan AI Pejabat

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak