Percobaan Metode Secant dengan HTML5 Canvas

Oleh -

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

Posting Komentar