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

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

Apps Script untuk Cetak Sertifikat

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

Kebodohan Karyawan Menyalahkan Sistem

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Ketika Pengelola Basis Data Terabaikan

Menyikapi Ucapan AI Pejabat

Kumpulan Source Code Greenfoot

Menyembunyikan Failed Load Images di Blogger

Apps Script untuk Mengirimkan Notifikasi Approval