Algorithma Gauss-Jordan untuk Mencari Invers Matrix dengan Javascript

Oleh Uboiz -

Awal Mula

Suatu hari, penulis mendapat email dari pengguna aplikasi Invers Matrix penulis yang berbunyi seperti di bawah ini.



Intinya berdasarkan aplikasi yang penulis buat, dia meminta bantuan penulis untuk menyelesaikan algorithma perkalian matrix-nya, untuk problem perkalian pangkat.

Yang mana problem itu merupakan tugas kuliahnya.

Karena sudah memiliki kode, mulanya penulis menganggap dia hanya butuh bantuan sedikit saja menyelesaikan algorithmanya tersebut.

Maka untuk praktisnya, agar tidak ribet menjelaskan, penulis meminta kode yang dia buat, lalu membantu mengoreksi kodenya saja secara langsung.

Dia menggunakan GUI (Graphic User Interface) berbasis C++, entah menggunakan compiler apa, dan penulis hanya mengedit bagian fungsi perhitungan matrix perpangkatannya saja.

Perbaikan itu selesai, dan hasilnya sesuai dengan yang penulis post di tulisan blog ini yang berjudul "Algorithma Perkalian Pangkat Matrix dengan C++".

Menggangu

Selama beberapa hari kemudian, tidak disangka dia terus berusaha menghubungi penulis. 

Masih dengan aplikasi yang sama, dia meminta bantuan penulis untuk menyelesaikan algorithma matrix inversnya.

Tentu karena sudah merasa cukup membantu dengan mengedit kodenya sebelumnya, untuk masalah invers, penulis menolak untuk membantunya secara langsung.

Penulis hanya memberi petunjuk, agar dia belajar perhitungan numerik, dan menyelesaian problem invers matrix menggunakan metode eliminasi Gauss-Jordan, sebagaimana yang penulis lakukan pada aplikasi Invers Matrix penulis.

Bukannya tidak bisa, penulis hanya ingin dia belajar menyelesaiakannya sendiri.

Nglunjak

Dikasih hati, malah minta jantung.

Mungkin peribahasa inilah yang cocok untuk mahasiswa itu.

Dengan bantuan yang didapatnya dengan mudah sebelumnya, sepertinya dia berusaha untuk mendapatkan hal yang sama untuk invers.

Hal ini terbukti sesuai cuplikan chat dia dibawah ini:


Artinya, meskipun penulis berkali-kali berusaha meminta dia belajar sendiri dan menyelesaikan dengan belajar dulu eliminasi Gauss-Jordan, dia tidak mendengarkan dan bersikeras meminta bantuan penulis (kode penulis) sebab katanya terbatas waktu.

Karena merasa dia hanya memanfaatkan penulis, maka penulis pun marah dan tidak tahan, sehingga memunculkan kata-kata chat berikut:


Sungguh penulis sangat tidak menyukai orang yang hanya suka memperalat orang, terutama dengan kemasan "meminta tolong" seperti ini.

Kode

Link berikut ini, adalah implementasi eliminasi Gauss-Jordan dengan Javascript, dan bukti bahwa penulis tidak pelit.


Kode tersebut sesuai kode yang penulis cantumkan di bawah, yang dapat di coba dan download di link di atas, dengan cara save as.

Penulis hanya ingin setiap mahasiswa itu belajar, bukan memanfaatkan orang lain seenak hatinya.

Dan yang terpenting adalah mereka tahu etika bagaimana untuk menghargai orang lain.

Disini penulis tidak menyertakan pembahasan secara matematis mengenai Gauss-Jordan, karena dapat ditemukan dengan mudah di sumber internet lain.
<html> 
<head> 
<title>Invers Matrix dengan Javascript</title> 
</head> 
<body> 
<div style="text-align:right;border-bottom:1px solid black;padding:5px;"> 
<a href="edugameapp.com">Home</a> 
</div> 
<script> 
var DIMENSION=0; 
var A=[],B=[],C=[],D=[],E=[]; 
 
