Polygon Cloud Generator dengan HTML5 Canvas


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> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

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

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

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

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Menyembunyikan Failed Load Images di Blogger

Menyikapi Ucapan AI Pejabat

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Kebodohan Karyawan Menyalahkan Sistem

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