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>