通った経路を可視化する機械学習的なもの on Canvas #JavaScript

動機

帰り道、pasmoを使っていて思ったこと。「カードとお札を同時に入れたら大体チャージするんだからチャージ画面に遷移してほしい」と。んで、こういう経路から行く確率が色合いになって見えるcanvasを作ってみようと思いました。機械学習の練習的な意味もありつつ。今回は生のCanvasを使いました。

動かし方

キーボードの右左を押すと動きます。
通った経路を学習して濃度を記憶していきます。
濃さが100になったところのみ記録しておけば、何かができる感じ。
これだけじゃ、抽象的ですが。。

意味

よく通る経路を学習していこうっていう方向性です。
機械学習はまだ全然分からないので我流です。JSで何かできないか知りたいですね。

コードが変

殴り書きなので、変というか雑ですね・・

全体のイメージ

まずピラミッド状を描きます。pyramidingとmakeAnalizerって関数が対になってるのですが、pyramidingは入れ子でループしてます。makeAnalizerも同じく入れ子でループしてますが、こいつはピラミッド探索用のやつ。
someProcessは一応クラスで、この図だとひとつの円です。応用編ではひとつのプロセスを指すようになるはずです、たとえばSuicaとお札を同時に入れた時、とか。

コード

jsdoit : http://jsdo.it/hp0me_/eiCT

practice.html


<script>

var canvas;
var ctx;
var pyramid = [];
var analyzer = [];
var cnt = 0;
var cntForAnalyzer = 0;
var currentPos = [];

function setup(){
  canvas = document.getElementById('MyCanvas');
  if ( ! canvas || ! canvas.getContext ) { return false; }
  ctx = canvas.getContext('2d');

  makeAnalizer(10);

  //x,y,加点グラデーション
  process(1,0,10);

}


function process(x,y,graduation){

  ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );

  currentPos = [x,y];
  if(currentPos[0] > 8){
    currentPos = [1,0];
    analyzer[1][0]+=10;
  }

  //analyzer = [];
  //pyramid = [];
  analyzer[x][y] += graduation;
  cnt=0;
  pyramiding(10);
}


var pyramiding = function(max){

  if(cnt==10)return;
  pyramid[cnt] = [];

  for(var i =0;i<cnt;i++){
    var graduation;

    graduation = analyzer[cnt][i];
    if(graduation<1)graduation = 1;

    pyramid[cnt][i] = new someProcess(i * 30 + 180 -cnt*14,cnt * 30,graduation);
  }

  cnt++;
  pyramiding(cnt);

};



var makeAnalizer = function(max){

  if(cntForAnalyzer==10)return;

  analyzer[cntForAnalyzer] = [];

  for(var i =0;i<cntForAnalyzer;i++){
    analyzer[cntForAnalyzer][i] = 0;
  }

  cntForAnalyzer++;
  makeAnalizer(cntForAnalyzer);

}


var someProcess = function(x,y,graduation){

  if(graduation > 100)graduation=100;
  this.graduation = graduation;

  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI*2, false);
  ctx.globalAlpha = this.graduation / 100;
  ctx.fill();
}


document.onkeydown = function (e){

  //右
  if(e.which == 39){
    //x,y,加点グラデーション
    process(currentPos[0]+1,currentPos[1]+1,5);
  }

  //左
  else if(e.which == 37){
    //x,y,加点グラデーション
    process(currentPos[0]+1,currentPos[1],5);
  }
};


</script><html><head><meta charset="utf-8"><style type="text/css">canvas { background:#fff;}</style></head><body onload="setup();"><p id="info"></p><canvas id="MyCanvas" width="500" height="500"></canvas></body></html>