Algorithma Coretan Abstrak dengan HTML5 Canvas


Coretan dengan gradasi sisi kiri dan sisi kanan, dapat dibuat dengan fungsi fillRect dengan lebar 1x1 pixel.

Algorithmanya adalah membentuk garis horizontal dengan tinggi juga 1 pixel saja, dengan lebar acak mulai 0 sampai 500 pixel, dengan semakin ke pinggir nilai alphanya semakin transparan.

Sedangkan untuk penggambarannya dibagi menjadi tiap seksi. Dimana tiap seksi menggambar 50 garis, dengan posisi dan rotasi tidak jauh dari posisi dan rotasi utama.

Setting ulang posisi dan rotasi utama dilakukan tiap seksi, sampai kurang lebih 100 kali.

Berikut ini adalah kode HTML5 Canvas yang mengimplementasikan algorithma di atas:

<html> 
<head> 
<title>Random Pixel</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.fillStyle = "black"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
var warna=["#DCF100","#86F1FF","#FF1D00","#FF00F4","blue"]; 
 
var num=0;a=0,jum=0,maxjum=100; 
var x,y,rot,a; 
function Menggambar() 
{ 
 var d=250*Math.random(); 
 var scale=1.0*jum/maxjum; 
 if(scale<0.25)scale=0.25; 
 d*=scale; 
 if(num%50==0){ 
  x=0.25*canvas.width+0.5*canvas.width*Math.random(); 
  y=0.25*canvas.height+0.5*canvas.height*Math.random(); 
  rot=(-180+360*Math.random())*Math.PI/180; 
  a=Math.floor(warna.length*Math.random()); 
  num=0; 
  jum++; 
 } 
 if(jum<maxjum){ 
  ctx.save(); 
  ctx.translate(x,y+(-10+30*Math.random())*scale); 
  ctx.rotate(rot+(-15+(30*Math.random())*Math.PI/180)); 
  ctx.beginPath(); 
  for(i=0;i<2*d;i++){ 
   ctx.fillStyle=warna[a]; 
   ctx.globalAlpha=(i<d)?(1.0-1.0*Math.abs(1.0*i-d)/d):(1.0-1.0*Math.abs(i-d)/d); 
   ctx.globalAlpha*=scale; 
   ctx.fillRect(i-d,0,1,1); 
  } 
  ctx.closePath(); 
  ctx.restore(); 
  num++; 
  window.requestAnimationFrame(Menggambar); 
 } 
} 
 
Menggambar(); 
</script> 
</body> 
</html> 

Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

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

Peringatan: Aksi Penipuan Skimming Melalui Aplikasi Android M-Pajak

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

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

Menyembunyikan Failed Load Images di Blogger

Kebodohan Karyawan Menyalahkan Sistem

Menambahkan Konfirmasi Email di Google Form

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

Kode Apps Script MailApp untuk Form Mengirimkan Email