感染シミュレーションの3

昨日の続き。

いきなりだが完成品の感染シミュレーション。 Chrome, FireFox, Safari, Edge のそこそこ新しいバージョンなら動くはず。入力欄はいずれも正の整数のみで最大2桁。入力チェックとか何もしていないので、無茶な値を入れないように。

全人数感染者感染率

シミュレーションとしてはかなり雑だが、感染拡大における密の恐ろしさは、眺めているとよく判る。 10人に1人で始めると、全員か感染するまでかなり時間がかかるのが、90人に1人で始めると、ほんの数秒で真っ赤だからね。

以下、ソースと若干の説明。

まずはHTMLのcanvasとコントローラー。


<canvas id="field" width="600" height="400"></canvas>
<div class="ctrl">
  <label>
    全人数
    <input type="number" min="1" max="99" id="numAll" value="10" />        
  </label>
  <label>
    感染者
    <input type="number" min="1" max="99" id="numBad" value="1" />
  </label>
  <label>
    感染率
    <input type="number" min="1" max="99" id="numRto" value="10" />
  </label>
  <input type="button" id="btnBgn" value="開始" />
  <input type="button" id="btnEnd" value="終了" disabled="true" />
</div>

そしてJavaScript。


class Vct {
  constructor( x, y ) {
    this.x = x;
    this.y = y;
  }

  add( vct ) {
    this.x += vct.x;
    this.y += vct.y;
  }
}

class Rct {
  constructor( pt, sz ) {
    this.pt = pt;  // ::Vct
    this.sz = sz;  // ::Vct
  }
  get xl() { return this.pt.x }              // X Left
  get yt() { return this.pt.y }              // Y Top
  get xr() { return this.pt.x + this.sz.x }  // X Right
  get yb() { return this.pt.y + this.sz.y }  // Y Bottom

  isXOverflow( rct ) {  // rctが左右方向で自分からはみ出しているか
    return ( rct.xl < this.xl || this.xr < rct.xr );
  }
  isYOverflow( rct ) {  // rctが上下方向で自分からはみ出しているか
    return ( rct.yt < this.yt || this.yb < rct.yb );
  }
  isOverlap( rct ) {    // rctが自分と重なっているか
    return !( this.xr < rct.xl || rct.xr < this.xl ) && !( this.yb < rct.yt || rct.yb < this.yt )
  }
}

class Sprite extends Rct {
  constructor( pt, r, v, s ) {
    super( pt, new Vct( r * 2, r * 2 ) );
    this.r = r;
    this.v = v;
    this.s = s;
  }

  move() {
    this.pt.add( this.v );
    return this;
  }
  refrect( rct ) {
    if ( rct.isXOverflow( this ) ) this.v.x *= -1;
    if ( rct.isYOverflow( this ) ) this.v.y *= -1;
    return this;
  }
  overlap( ary, rto ) {
    const rtoTrue = ( Math.random() * 100 < rto );
    this.s = ary.some( sp => this.s || this.isOverlap( sp ) && sp.s && rtoTrue );
    return this;
  }
  update( ctx ) {
    ctx.beginPath();
    ctx.fillStyle = this.s ? "red" : "blue";
    ctx.arc( this.pt.x + this.r, this.pt.y + this.r, this.r, 0, Math.PI * 2, true );
    ctx.fill();
    ctx.closePath();
  }
}

