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

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

Template Gratis App Android Sederhana dengan Admob, Firebase dan In-app Purchase

Cara Membuat Halaman HTML Sederhana

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

Menyikapi Ucapan AI Pejabat

Menambahkan Konfirmasi Email di Google Form

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Menyembunyikan Failed Load Images di Blogger

Kebodohan Karyawan Menyalahkan Sistem