통과 경로를 시각화하는 기계 학습적인 것 on Canvas

14060 단어 HTML5자바스크립트캔버스기계 학습


동기



돌아 오는 길, pasmo를 사용하고 있다고 생각한 것. "카드와 지폐를 동시에 넣으면 대체로 충전하기 때문에 충전 화면으로 천이해 주었으면 한다"고. 그래서 이런 경로에서 갈 확률이 색조가 되어 보이는 캔버스를 만들어 보려고 했습니다. 기계 학습의 연습적인 의미도 있다. 이번에는 원시 Canvas를 사용했습니다.

이동하는 방법



키보드의 오른쪽 왼쪽을 누르면 움직입니다.
통과한 경로를 학습하여 농도를 기억해 갑니다.
진도가 100이 된 곳만 기록해 두면, 뭔가를 할 수 있는 느낌.
이것만으로는 추상적입니다. .

의미



자주 통과하는 경로를 학습해 나가는 방향성입니다.
기계 학습은 아직 전혀 모르기 때문에 가류입니다. JS로 뭔가 할 수 없는지 알고 싶네요.

코드 변경



때리기 때문에, 이상하다고 할지 혼잡하네요··

전체 이미지



먼저 피라미드 모양을 그립니다. pyramiding과 makeAnalizer는 함수가 쌍을 이루고 있지만 pyramiding은 중첩 루프입니다. makeAnalizer도 같은 중첩으로 루프하고 있습니다만, 이 녀석은 피라미드 탐색용의 녀석.
someProcess는 일단 클래스로, 이 그림이라면 하나의 원입니다. 응용편에서는 하나의 프로세스를 가리키게 될 것입니다, 예를 들어 Suica와 지폐를 동시에 넣었을 때, 라든지.

코드



jsdoit : htp : // js. t/hp0__e CT

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>
three.js의 CanvasRenderer가 일부 Windows에서 잘 작동하지 않는 문제와 대응
Heroku에서 node-canvas 사용하기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage