p5.jsで6角形セルのライフゲームを作ってみた


2017年10月31日
With
p5.jsで6角形セルのライフゲームを作ってみた はコメントを受け付けていません

ジェネラティブ・アート」で紹介されている「ライフゲーム」のプログラム(Processing用)は、セル・オートマトン(CA)のフレームワークとして大変よくできていて、前のエントリで紹介した3つの派生形は、いずれも世代更新のルールやセルのプロパティなどをちょっとずつ変えて実現しています。

これらをp5.js用に書き直していたら、なんとなく自分でも、ルールをカスタマイズした「ライフゲーム」が作りたくなってきたんですね。それで、

・セルが正6角形だとカッコ良さそう
・「生死状態」以外に、セルになんかプロパティを持たせたい

といった方針をボンヤリと思い浮かべながら作ってみたのが、こちらになります。

●[DEMO] Hexagonal Game of Life(クリックすると別タブが開きます)

初期状態で各セルが「生」状態になる確率は約17%。ルールとしては、いろいろ試して、

・セルが「生」のとき、隣接セルの「生」の数が1~3個であれば、次世代でも「生」。0個もしくは4~6個のときは「死」となる
・セルが「死」のとき、隣接セルの3個が「生」ならば、次世代で「生」になる

としてみました。

あと、セルの属性として「年齢」を加えており、そのセルが「生」である状態が長ければ長いほど「高齢」になるようにしました。一度「死」状態になって、再度「生」になった場合は再び1からカウントします。

画面上では、若いセルほど高い「彩度」で表示され、高齢になるほど(50フレーム以降くらいから)徐々に彩度が下がるようにしています。つまり「生」で収束状態になったセルは徐々に彩度が落ち、常に生死が変化している(活性状態の)セルは高彩度で表示されることになります。

ぜひ何度か実際に動かしてみてほしいのですが、初期状態に応じて、だいたい10回に4回くらいはすぐに収束してしまい、5回は徐々に「活性化」している範囲が広がって画面全体を覆い尽くします。

残りの1回は、画面の一部が活性化している状態が比較的長く続き、最終的に収束するか、全画面に広がるか、しばらく見てみないと分からないような感じになります。さらに、画面全体が活性化して「これは収束しないなー」と思いながらトイレに行って帰ってくると、いつの間にか収束してしまっているようなケースも見受けられるなど、複雑系の醍醐味が味わえる、結構いいルールだと思います(自画自賛)。

プログラムの変更点ですが、セルが「6角形」になることで「隣接セルの取得方法」と「セルの表示位置」を場合分けしなければならないのが、ちょっと手間でした。今回採用した、左右に頂点がくる6角形の場合、奇数列と偶数列で、セルの左右に2つずつ隣接するセルのうち1つが上の行なのか、下の行なのかが変わります(もう1つは自行)。

あと、各セルの表示位置も偶数列と奇数列で分けて計算しなければなりません。…なんか、当初、頭の中で計算して出した調整量ではうまくいかず、最終的に表示見ながら目分量で調整してしまったのですが、とりあえずイイ感じになったので、このくらいにしときます。

6角形セルのライフゲーム作り、結構良い頭の体操になりました。

(いろんな意味で乱暴な)おまけ

ここ数回にわたっていじってきた2次元のCAフレームワーク。「あるセルの状態が、隣接セルの状態で変化していく」という現象を記述したい場合にとても使い勝手が良いです。で、例えば「現世代で自分の隣にあるセルの状態を、次世代でそのまま引き継ぐ」ようなルールを作ってやると、いわゆる「電光掲示板」みたいな出力になります。

新幹線の連結部に行くドアの上のほうにありそうなアレとか、

●[DEMO] 新幹線のアレっぽいやつ(クリックすると別タブが開きます)

懐かしいゲームっぽいのとか、

●[DEMO] 懐かしいゲームっぽいの(クリックすると別タブが開きます)

…思いつきで急いで作ったので、引用も実装も乱暴極まりないのですが(笑)、これらもライフゲームとほぼ同じコードで動いています。いやー、CAって面白いっすね。