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