読者です 読者をやめる 読者になる 読者になる

kkana's blog

新米コーダーの忘れそうなことメモ

jsスケッチ 水面

jsスケッチ

See the Pen 水面 by kanaparty (@kanaparty) on CodePen.

ライフゲームのルールを少し変えると水面みたいになる!

今回のルール

次の状態を決めるルール

  • セル自身は 前の状態、今の状態、次の状態を持っている。
  • 次の状態 = 自分の周りの8個の前の状態の平均 + 今の状態 - 前の状態とする
  • もし周りの平均が255か0になっていたらその逆にする(波が収まった地点でまた波が起こるようにする)

表現のルール

  • 状態は0~255、その状態をセルの青色に適用する
//周りのセルの状態を見る
updateState() {
  var sum = 0;
  for (var i = 0; i < 8; i++) {
    sum += this.neighbours[i].state;
  }
  //周りの平均値を出す
  var average = Math.floor(sum / 8);

  if (average == 255) {
    this.nextState = 0;
  } else if (average == 0) {
    this.nextState = 255;
  } else {
    this.nextState = this.state + average - this.lastState;
    if (this.nextState > 255) {
      this.nextState = 255;
    } else if (this.nextState < 0) {
      this.nextState = 0;
    }
  }
  this.lastState = this.state;
}

その他少し悩んだこと
セルの状態をアップデートするタイミングは、セル全員が次のセルの状態が決まってから、描くときまでにしなければならない