function makeMatrix() 
{ 
 var row=parseInt(document.getElementById("row").value); 
 var col=parseInt(document.getElementById("column").value); 
 if(isNaN(row)||isNaN(col)){ 
  alert("Row and Column must be integer!"); 
 }else{ 
  if(row<1 || col<1){ 
   alert("Minimum Row and Column is 1!"); 
  }else if(row!=col){ 
   alert("Row and Column must be same!"); 
  }else{ 
   DIMENSION=row; 
   document.getElementById("maintable").innerHTML=""; 
   for(var i=0;i<row;i++){ 
    var str="<tr>"; 
    for(var j=0;j<col;j++){ 
     str+="<td><input id='A"+i+""+j+"' type='text' style='text-align:center;width:50px;'/></td>"; 
    } 
    str+="</tr>"; 
    document.getElementById("maintable").innerHTML+=str; 
   } 

   document.getElementById("tablegaussjordan").innerHTML=""; 
   for(var i=0;i<row;i++){ 
    var str="<tr>"; 
    for(var j=0;j<col;j++){ 
     str+="<td><input id='B"+i+""+j+"' type='text' value='' style='text-align:center;width:50px;'/></td>"; 
    } 
    str+="</tr>"; 
    document.getElementById("tablegaussjordan").innerHTML+=str; 
   } 

   document.getElementById("tablegaussjordan1").innerHTML=""; 
   for(var i=0;i<row;i++){ 
    var str="<tr>"; 
    for(var j=0;j<col;j++){ 
     str+="<td><input id='C"+i+""+j+"' type='text' value='"+((i==j)?1:0).toString()+"' style='text-align:center;width:50px;'/></td>"; 
    } 
    str+="</tr>"; 
    document.getElementById("tablegaussjordan1").innerHTML+=str; 
   } 

   document.getElementById("tableresult").innerHTML=""; 
   for(var i=0;i<row;i++){ 
    var str="<tr>"; 
    for(var j=0;j<col;j++){ 
     str+="<td><input id='D"+i+""+j+"' type='text' value='' style='text-align:center;width:50px;'/></td>"; 
    } 
    str+="</tr>"; 
    document.getElementById("tableresult").innerHTML+=str; 
   } 

   document.getElementById("tablebukti1").innerHTML=""; 
   for(var i=0;i<row;i++){ 
    var str="<tr>"; 
    for(var j=0;j<col;j++){ 
     str+="<td><input id='E"+i+""+j+"' type='text' value='' style='text-align:center;width:50px;'/></td>"; 
    } 
    str+="</tr>"; 
    document.getElementById("tablebukti1").innerHTML+=str; 
   } 

   document.getElementById("tablebukti2").innerHTML=""; 
   for(var i=0;i<row;i++){ 
    var str="<tr>"; 
    for(var j=0;j<col;j++){ 
     str+="<td><input id='F"+i+""+j+"' type='text' value='' style='text-align:center;width:50px;'/></td>"; 
    } 
    str+="</tr>"; 
    document.getElementById("tablebukti2").innerHTML+=str; 
   } 

   document.getElementById("tablebukti3").innerHTML=""; 
   for(var i=0;i<row;i++){ 
    var str="<tr>"; 
    for(var j=0;j<col;j++){ 
     str+="<td><input id='G"+i+""+j+"' type='text' value='' style='text-align:center;width:50px;'/></td>"; 
    } 
    str+="</tr>"; 
    document.getElementById("tablebukti3").innerHTML+=str; 
   } 
  } 
 } 
} 
 
