Algorithma Segitiga Pascal dengan HTML5 Canvas

Oleh Uboiz (Edugameapp) - September 17, 2019

Segitiga Pascal merupakan contoh kasus yang sering digunakan sebagai latihan logika pemrograman, dan sangat berguna dalam matematika, yaitu untuk perhitungan polynomial.

Namun dalam posting ini, hanya akan ditunjukkan bagaimana mengimplementasikan algorithmanya.

Dengan menggunakan Javascript array, ternyata algorithma pembuatan segitiga tersebut lebih mudah dan simple.

Dibawah ini adalah kode contoh implementasi Javascript untuk pembuatan segitiga Pascal, dengan menggunakan HTML5 Canvas sebagai media untuk menampilkannya.

<html> 
<head> 
<title>Pascal's Triangle</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "#01579b"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
ctx.fillStyle = "white"; 
ctx.shadowColor="black"; 
ctx.shadowBlur=5; 
ctx.font = "30px Arial"; 
 
var x=0.5*canvas.width,y=50,d=30,n=1; 
var val=[]; 
 
val[0]=1; 
 
function Menggambar() 
{ 
 for(i=0;i<n;i++){ 
  var u=30-n; 
  if(u<8)u=8; 
  ctx.font = u+"px Arial"; 
  ctx.fillText(val[i],-n*d+x+i*(30+d),y+n*30); 
 } 
 n++; 
 for(i=n-1;i>0;i--){ 
  if(i==n-1)val[i]=1; 
  else if(i==0)val[i]=1; 
  else{ 
   val[i]+=val[i-1]; 
  } 
 } 
 if(n<17)window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>