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

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

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Menambahkan Konfirmasi Email di Google Form

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

Menyembunyikan Failed Load Images di Blogger

Kebodohan Karyawan Menyalahkan Sistem