function calculate() 
{ 
 var row=parseInt(document.getElementById("row").value); 
 var col=parseInt(document.getElementById("column").value); 
 if(isNaN(row)||isNaN(col)){ 
  alert("Row and Column must be integer!"); 
 }else{ 
  if(row<1 || col<1){ 
   alert("Minimum Row and Column is 1!"); 
  }else if(row!=col){ 
   alert("Row and Column must be same!"); 
  }else{ 
   for(var i=0;i<row;i++){ 
    for(var j=0;j<col;j++){ 
     A[i+DIMENSION*j]=parseFloat(document.getElementById("A"+i+""+j).value); 
     B[i+DIMENSION*j]=A[i+DIMENSION*j]; 
     C[i+DIMENSION*j]=0; 
     if(i==j)C[i+DIMENSION*j]=1; 
    } 
   } 

   var b=cekDiagonal(0); 
   if(!b)alert("Cannot calculate invers!"); 

   for(var k=0;k<row;k++){ 
    var p=B[k+DIMENSION*k]; 
    if(p==0){ 
     alert("Cannot calculate invers!"); 
     return; 
    } 
    for(var j=0;j<col;j++){ 
     B[k+DIMENSION*j]/=p; 
     C[k+DIMENSION*j]/=p; 
    } 

    for(var i=k+1;i<row;i++){ 
     p=B[i+DIMENSION*k]; 
     for(var j=0;j<col;j++){ 
      B[i+DIMENSION*j]-=B[k+DIMENSION*j]*p; 
      C[i+DIMENSION*j]-=C[k+DIMENSION*j]*p; 
     } 
    } 
   } 

   for(var k=row-1;k>=0;k--){ 
    for(var i=k-1;i>=0;i--){ 
     var p=B[i+DIMENSION*k]; 
     for(var j=row-1;j>=0;j--){ 
      B[i+DIMENSION*j]-=B[k+DIMENSION*j]*p; 
      C[i+DIMENSION*j]-=C[k+DIMENSION*j]*p; 
     } 
    } 
   } 

   for(var i=0;i<row;i++){ 
    for(var j=0;j<col;j++){ 
     var sum=0.0; 
     for(var k=0;k<row;k++){ 
      sum+=A[i+DIMENSION*k]*C[k+DIMENSION*j]; 
     } 
     D[i+DIMENSION*j]=sum; 
    } 
   } 

   masukkan(); 
  } 
 } 
} 
 
function masukkan() 
{ 
 for(var i=0;i<DIMENSION;i++){ 
  for(var j=0;j<DIMENSION;j++){ 
   document.getElementById("E"+i+""+j).value=A[i+DIMENSION*j]; 
   document.getElementById("B"+i+""+j).value=B[i+DIMENSION*j]; 
   document.getElementById("C"+i+""+j).value=C[i+DIMENSION*j]; 
   document.getElementById("D"+i+""+j).value=C[i+DIMENSION*j]; 
   document.getElementById("F"+i+""+j).value=C[i+DIMENSION*j]; 
   document.getElementById("G"+i+""+j).value=D[i+DIMENSION*j]; 
  } 
 } 
} 
 
function cekDiagonal(a) 
{ 
 var row=DIMENSION; 
 var col=DIMENSION; 
 if(a>row*10)return false; 
 for(var i=0;i<row;i++){ 
  var nilai=B[i+DIMENSION*i]; 
  if(nilai==0){ 
   var k=(i+Math.round(Math.random()*row))%row; 
   if(k==i)return cekDiagonal(a+1); 
   else{ 
    for(var j=0;j<col;j++){ 
     var stro=B[i+DIMENSION*j]; 
     B[i+DIMENSION*j]=B[k+DIMENSION*j]; 
     B[k+DIMENSION*j]=stro; 

     stro=C[i+DIMENSION*j]; 
     C[i+DIMENSION*j]=C[k+DIMENSION*j]; 
     C[k+DIMENSION*j]=stro; 
    } 
    return cekDiagonal(a+1); 
   } 
  } 
 } 
 return true; 
} 
</script> 
 
<h1>Invers Matrix with Gauss-Jordan Elimination Method</h1> 
<div> 
Matrix dimension<br/> 
<input id="row" type="text" value="1" size="3"/>X<input id="column" type="text" value="1" size="3"/><input type="submit" value="submit" onclick="makeMatrix()"/> 
</div> 
 
<div style="margin:20px;display:flex;"> 
<div style="align-self: center">A=</div> 
<div style="align-self: center"> 
<table id="maintable" style="border-right: 2px solid black;border-left: 2px solid black;"> 
</table> 
</div> 
</div> 
 
