ライフゲーム作った

f:id:Cormorant:20180617132349p:plain

ホームページのコンテンツが思いつかなかったのでライフゲーム作りました。

サイトのコンテンツがない

先月、https://u.chimata.org/ をVuePress化したのだけど、そのときは単純に今までのサイト構成を再現するにとどめていて、これといったコンテンツがなくて寂しいホームページになっていた。寂しいホームページは10年近く続いてたんだけど。

そうだ、ポートフォリオサイトにしよう

「せっかくVuePressで簡単に静的サイトを更新できるようになったんだから、ちょっとした文章とサーバーサイドの処理が不要なコードが出てくるものを作ろう」と思い、じゃあデザイナーとかフロントエンドエンジニアがやってるポートフォリオサイトにしようということに。エンジニアもすなるポートフォリオサイトというものを端くれとしてかいてみんとてするなり。

物足りないので動きがほしい

とりあえず第1段として、自己紹介と自分の連絡先になるSNSサイトへのリンク、そしてエンジニアっぽくよく使う技術をリストにしてみたらあっというまにできてしまった。Markdownを書くだけでウェブサイトになるので静的サイトジェネレータはほんといい。でもこれだけだと面白みがないし、なによりエンジニアーって感じがしないので、トップになんかワチャーっと動くものがほしくなりました。そしたらじゃあ作ったことないけどライフゲームやってみるか、となった。

ライフゲームについて

ライフゲームの仕様を大雑把に書くと、格子状のセルを用意して、それぞれのセルに生存/死亡の状態を持たせ、初期値としてどちらかを与えた上で、

  1. 生存しているセルに対して
    1. 周囲8マスのうち、生存しているセルが2つまたは3つある場合は次世代でも生き残る
    2. それ以外の場合は死亡する
  2. 死亡しているセルに対して
    1. 周囲8マスのうち、生存しているセルが3つある場合は新たに生存したセルが誕生する(セルを生存状態にする)

というルールで世代交代をひたすら繰り返していくというものです。そうすると上記のようなセルがうねうねする画像が手に入ります。

そんな感じで初めてライフゲームを作ってみたんだけど、思いの外あっさりできてしまった。ライフゲーム、見た目は複雑っぽく見えるので、昔はもっと難しいプログラムだと思ってたんだけど、やってみると大したことない。上の仕様を実装するのはそれほど難しくなくて、それをどう絵にするかが悩みどころだなと思いました。JavaScript+HTMLならCanvasがあるのでググりながらで簡単に行けると思います。

以上です

あまりにも手が動かないためどこかに晒しながらやるかと思い、年始頃VTuberを目指して準備した配信環境を使ってニコ生で作業配信して作りました。抱きまくら(嫁)のブログ見ましたとか言われて恥ずかしかった。