Grain Generator Sederhana dengan HTML5 Canvas


Semenjak pertama kali penulis tertarik dengan image processing, penulis penasaran bagaimana membuat algorithma efek grain untuk ditambahkan sebagai tekstur.

Efek grain yang penulis maksud disini, seperti tumpukan pasir, atau partikel-partikel kecil dalam jumlah yang banyak;

Ternyata, dengan bantuan HTML5 Canvas, implementasi algorithmanya sangat mudah. kuncinya hanyalah bayangan.

Gambar di atas adalah contoh efek grain dengan menggambar titik-titik secara acak, dengan ukuran 3x3 pixel, dan dengan blur bernilai 2.

Berikut kode HTML5 Canvas untuk menggenerate gambar di atas:

<html> 
<head> 
<title>Simple Grain Generator</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#00c853"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
function Menggambar() 
{ 
 ctx.fillStyle = "#00c853"; 
 ctx.beginPath(); 
 ctx.shadowColor="black"; 
 ctx.shadowBlur =2; 
 ctx.shadowOffsetX=0; 
 ctx.shadowOffsetY=0; 
 x=canvas.width*Math.random(); 
 y=canvas.height*Math.random(); 
 for(i=0;i<20;i++){ 
  var a=20; 
  ctx.fillRect(x-a+2*a*Math.random(),y-a+2*a*Math.random(),3,3); 
 } 
 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