Percobaan Metode Secant dengan HTML5 Canvas


Setelah melakukan percobaan pencaharian akar-akar persamaan menggunakan metode biseksi, dalam posting ini penulis ingin menunjukkan penggunaan HTML5 Canvas untuk implementasi metode Secant.

Sama seperti metode Biseksi, metode Secant seringkali digunakan untuk mencari akar-akar persamaan polynomial.

Dari Wikipedia (2019) disebutkan persamaan matematis untuk metode Secant adalah sebagai berikut:


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)=x*x-4*x-12.

<html> 
<head> 
<title>Visualisasi Metode Secant</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=5.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=(xo*f1-x1*fo)/(f1-fo); 
 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 = "orange"; 
 ctx.beginPath(); 
 ctx.moveTo(scalex(x2),scaley(0)); 
 ctx.lineTo(scalex(x2),scaley(f2)); 
 ctx.stroke(); 
 ctx.closePath(); 

 xo=x1; 
 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=-2.

Dibandingkan dengan metode biseksi, membutuhkan jumlah iterasi yang lebih sedikit.

Referensi

Komentar



Postingan populer dari blog ini

Algorithma FPB dan KPK dengan Javascript

Menampilkan Undetermined Circle Progressbar di Java

Genetics Algorithm Method with Progressive Error Prediction

Apps Script untuk Cetak Sertifikat

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Kode Java Membandingkan Dua File

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Tutorial Upload File ke Google Drive dari Website

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

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