Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

eeeer.gif

動機

帰り道、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>

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした