kmkのメモ帳

気が向いたときにLinuxだったり、プログラミングだったり、適当なメモを書いてます。

Blogは移転しました。

自動的にリダイレクトします。

HTML5 canvas + javascript でランダムウォークを描画

シミュレーションプログラミングテクノロジー

HTML5ではcanvasという機能が追加され、javascript+canvasで簡単にアニメーションを作成できるようになったそうなので試してみました。下記はjavascript+canvasで、ランダムウォークを描画してみた例。

カラフルにしてみました。

ある程度お手軽なので、シミュレーションを可視化したいときの選択肢としてありなんじゃないでしょうか。

軌跡を残すようにしてますが、残したくない場合はctx.clearRect(0, 0, width, height);とか描画をクリアする記述を、drawファンクションの一番上辺りに記述して描画を一旦消してから新しく描画するようにすればOK。

ソース

<script type="text/javascript">

      //キャンパスの大きさ    
      var height = 600;
      var width = 600;
  
      //walkerの数
      var walker_num=20;
      
      //1回で進む距離
      var d=1;
  
      var ctx;
      var radian;
    
      //現在位置配列x,y
      var x = new Array(walker_num);
      var y = new Array(walker_num);
      
      //walker毎に色をランダムに決定するための配列
      var color_r = new Array(walker_num);
      var color_g = new Array(walker_num);
      var color_b = new Array(walker_num);
  
      for (var i=0;i<walker_num;i++){
        //初期位置をランダムに決定
        x[i] = height * Math.random();
        y[i] = width * Math.random();
        
        //walkerの色をランダムに決定
        color_r[i] = Math.floor(Math.random() * 256);
        color_g[i] = Math.floor(Math.random() * 256);
        color_b[i] = Math.floor(Math.random() * 256);
      }
  
      function init(){
        var canvas = document.getElementById('randomwalk');
        ctx = canvas.getContext('2d');
        
        ctx.strokeStyle = 'rgb(0,0,0)';
        ctx.strokeRect(0, 0, width, height);
        setInterval(draw, 10);
  
      }
  
      function draw(){
       
        for (var i=0;i<walker_num;i++){
          ctx.beginPath();
  
          //walkerの色をランダムに設定。rgbが数値だけ受け取り、変数を受け取ってくれないので多少メンドクサイ書き方になってる
          ctx.strokeStyle = 'rgb(' + (color_r[i]) + ',' + (color_g[i]) + ',' + (color_b[i]) + ')';

          //walker描画
          ctx.arc(x[i],y[i],0.005,0,Math.PI*2,false);
          ctx.stroke();
          
          //walkerが進む角度をランダムに計算
          radian = 2.0 * Math.PI * Math.random();

          //計算した角度にd距離分だけwalker座標移動
          x[i] = x[i] + d * Math.cos(radian);
          y[i] = y[i] + d * Math.sin(radian);
  
  
          //walker移動。周期的境界条件考慮
          if(width <= x[i]){
            x[i] = x[i] - width;
          }
          if(height <= y[i]){
            y[i] = y[i] - height;
          }
          if(x[i] <= 0){
            x[i] = x[i] + width;
          }
          if(y[i] <= 0){
            y[i] = y[i] + height;
          }
        }
      }
  
</script>
  
<body onload="init();">
   <canvas id="randomwalk" width="600" height="600"></canvas>
</body>

# # #