jsスケッチ 水面

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

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

今回のルール

次の状態を決めるルール

• セル自身は　前の状態、今の状態、次の状態を持っている。
• 次の状態　= 自分の周りの８個の前の状態の平均 + 今の状態 - 前の状態とする
• もし周りの平均が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;
}

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