Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
13
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@hp0me

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

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
13
Help us understand the problem. What are the problem?