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