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

Cara Menentukan Arah Kiblat Menggunakan Google Maps

Algorithma FPB dan KPK dengan Javascript

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

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

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

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

Menyikapi Ucapan AI Pejabat

Kebodohan Karyawan Menyalahkan Sistem

Genetics Algorithm Method with Progressive Error Prediction