Algorithma Hujan Salju dengan HTML5 Canvas


Melihat animasi hujan salju di salah satu video yang penulis temukan di Youtube. Membuat penulis penasaran mengimplementasikan bagaimana caranya membuat animasi hujan salju, menggunakan HTML5 Canvas.

Berikut ini adalah kode HTML, menggunakan HTML5 Canvas untuk membuat animasi yang penulis inginkan.

<html> 
<head> 
<title>Raining Snow</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 
ctx.font = "8px Arial"; 
 
var num=3,n=0,all=0; 
 
snow=[]; 

function Menggambar() 
{ 
 if(n%100 && all<3*500){ 
  for(i=0;i<num;i++){ 
   snow[all++]=canvas.width*Math.random(); 
   snow[all++]=-100-1000*Math.random(); 
   snow[all++]=0.1*(-1.0+3.0*Math.random()); 
  } 
  n=0; 
 } 
 
 ctx.fillStyle = "blue"; 
 ctx.fillRect(0,0,canvas.width,canvas.height); 
 
 ctx.fillStyle = "white"; 
 for(i=0;i<snow.length/3;i++){ 
  snow[3*i+0]+=snow[3*i+2]; 
  snow[3*i+1]+=0.5; 
  ctx.fillText("*",snow[3*i+0],snow[3*i+1]); 
  if(snow[3*i+1]>canvas.height){ 
   snow[3*i+0]=canvas.width*Math.random(); 
   snow[3*i+1]=-100; 
  } 
 } 
 
 n++; 
 window.requestAnimationFrame(Menggambar); 
} 

Menggambar(); 
</script> 
</body> 
</html> 

Penulis tidak menambahkan macam-macam tambahan, hanya lebih berorientasi perpindahan posisi dari karakter "*".

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Menambahkan Konfirmasi Email di Google Form

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

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

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

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

Menyikapi Ucapan AI Pejabat

Menyembunyikan Failed Load Images di Blogger

Apps Script untuk Mengirimkan Notifikasi Approval

Apps Script untuk Copy File ke Folder berdasarkan ID yang Terdaftar di Google Sheets