<div><input type="submit" value="Calculate" onclick="calculate()"/></div> 
 
<div style="margin:20px;display:flex;"> 
<div style="align-self: center"> 
<table id="tablegaussjordan" style="border-right: 1px dashed black;border-left: 2px solid black;"> 
</table> 
</div> 
<div style="align-self: center"> 
<table id="tablegaussjordan1" style="border-right: 2px solid black;border-left: 1px dashed black;"> 
</table> 
</div> 
</div> 
 
<div style="margin:20px;display:flex;"> 
<div style="align-self: center">A<sup>-1</sup>=</div> 
<div style="align-self: center"> 
<table id="tableresult" style="border-right: 2px solid black;border-left: 2px solid black;"> 
</table> 
</div> 
</div> 
 
<div style="margin:20px;display:flex;"> 
<div style="align-self: center">A*A<sup>-1</sup>=</div> 
<div style="align-self: center"> 
<table id="tablebukti1" style="border-right: 2px solid black;border-left: 2px solid black;"> 
</table> 
</div> 
<div style="align-self: center"> 
<table id="tablebukti2" style="border-right: 2px solid black;border-left: 2px solid black;"> 
</table> 
</div> 
<div style="align-self: center"> 
= 
</div><div style="align-self: center"> 
<table id="tablebukti3" style="border-right: 2px solid black;border-left: 2px solid black;"> 
</table> 
</div> 
</div> 
 
<div>Created by uboiz@yahoo.com</div> 
 
</body> 
</html>

Cuplikan

Berikut ini cuplikan lain, beberapa hasil chat dengan mahasiswa di atas, yang membuat penulis kesal.







Komentar

Posting Komentar



Postingan populer dari blog ini

Kumpulan Source Code Greenfoot

Oleh Uboiz -
Gambar
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D d
Baca selengkapnya

Algorithma Coretan Abstrak dengan HTML5 Canvas

Oleh Uboiz -
Gambar
Coretan dengan gradasi sisi kiri dan sisi kanan, dapat dibuat dengan fungsi fillRect dengan lebar 1x1 pixel. Algorithmanya adalah membentuk garis horizontal dengan tinggi juga 1 pixel saja, dengan lebar acak mulai 0 sampai 500 pixel, dengan semakin ke pinggir nilai alphanya semakin transparan. Sedangkan untuk penggambarannya dibagi menjadi tiap seksi. Dimana tiap seksi menggambar 50 garis, dengan posisi dan rotasi tidak jauh dari posisi dan rotasi utama. Setting ulang posisi dan rotasi utama dilakukan tiap seksi, sampai kurang lebih 100 kali. Berikut ini adalah kode HTML5 Canvas yang mengimplementasikan algorithma di atas: <html> <head> <title>Random Pixel</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); ctx.
Baca selengkapnya

Cara Membuat Halaman HTML Sederhana

Oleh Uboiz -
Gambar
Membuat halaman website sebenarnya tidaklah sulit. Yang diperlukan hanyalah mencoba. Tulisan berikut ini adalah berdasarkan pengalaman penulis, tutorial cepat bagaimana membuat halaman HTML untuk membangun sebuah website sederhana. Perlu diketahui, bahasa pemrograman dasar dari tampilan website adalah HTML, dan saat tulisan ini ditulis, bahasa HTML telah mencapai versi HTML5. Setiap halaman website sebenarnya ditulis dalam bentuk bahasa ini, dan web browserlah yang bertugas untuk merender dari kode HTML tersebut, agar halaman website tidak tampil berupa kode-kode program saja, melainkan dengan tampilan yang dapat dimengerti dengan mudah oleh mata manusia. Alat yang diperlukan untuk membuat halaman HTML adalah text editor seperti Notepad. Jika diperlukan, dapat digunakan aplikasi Notepad++, untuk mempermudah mengenali tag-tag HTML. Dengan Notepad++ ini pula, akan dapat dengan mudah mengatur indentasi, bagi programer yang membutuhkan kerapian. Membuat Halaman HTML Membuat
Baca selengkapnya

