Idea to Code

アイデアをコードへ
独学でプログラミング関係にいろいろ手を出すサイト

hawk

JavaScript

ランダムイベントジェネレータ2017/07/01

未来を検知するといわれるランダムイベントジェネレータを作ってみた。


1秒毎に0または1のどちらかを生成し、
0の場合グラフ(赤線)を-1(下へ)、1の場合グラフを+1(上へ)進める。
通常ほぼ横ばいにグラフは推移するが、
世界に何かが起こるときにグラフが大きく傾くことがあるらしい。


グラフ位置 =

0の個数 =

1の個数 =

乱数履歴 ->

reg.js 
const H = 500;

var d = 0;
var result = document.getElementById("result");
var log = document.getElementById("log");
var cnt = 1;
var cnt0 = document.getElementById("cnt0");
var cnt1 = document.getElementById("cnt1");
var c0, c1;
var point = [];

point[0] = 0;
c0 = c1 = 0;


var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");

drawLine();

setInterval(function(){
  canvas.setAttribute("width", cnt);
  drawLine();
  var r = 2 * (Math.floor(Math.random()*2)) - 1;
  if(r == 1){
    c1++;
    cnt1.innerHTML = c1;
  }else {
    c0++;
    cnt0.innerHTML = c0;
  }
  d = d + r;
  point[++cnt] = d;
  result.innerHTML = d;
  log.innerHTML = (r==1?1:0) + log.innerHTML;
  drawGrapha();
  cnt += 1;
}, 1000);

function drawLine(){
  ctx.beginPath();
  ctx.strokeStyle = 'rgb(0, 0, 0)';
  ctx.strokeRect(0, 0, cnt, H);

  ctx.beginPath();
  ctx.moveTo(0, H/2);
  ctx.lineTo(cnt, H/2);
  ctx.stroke();
}

function drawGrapha(){
  ctx.beginPath();
  ctx.moveTo(0, H/2);
  ctx.strokeStyle = 'rgb(192, 80, 77)';
  for(var i=0; i<point.length;i++)
    ctx.lineTo(i, -1*point[i]+(H/2));
  ctx.stroke();
}