Algorithma Pohon Faktor dengan HTML5 Canvas


Aplikasi pohon faktor penulis, telah menjadi sebagai salah satu dari aplikasi matematika Computational Lab yang banyak di download, selain aplikasi-aplikasi matematika lain.

Kegunaannya terutama dalam menghitung Faktor Persekutuan ter-Besar (FPB) dan Kelipatan Persekutuan ter-Kecil (KPK) dari dua angka bilangan bulat atau lebih.

Melihat kemampuan menggambar HTML5 Canvas, penulis tertarik untuk membuat versi HTML5 pohon faktor.

Berikut ini adalah kode program HTML5 Canvas, yang memvisualisasikan bentuk pohon faktor dari suatu bilangan bulat:

<html> 
<head> 
<title>Tree Factor Algorithm</title> 
</head> 
<body> 
Input : <input type="text" id="input"/><button type="button" onclick="CalcPrime()">Calculate</button><br/><br/> 
<canvas id="myCanvas" width="1024" height="768"/> 
<script> 
 
function isPrime(a) 
{ 
 var ketemu=false; 
 if(a>=2)ketemu=true; 
 for(j=2;j<a;j++){ 
  if(i%j==0)ketemu=false; 
 } 
 return ketemu; 
} 
 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
 
var angka=0,noprime=0,level=0; 
 
function Menggambar() 
{ 
 if(level==0){ 
  ctx.fillStyle = "#01579b"; 
  ctx.fillRect(0,0,canvas.width,canvas.height); 
  ctx.fillStyle="white"; 
  ctx.strokeStyle="white"; 
  ctx.lineWidth=3; 
  ctx.shadowColor="black"; 
  ctx.shadowBlur=12; 
  ctx.font = "30px Arial"; 
 } 
 
 var ax=100,ay=80; 

 ctx.beginPath(); 
 ctx.fillText(angka,ax+level*50,ay+level*100-5); 
 ctx.closePath(); 

 if(level>0){ 
  ctx.beginPath(); 
  ctx.moveTo(ax+(level-1)*50+25,ay+(level-1)*100+10); 
  ctx.lineTo(ax+level*50,ay+level*100-40); 
  ctx.stroke(); 
  ctx.closePath(); 
 
  ctx.beginPath(); 
  ctx.moveTo(ax+(level-1)*50,ay+(level-1)*100+10); 
  ctx.lineTo(ax+level*50-80,ay+level*100-40); 
  ctx.stroke(); 
  ctx.closePath(); 

  ctx.beginPath(); 
  ctx.fillText(noprime,ax+level*50-105,ay+level*100-5); 
  ctx.closePath(); 
 } 

 var ketemu=true; 
 while(angka%noprime!=0){ 
  ketemu=false; 
  for(i=noprime+1;i<=angka;i++){ 
   if(isPrime(i)){ 
    noprime=i; 
    ketemu=true; 
    break; 
   } 
  } 
 } 

 if(ketemu){ 
  angka/=noprime; 
  level++; 
  if(angka>=2)window.requestAnimationFrame(Menggambar); 
 } 
} 
 
CalcPrime(); 
 
function CalcPrime() 
{ 
 var a=document.getElementById("input").value; 
 if(!isNaN(a)){ 
  angka=Math.floor(a); 
  noprime=2; 
  level=0; 
  Menggambar(); 
 } 
} 
</script> 
</body> 
</html> 

Komentar



Postingan populer dari blog ini

Menampilkan Undetermined Circle Progressbar di Java

Genetics Algorithm Method with Progressive Error Prediction

Kode Java Membandingkan Dua File

Apps Script untuk Cetak Sertifikat

Algorithma FPB dan KPK dengan Javascript

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

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

Tutorial Upload File ke Google Drive dari Website

Eliminasi Gauss-Jordan untuk Invers Matrix dengan Java

Game TicTacToe dengan Greenfoot