Visualiasai Konsep Random Walk dengan HTML5 Canvas


Dalam perhitungan numerik dikenal dengan salah satu metode yang disebut Random Walk.

Konsep dasarnya sebenarnya sederhana, yaitu mencari nilai solusi berdasarkan nilai pendekatan yang paling benar, atau dengan kata lain pertimbangan nilai error terkecil.

Dalam tulisan ini, penulis tidak berusaha untuk memecahkan solusi apapun, namun hanya tertarik untuk membuat visualisasi bagaimana konsep Random Walk di jalankan.

Terutama, penulis ingin menunjukkan bagaimanakah membuat algorithma dalam bentuk Object Oriented Programming (OOP), menggunakan Javascript untuk HTML5 Canvas.

Gambar di atas adalah contoh tampilan imlementasi Random Walk dengan titik mewakili indvidu, dengan jumlah populasi maksimum 100 titik.

Tiap titik bergerak ke arah target yang diperbaharui secara kontinyu, dengan umur 500 langkah dan kemampuan meletakkan titik baru tiap 50 langkah.

Ketika titik mati, titik akan diabaikan untuk digambar, tetapi system tetap memanggil fungsi Menggambar();

Kode HTML5 Canvas algorithma di atas adapat dilihat sebagaimana berikut:

<html> 
<head> 
<title>Basic Random Walk</title> 
</head> 
<body> 
<canvas id="myCanvas" width="1024" height="768"> 
</canvas> 
<script> 
 
var canvas = document.getElementById("myCanvas"); 
var points=[],num=0; 
 
var ctx = canvas.getContext("2d"); 
ctx.fillStyle = "#0d47a1"; 
ctx.fillRect(0,0,canvas.width,canvas.height); 
 
class Individu 
{ 
    constructor(x,y,rot) 
 { 
        this.x=x; 
        this.y=y; 
  this.rot=rot-90+180*Math.random(); 
  this.targetx=x; 
  this.targety=y; 
  this.died=false; 
  this.num=500; 
    } 

 setTarget(x,y) 
 { 
  this.targetx=x; 
  this.targety=y; 
 } 

 move() 
 { 
  if(this.died)return; 
  if(this.targetx==this.x && this.targety==this.y){ 
   var jarak=1+50*Math.random(); 
   var angle=this.rot-45+90*Math.random(); 
   this.rot=angle; 
   var ax=this.x+1.0*jarak*Math.cos(1.0*angle*Math.PI/180); 
   var ay=this.y+1.0*jarak*Math.sin(1.0*angle*Math.PI/180); 
   this.setTarget(Math.floor(ax),Math.floor(ay)); 
  }else{ 
   var rx=this.targetx-this.x; 
   var ry=this.targety-this.y; 
   var r=1.0; 
   var angle=Math.atan2(ry,rx); 
   var ax=Math.round(this.x+r*Math.cos(angle)); 
   var ay=Math.round(this.y+r*Math.sin(angle)); 
   this.x=ax; 
   this.y=ay; 
   if(this.x<0 || this.x>canvas.width || this.y<0 || this.y>canvas.height){ 
    this.died=true; 
   } 
  } 
  if(this.num%50==1 && num<100){ 
   num++; 
   points[num]=new Individu(this.x,this.y,this.rot); 
  } 
  if(this.num>0)this.num--; 
  else this.died=true; 
 } 
} 
 
function Menggambar() 
{ 
 for(i=0;i<points.length;i++){ 
  points[i].move(); 
  if(!points[i].died){ 
   ctx.fillStyle = "#9dfc03"; 
   ctx.beginPath(); 
   ctx.shadowColor="black"; 
   ctx.shadowBlur = 15; 
   ctx.shadowOffsetX=5; 
   ctx.shadowOffsetY=5; 
   ctx.fillRect(points[i].x-1,points[i].y-1,3,3); 
  } 
 } 
 window.requestAnimationFrame(Menggambar); 
} 
 
points[num]=new Individu(0.5*canvas.width,0.5*canvas.height,-180+360*Math.random()); 
Menggambar(); 
</script> 
</body> 
</html> 

Penambahan efek bayangan (shadow), hanya bertujuan untuk mempercantik tampilan.

Pembaca dapat memodifikasi atau mengembangkan kode di atas sesuai kebutuhan.

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