Polygon Cloud Generator dengan HTML5 Canvas

Oleh Uboiz (Edugameapp) - Agustus 26, 2019

Masih penasaran dengan algorithma pembuatan cloud (awan) sebelumnya, penulis mencoba untuk membuat efek cloud menggunakan polygon.

Ternyata hasilnya lebih bagus, dengan kualitas kecerahan yang lebih tinggi.

Sama dengan kode cloud generator pada posting sebelumnya, bedanya kali ini penulis menggunakan fungsi draw polygon dan dengan menggunakan globalAlpha=0.1.

Berikut ini adalah kode HTML5 Canvas implementasi algorithma di atas:

<html> 
<head> 
<title>Polygon Cloud Generator</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var num=0; 
 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#2196f3"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
warna=["white"]; 
 
ctx.globalAlpha = 0.1; 
function Menggambar() 
{ 
 ctx.beginPath(); 
 var x=canvas.width*Math.random(); 
 var y=canvas.height*Math.random(); 
 ctx.save(); 
 ctx.translate(x,y); 
 ctx.rotate(-180+360*Math.random()*Math.PI/180); 
 var a=Math.random(); 
 ctx.scale(a,a); 
 ctx.fillStyle = warna[Math.floor(warna.length*Math.random())]; 
 ctx.beginPath(); 
 var r=50*Math.random(); 
 var angle=-180,d=10; 
 var jum=Math.round(360.0/d); 
 var points=[]; 
 for(i=0;i<jum;i++){ 
  var c=2+10*Math.random(); 
  var ro=r-c+2*c*Math.random(); 
  points[2*i+0]=ro*Math.cos(1.0*angle*Math.PI/180); 
  points[2*i+1]=ro*Math.sin(1.0*angle*Math.PI/180); 
  angle+=d; 
  if(i==0){ 
   ctx.moveTo(points[2*i+0],points[2*i+1]); 
  }else{ 
   ctx.lineTo(points[2*i+0],points[2*i+1]); 
  } 
 } 
 ctx.fill(); 
 ctx.closePath(); 
 ctx.restore(); 

 num++; 
 window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html>