Cloud Generator Sederhana dengan HTML5 Canvas


Setelah berhasil mengimplementasikan efek grain seperti ditunjukkan pada posting sebelumnya, dengan algorithma yang sama, penulis menemukan algorithma untuk membuat efek cloud atau awan.

Awan yang dimaksud disini adalah seperti gambar di atas.

Sedangkan untuk awan yang bertumpuk, yang seolah tampak seperti noda atau bercak, masih penulis cari bagaimana algorithmanya, dan akan penulis coba posting sebagai artikel selanjutnya.

Awan pada gambar di atas, dibuat dengan menggunakan bentuk bulat dan fungsi radial gradient dengan diameter 100 pixel, yang disebar secara acak.

Dan dengan menggunakan inisial nilai transparancy 0.01 dari 1.0, agar tumpukan bentuk bulat menjadi tidak terlalu tebal pada salah satu titik saja.

Masalahnya, penulis belum mengetahui alasan munculnya grid (kotak-kotak). Mungkin ada setting di browser untuk menambahkan mengecilkan ukuran pixel di Canvas.

Berikut ini adalah kode HTML5 Canvas untuk menggenerate gambar awan di atas:
<html> 
<head> 
<title>Simple Cloud Generator</title> 
</head> 
<body> 
<canvas id="myCanvas" width="800" height="600"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var num=0; 
 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
function Menggambar() 
{ 
 ctx.beginPath(); 
 var ax=canvas.width*Math.random(); 
 var ay=canvas.height*Math.random(); 
 if(num%5==0 && ax>0.25*canvas.width && ax<0.75*canvas.width  && ay>0.25*canvas.height && ay<0.75*canvas.height){ 
  //do nothing 
 }else{ 
  var grd = ctx.createRadialGradient(ax,ay,0,ax,ay,Math.floor(10+90*Math.random())); 
  grd.addColorStop(0, "rgba(77,208,255,0.01)"); 
  grd.addColorStop(1, "rgba(0,0,0,0.0)"); 
  ctx.fillStyle = grd; 
  ctx.arc(ax,ay,100,0,2 * Math.PI); 
  ctx.fill(); 
 } 
 ctx.closePath(); 
 num++; 
 if(num>1000)num-=1000; 
 window.requestAnimationFrame(Menggambar); 
} 
 
Menggambar(); 
</script> 
</body> 
</html> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Algorithma Java Mencari KPK dan FPB

Algorithma Coretan Abstrak dengan HTML5 Canvas

Kode Greenfoot Game Flappy Bird

Menyembunyikan Failed Load Images di Blogger

Kumpulan Source Code Greenfoot

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

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

Kode Greenfoot Game Snake Sederhana

Kebodohan Karyawan Menyalahkan Sistem