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:
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
Posting Komentar