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

Apps Script untuk Cetak Sertifikat

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Algorithma FPB dan KPK dengan Javascript

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

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Apps Script untuk Copy File ke Folder berdasarkan ID yang Terdaftar di Google Sheets

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

Menyikapi Ucapan AI Pejabat

Kebodohan Karyawan Menyalahkan Sistem

Genetics Algorithm Method with Progressive Error Prediction