Visualisasi Metode Biseksi dengan HTML5 Canvas


Metode biseksi atau dikenal juga dengan nama metode setengah selisih, adalah salah satu metode numerik untuk mencari akar-akar.

Penulis telah lama berkecimpung di perhitungan numerik.

Sayangnya sampai tulisan ini ditulis, penulis sudah hampir tiga tahun tidak menyelesaikan permasalahan numerik yang baru, kecuali di aplikasi Algebra Equation Calculator.

Dalam posting ini, penulis mencoba mengingat kembali kemampuan penulis tentang metode numerik.

Dan karena penulis sedang tertarik untuk belajar HTML5 Canvas, oleh karena kode dibawah ini adalah hasil percobaan penulis menggunakan HTML5 Canvas untuk memvisualisasikan hasil perhitungan dengan metode biseksi untuk mencari salah satu akar dari persamaan f(x)=x2-4x-12.

<html> 
<head> 
<title>Visualisasi Metode Setengah Selisih</title> 
</head> 
<body> 
<canvas id="myCanvas" width="800" height="600"> 
</canvas> 
<script> 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "white"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
ctx.strokeStyle = "black"; 
ctx.beginPath(); 
ctx.moveTo(0,0.5*canvas.height); 
ctx.lineTo(canvas.width,0.5*canvas.height); 
ctx.stroke(); 
ctx.closePath(); 
 
ctx.beginPath(); 
ctx.moveTo(0.5*canvas.width,0); 
ctx.lineTo(0.5*canvas.width,canvas.height); 
ctx.stroke(); 
ctx.closePath(); 
 
var btskiri=-15; 
var btskanan=15; 
var step=0.01,scale=20; 
 
ctx.strokeStyle = "gray"; 
ctx.beginPath(); 
var xo=btskiri; 
var fo=f(xo); 
ctx.moveTo(scalex(xo),scaley(fo)); 
while(xo<btskanan){ 
 xo+=step; 
 fo=f(xo); 
 ctx.lineTo(scalex(xo),scaley(fo)); 
} 
ctx.stroke(); 
ctx.closePath(); 
 
ctx.fillStyle="black"; 
ctx.font = "12px Arial"; 
 
function f(x) 
{ 
 return x*x-4*x-12; 
} 
 
function scalex(x) 
{ 
 return scale*x+0.5*canvas.width; 
} 
 
function scaley(y) 
{ 
 return scale*y+0.5*canvas.height; 
} 
 
var a=-5.0; 
var b=0.0; 
 
var xo=a; 
var x1=b; 
 
var jeda=0,n=0; 

function Menggambar() 
{ 
 if(jeda>0){ 
  jeda--; 
  window.requestAnimationFrame(Menggambar); 
  return; 
 } 

 var fo=f(xo); 
 var f1=f(x1); 
 var x2=0.5*(xo+x1); 
 var f2=f(x2); 

 ctx.strokeStyle = "red"; 
 ctx.beginPath(); 
 ctx.moveTo(scalex(xo),scaley(0)); 
 ctx.lineTo(scalex(xo),scaley(fo)); 
 ctx.stroke(); 
 ctx.closePath(); 

 ctx.beginPath(); 
 ctx.moveTo(scalex(x1),scaley(0)); 
 ctx.lineTo(scalex(x1),scaley(f1)); 
 ctx.stroke(); 
 ctx.closePath(); 

 ctx.strokeStyle = "pink"; 
 ctx.beginPath(); 
 ctx.moveTo(scalex(x2),scaley(0)); 
 ctx.lineTo(scalex(x2),scaley(f2)); 
 ctx.stroke(); 
 ctx.closePath(); 

 if(fo*f2>0)xo=x2; 
 else x1=x2; 

 ctx.fillText("x = "+x2,10,12+n*12); 
 n++; 

 jeda=100; 
 if(Math.abs(f2)>0.000000000000001)window.requestAnimationFrame(Menggambar); 
 else alert("Done!"); 
} 
 
Menggambar(); 
</script> 
</body> 
</html> 

Terlihat sesuai gambar di atas, dengan menggunakan HTML5 Canvas ditemukan salah satu nilai akar mendekati x=-1.99999999999973.

Variabel btskiri, btskanan dan scale digunakan untuk mengatur space grafik.

Sedangkan variabel a dan b, masing-masing berfungsi sebagai batas bawah dan batas atas, atau nilai prediksi awal perhitungan numerik metode setengah selisih.

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

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

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

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

Menyikapi Ucapan AI Pejabat

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

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Menyembunyikan Failed Load Images di Blogger

Kebodohan Karyawan Menyalahkan Sistem

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