class Field extends Rct {
  constructor( cvs ) {
    super( new Vct( 0, 0), new Vct( cvs.width, cvs.height ) );
    this.ctx = cvs.getContext( "2d" );
  }
  spawn( allCnt, badCnt ) {
    const r = 8;
    this.sps = Array( allCnt ).fill().map( ( itm, idx ) => new Sprite(
      new Vct(
        Math.floor( Math.random() * ( this.xr - this.xl - r * 2 ) ),
        Math.floor( Math.random() * ( this.yb - this.yt - r * 2 ) ),
      ),
      r,
      new Vct(
        Math.floor( Math.random() * r - r / 2 ),
        Math.floor( Math.random() * r - r / 2 ),
      ),
      badCnt > idx,
    ) );
  }
  start( rto ) {
    this.rto = rto;
    this.tid = requestAnimationFrame( this.update.bind( this ) );
  }
  stop() {
    cancelAnimationFrame( this.tid );
  }
  update() {
    this.ctx.clearRect( this.xl, this.yt, this.xr, this.yb );
    this.sps.map( sp => sp.move() )
            .map( sp => sp.refrect( this ) )
            .map( ( sp, idx, ary ) => sp.overlap( ary, this.rto ) )
            .forEach( sp => sp.update( this.ctx ) );
    this.tid = requestAnimationFrame( this.update.bind( this ) );
  }
}

window.onload = function() {
  const qs = ( slctr ) => document.querySelector( slctr );
  const qi = ( slctr ) => parseInt( qs( slctr ).value );

  const btnBgn = qs( "#btnBgn" );
  const btnEnd = qs( "#btnEnd" );
  const fld = new Field( qs( "#field") );

  btnBgn.addEventListener( "click", () => {
    fld.spawn( qi( "#numAll" ), qi( "#numBad" ) );
    fld.start( qi( "#numRto" ) );
    btnBgn.disabled = true;
    btnEnd.disabled = false;
  }, false );
  
  btnEnd.addEventListener( "click", () => {
    fld.stop();
    btnBgn.disabled = false;
    btnEnd.disabled = true;
  }, false );
};

HTMLの方は、特に言うことは無い。

JavaScriptは、VctとRctは昨日のまま。新たにRctを継承した Sprite と Field を追加している。あとは、ボタンにイベントリスナーを設定する初期処理。

Sprite は丸のクラス。移動（move）と、壁での反射（refrect）と、重なり判定（overlap）と、自分の描画（update）のメソッドを持つ。重なり判定のメソッド名が overlap でいいのかという疑問はあるが、気にしない。

Field は丸が動ける領域のクラス。丸の生成（spawn）と、シミュレーション開始（start）と終了（stop）と、描画更新（update）のメソッドを持つ。 spawn で生成した丸の管理もこいつがやる。

余談だけど、わらわら生み出すのが spawn なんだね。メソッドの名前をどうしようかとちょっと悩んで、 make とか create とか produce とか、その手の単語を久しぶりに辞書で調べた。結局「カエルの卵のように大量に」なんて説明されていた spawn に決めたのだが、この単語を使うのは、俺の人生で今日が初めてかも。

その Field.spawn だが、まず人数分の要素を持つ配列を作り、これを一旦 undefined で埋めて、それから map で Sprite の配列に変換している。 fill しなくてもいけそうなものだが、何故かやらないとうまくいかない。

生成する Sprite の位置と速度は乱数で決めている。当然だが、初期位置は領域をはみ出さないように。速度は、あまり速いと壁際の挙動が不自然になるので、半径の値を上限にしている。

描画更新の Field.update がやってるのは、以下の通り。

一旦canvasをクリアする。
配列として保持している丸のそれぞれを動かす。
動かした結果で、壁で反射するものがあれば反射させる。
反射した結果で重なり合いを判定し、感染した丸と重なっていた場合は感染率に応じて色を変える。
ここまでの結果を描画する。
次の周期用に requestAnimationFrame に update を登録する。

requestAnimationFrame を使うときによくやるフレームレート対策は、今回は無し。 120fpsのディスプレイだと倍速で表示されてしまうが、倍速だから見えないってこともないだろう。若干、味気なくなるかもしれないが。自宅にそんなディスプレイがないので、少なくとも俺は困らない。

シミュレーションとは全然関係無いけど、シミュレーションしてて気付いたことがある。

俺は、最後に残った青を、なんか祈るような気持ちで見てるんだよな。なんとか無事に逃げてくれと。まあ、願いは叶わず、すぐに赤くなってしまうのだが。