Game TicTacToe dengan Greenfoot

Oleh Uboiz -
Gambar
Game Tic Tac Toe, meskipun termasuk game yang sederhanya, ternyata sulit juga untuk membuatnya. Terutama untuk memasukkan Artificial Intelligence (AI) sebagai musuh pemain. Penulis sebenarnya telah mencoba mengimplementasikan algorithma game Tic Tac Toe dengan HTML5 Canvas pada posting sebelumnya, namun disini penulis mencoba menulis ulang dengan Greenfoot, dan melakukan efisiensi penulisan kode program. Awalnya, sesuai gambar diatas dan dalam video dibawah ini, penulis membuatnya dengan Greenfoot versi 3.x, namun karena terlalu memakan banyak memori, penulis ubah ke Greenfoot versi lebih awal, yaitu Greenfoot 2.x. Sedangkan untuk kode nya dapat di download dengan link dibawah ini: Download TicTacToe.gfar Ide AI-nya cukup sederhana, yaitu komputer mencoba bertahan, dengan mencari posisi pemain dimana paling berpotensi menang, baru kemudian mencari posisi untuk dirinya sendiri untuk menang. Untuk game versi Android-nya dapat dicoba di link dibawah ini
Baca selengkapnya

Kode Greenfoot Game Snake Sederhana

Oleh Uboiz -
Gambar
Penasaran dengan kode game snake jaman dahulu, penulis iseng membuat game snake menggunakan Greenfoot. Game dibuat cukup sederhana dengan hanya empat class Actor, yaitu class Ular, Kepala, Makanan, Score dan GameOver. Kontrol game menggunakan arah keyboard arah atas, kebawah, kiri dan kanan. Kode ini cocok bagi mereka yang ingin belajar bahasa pemrograman Java menggunakan Greenfoot. Kode Greenfoot tersebut dapat di donload pada link di sini .
Baca selengkapnya

Algoritma Tombol Putar dengan Greenfoot

Oleh Uboiz -
Gambar
Membuat tombol dengan perilaku diputar, sebagaimana tombol di volume radio jaman dahulu, tidaklah mudah. Hal ini dikarenakan ada perhitungan batasan yang dihitung oleh fungsi Math.atan2, dengan range  sudut -180 sampai 180. Padahal dalam suatu kondisi perhitungan, dapat menghasilkan arah perputaran yang keliru. Misalnya tombol berada di sudut 160, kemudian akan diputar ke sudut 190. Dengan menggunakan konversi Math.atan2 akan menghasilkan arah perputaran minus. Karena dititik 190 dideteksi sudut -170. Untuk solusi kondisi seperti di atas, dilakukan dengan menghitung selisih paling sedikit, perbedaan di range sudut -180 sampai 180, dengan 0 sampai 360. Untuk lebih jelasnya dapat dilihat pada video tutorial berikut: Kode Greenfoot contoh algorithma dapat di downlad di link dibawah ini: https://drive.google.com/open?id=1m-pKkdAWA81X0rYD5ASFFoWQxT34D7Kk
Baca selengkapnya

Honeycomb Style Wallpaper dengan HTML5 Canvas

