1. hp0me

    Posted

    hp0me
Changes in title
+通った経路を可視化する機械学習的なもの on Canvas
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,137 @@
+![eeeer.gif](https://qiita-image-store.s3.amazonaws.com/0/57193/db161236-90a5-0290-4aaa-0c3310eb5172.gif)
+
+
+##動機
+帰り道、pasmoを使っていて思ったこと。「カードとお札を同時に入れたら大体チャージするんだからチャージ画面に遷移してほしい」と。んで、こういう経路から行く確率が色合いになって見えるcanvasを作ってみようと思いました。機械学習の練習的な意味もありつつ。今回は生のCanvasを使いました。
+
+
+##動かし方
+キーボードの右左を押すと動きます。
+通った経路を学習して濃度を記憶していきます。
+濃さが100になったところのみ記録しておけば、何かができる感じ。
+これだけじゃ、抽象的ですが。。
+
+##意味
+よく通る経路を学習していこうっていう方向性です。
+機械学習はまだ全然分からないので我流です。JSで何かできないか知りたいですね。
+
+##コードが変
+殴り書きなので、変というか雑ですね・・
+
+##全体のイメージ
+まずピラミッド状を描きます。pyramidingとmakeAnalizerって関数が対になってるのですが、pyramidingは入れ子でループしてます。makeAnalizerも同じく入れ子でループしてますが、こいつはピラミッド探索用のやつ。
+someProcessは一応クラスで、この図だとひとつの円です。応用編ではひとつのプロセスを指すようになるはずです、たとえばSuicaとお札を同時に入れた時、とか。
+
+##コード
+
+```html: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>
+
+```