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

Apps Script untuk Cetak Sertifikat

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

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

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Algorithma Julianday dengan Java

Algorithma Bilangan Prima dengan C++

Menyembunyikan Failed Load Images di Blogger

Kebodohan Karyawan Menyalahkan Sistem

Pengalaman Banding Suspend Aplikasi

Kaidah Baku untuk Konsistensi Data (PT, Tbk, Pty., & Ltd.)