Oleh Uboiz -
Gambar
Bentuk hexagon merupakan bentuk yang menarik dan identik dengan bentuk sarang lebah madu (Honeycomb). Gambar di atas adalah gambar hasil generate bentuk hexagon, yang disusun sesuai urutan, dengan lebar dan jarak tertentu, menggunakan HTML5 Canvas. Dengan menambahkan efek warna gradient hijau pada background dan shadow pada masing-masing bentuk hexagonnya, dapat menambahkan efek futuristik dan elegan sebagai wallpaper dekstop, smartphone, tablet atau semacamnya. Berikut kode HTML5 Canvasnya: <html> <head> <title>Honeycomb Shape</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var points=[]; var ctx = canvas.getContext( "2d" ); var grd = ctx.createRadialGradient(0.5*canvas.width,0.5*canvas.height,0,0.5*canvas.width,0.5*canvas.height,360); grd.addColorStop(0
Baca selengkapnya

Tips Agar Website Anda Segera di Terima oleh Google Adsense dan di-Monetize

Oleh Uboiz -
Berikut beberapa saran dari pihak Google Adsense yang mungkin bisa saya share kepada Anda ang ingin agar websitenua segera diapprove oleh Google Adsense dan segera dapay di-monetize: Pastikan laman Anda berisi teks yang memadai - situs web yang kontennya sebagian besar adalah gambar, video, atau animasi Flash tidak akan disetujui. Konten Anda harus berisi kalimat dan paragraf lengkap, bukan sekadar judul. Pastikan situs web Anda telah sepenuhnya rampung dan diluncurkan sebelum Anda mengajukan permohonan untuk AdSense - jangan ajukan permohonan ketika situs Anda masih dalam versi beta atau tahap "sedang dibuat" atau hanya terdiri dari kerangka situs web. Tempatkan kode iklan di laman aktif situs web Anda. Tidak harus berupa laman utama, namun laman percobaan yang kosong kecuali untuk kode iklan AdSense tidak akan disetujui. Sediakan sistem navigasi yang jelas untuk para pengunjung agar mudah menemukan semua bagian dan laman dalam situs web Anda. Jika Anda ingin
Baca selengkapnya

Modifikasi Obyek 3D Hellosceneform dengan MeshLab

Oleh Uboiz -
Gambar
Hellosceneform adalah contoh project Android penggunaan ARCore , yang saat tulisan ini ditulis dapat di download di sini . Sedangkan MeshLab adalah software viewer model 3D yang dapat digunakan untuk memodifikasi obyek 3D yang akan digunakan di Hellosceneform. Modifikasi ini perlu dilakukan terkait konsumsi memori yang akan dipergunakan device Android. Semakin banyak jumlah titik pada obyek 3D, akan membutuhkan konsumsi memori yang tinggi. Sehingga obyek perlu di kompres dengan MeshLab sebagaimana rupa, supaya ringan dan dapat dijalankan di device Android, meskipun kapasitas memorinya kecil. Selain itu, ARCore mensyaratkan volume obyek harus tidak boleh lebih besar dari 1.0x1.0x1.0 satuan, yang mana penulis menggunakan MeshLab untuk merubah skala dibawah syarat ukuran di atas, jika obyek yang dimasukkan berukuran volume lebih besar. Berikut ini adalah contoh langkah-langkah modifikasi penggunaan MeshLab untuk modifikasi obyek 3D sebagai pengganti obyek di p
Baca selengkapnya

Selamatan Latar Glundengan Bubuk Banyuwangi

Oleh Uboiz -
Gambar
Setiap tahun, bertepatan dengan 1 Muharram, pada Sabtu 31 Agustus 2019, masyarakat Dukuh Glundengan, Dusun Warengan, Desa Bubuk, Kecamatan Rogojampi, Kabupaten Banyuwangi mengadakan acara selamatan latar. Selamatan ini berupa makan bersama di depan rumah masing-masing, dengan menu khas Sego Takir Pecel Pitik yang dibentuk seperti gambar di atas. Dan dilaksanakan sebelum matahari terbenam, tepat ketika pergantian tahun Hijriyah 1440 ke 1441. Selametan dimulai dengan dzikir bersama, yang dipandu oleh pemuka agama desa, Bapak Maskur Husni langsung dari masjid, melalui pengeras suara. Masyarakat pun mengikuti berdzikir bersama di depan rumah masing-masing, yang dilanjutkan dengan doa akhir tahun, dan diakhiri dengan makan bersama keluarga dan tetangga terdekat. Menurut salah satu warga setempat, alasan kenapa harus berada di latar (di depan rumah), ditujukan agar hubungan sesama tetangga semakin rukun dan lebih saling welas asih, terutama jika ad
Baca selengkapnya