--- title: "Making-of: すべてがFになる ED" description: ジェネラティブアートで作るアニメエンディング date: 2016-11-28T00:00:00.000Z updated: 2026-01-08T14:50:38.246Z tags: - making-of url: https://baku89.com/ja/making-of/ffff --- # Making-of: すべてがFになる ED ![](https://wp.baku89.com/wp-content/uploads/2015/10/0xffff_ed_0001.jpg) 2015 年秋季ノイタミナ『[すべてが F になる THE PERFECT INSIDER](http://www.f-noitamina.com/)』ED 映像のディレクション・制作をしました。作中に登場する天才プログラマー、真賀田四季にちなんで、[ジェネラティブ・アート](https://ja.wikipedia.org/wiki/%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%83%86%E3%82%A3%E3%83%96%E3%82%A2%E3%83%BC%E3%83%88)と呼ばれる手法を用いてつくっています。 GitHub にとりあえずアップしてますが、とてもじゃないですが汚いコードです。僕の作業フォルダのフルパスなんかも入ってしまっています。 [baku89/Subete-ga-F-ni-naru](https://github.com/baku89/Subete-ga-F-ni-naru-ED) 何処かの誰かのために、どんなふうに作ったかメモしておきます。 ## 概要 ジェネラティブ・アートとは、プログラミングを用いてグラフィックや音楽、立体物などを生成する芸術の一ジャンルです。その中でも今回は、コンピュータ・サイエンスや複雑系の分野で早くから研究されていた**[セル・オートマトン](https://ja.wikipedia.org/wiki/%E3%82%BB%E3%83%AB%E3%83%BB%E3%82%AA%E3%83%BC%E3%83%88%E3%83%9E%E3%83%88%E3%83%B3)(CA)**と呼ばれるモデルを用いています。 最も知られているのが,、プログラミングの入門サンプルとしても引用される**ライフ・ゲーム(Conway's Game of Life)**です。今映像ではライフ・ゲームそれ自身や、それを一般化した CA に加え、僕のオリジナルの CA などを用いています。 また, 作中における現在の時間軸は 2015 年に設定されていますが、ある人物の回想中や原作における時代設定を汲み、90 年代後半の UNIX 系 OS あたりからモチーフを引用しています。僕は世代的に通っていないものが多いので、そのあたり自分なりに取材や下調べをしました。 ツッコミ所も多々あると思いますが、原作ファンや工学系の方にニヤリとしてもらえたら幸いです。 ## ツールとワークフロー 使ったツールです： - [Golly](http://golly.sourceforge.net/) - CA のシミュレータ. サンプルが豊富で、Python や Perl でスクリプトが書けます。ライフ・ゲーム関連で主に使用 - Visions of Chaos - CA に限らず, 複雑系やカオス関連のシミュレータ。建物の配列を生成 - Processing - After Effects - Cinema4D Golly は色々スクリプトを仕込んで使いました。[このへん](https://github.com/baku89/Subete-ga-F-ni-naru-ED/tree/master/golly)。 Visions of Chaos については、画像エクスポートが上手く行かなかったので、Mac 上の VMWare Fusion でシミュレーションしたものを泥臭くスクリーンショットしました。 ### 映像ソフト - After Effects - 生成した素材のコンポジット - Cinema4D - カメラワークや 3D 的表現の制作 ## Life-like Cellular Automaton [ライフ・ゲームの概念を一般化した CA](https://en.wikipedia.org/wiki/Life-like_cellular_automaton)です。生きた隣接セル数が「何個のときに生存(**S**urvive)し / 何個のときに誕生(**B**irth)する」かを任意に設定できるようにしたものです。例えば、ライフゲームのルールは `S23/B3`のように表記します。 [著名なルール一覧](http://www.mirekw.com/ca/rullex_life.html)を参考に、一部アレンジしたりして使いました。 ### Conway's Game of Life (S23/B3) ![](https://wp.baku89.com/wp-content/uploads/2015/10/conway-game-of-life.gif) 主に冒頭とサビで使用。ライフゲーム自体を電子回路のように組み合わせ、ライフゲームを作るという [OTCA metapixel](https://www.youtube.com/watch?v=hsXCKPt8u3I)も登場させています。 - Golly: HashLife/_, Life/_ ### Generation Rule (S23/B23) ![](https://wp.baku89.com/wp-content/uploads/2015/10/generation-rule.gif) オブジェクトが生成される部分で用いたオリジナルルール。ライフゲームほどカオス性を示さず単純に面積が増えていくだけなので、至る箇所で使っています。また新たに**寿命**と**最大誕生回数**を加え、トランジションエフェクトとして使いやすいようにしました。**寿命**を超えて生存し続けるか、誕生/死のサイクルを**最大誕生回数**繰り返したセルは自動的に死に、以後トランジション後の状態に固定されます。 ### Spiral Growth (S15678/B34568) ![](https://wp.baku89.com/wp-content/uploads/2015/10/spiral-growth.gif) 生成ルール同様, UI の生成に使用しています。ライフゲームとは少し違った、チェーンソーのような形状が面白かったので、部分的に使用しています。 - Golly: Life-Like/spiral-growth.rle ### Mazectric (S1234/B3) ![](https://wp.baku89.com/wp-content/uploads/2015/10/mazectric.gif) 迷路や摩天楼のような構造物の生成に使いました。 ### 塗りつぶしルール (B12345678/S12345678) 単調に生存セルの範囲が 1 世代につき 1 セル幅分広がるだけです。冒頭の QR コードや, ラストのニューロンのような樹状構造が広がるエフェクトに使用しています。 ## その他の CA その他にも、ルールは複雑になってしまうので割愛しますが、いくつかの CA を利用しています。 ### Diffusion Limited Aggregation (DLA) ![](https://wp.baku89.com/wp-content/uploads/2015/10/dla.gif) ラストのニューロンらしきものに使いました。無数のつぶつぶがランダムに動き回っていて、『枝』の先にひっついたら固定されます。各世代をそのまま書き出すと成長に相当時間がかかるので、樹状構造がある程度成長した段階のものに、先述した**塗りつぶしルール**などを適用しアニメーションさせています。 - Golly: Margolus/DLA.rle ### Cubist ![](https://wp.baku89.com/wp-content/uploads/2015/10/cubism.gif)\ 途中のウィンドウ群の摩天楼らしきものの構造の生成につかいました。とはいえ、ここで生成されたパターンを元に、Photoshop で輪郭をクリーンアップした上で **UI 化(後述)**を適用したり、手作業で UI を配置するなどしているので、一から十までジェネラティブな手法とは言えません。 - Visions of Chaos: `2D Cellular Automata/` preset: cubist ## Motif, CDE, Common Lisp, Emacs... あまり説明するのは野暮ですが、四季の開発環境の設定を自分なりに考えています。作中には RedMagic と UNIX は区別されてますが、RedMagic も恐らく“RedHat”から名前が取られていると思われるので、\*nix 系だと仮定して設定を作りました。Reddit で色々分析されてますね。色々おかしい所ツッコまれてますが...。 [\[Spoilers\] Subete ga F ni Naru: The Perfect Insider - Episode 1 Discussion](https://www.reddit.com/r/anime/comments/3o00gl/spoilers_subete_ga_f_ni_naru_the_perfect_insider/cvsrhyf) ブートメッセージは Debian をベースに、途中登場する Common Lisp は[rosettacode.org](http://rosettacode.org/wiki/Conway's_Game_of_Life#Common_Lisp)のものを、セルの初期状態を外部ファイルから読み込めるように改変したものを使っています。 ## CA のアニメーション CA のシミュレーション結果が単純にドット絵のように表示されるだけではなく、セル自身がモーフィングしたり、セル自体が小さな UI のパーツの集合体として描かれるようなスケッチも書いています。 ### セルのモーフィング ![](https://wp.baku89.com/wp-content/uploads/2015/10/lg-anim.gif) もにょもにょ動かします。冒頭 QR コードのアニメーションや、ラストのニューロン、四季らしきものが形づくられていくカットの他、[PV](https://www.youtube.com/watch?v=zLkQxlMZaJM\&t=6s)にも使用して頂きました。 ### UI 化 ![](https://wp.baku89.com/wp-content/uploads/2015/10/city_center.jpg) UI のパーツの集合体に変換する Processing のスケッチです。本編の至る箇所で使用しています。 ### 四季のシルエット ![](https://wp.baku89.com/wp-content/uploads/2015/10/shiki_cond.jpg) ラストの細かいウィンドウ群で構成された四季らしき構造物は、Life-like CA や UI 化を複合的に組み合わせてつくりました。まず線画素材を 4 種類の解像度の計 24 つのレイヤーにバラします。上図は解像度毎に色分けしたものです。目のあたりの解像感を高くしているのが分かるかと思います。 **寿命**と**最大誕生回数**を短めに設定した`B23/23`をベースに、毎フレームごとに線画を生きたセルとして上書きしながらシミュレーション。その後、モーフィング・UI 化を施してます。 ## Plugins 追加購入した AE プラグインです。 - [Pixel Blender Accelerator](http://aescripts.com/pixel-bender-accelerator/): CS6 以降で Pixel Blender エフェクトを使用するため - [GPU Resize](http://aescripts.com/gpuresize/): AE 標準の_トランスフォーム_エフェクトのピクセル補間法にニアレストネイバーが使えるやつ - [Dither](http://jtnimoy.com/products/dither-plugin-for-adobe-after-effects): Ps の"Web 保存"で設定できるような, 細かいディザ指定ができる Pixel Blender Accelerator が必要になったのは、イントロ後のデスクトップのシーンで[ウィンドウをリサイズするためのエフェクト](https://github.com/baku89/Subete-ga-F-ni-naru-ED/blob/master/others/ResizeBorderTrim.pbk)を自作したからです。 ## Tips Processing のスケッチをコマンドラインから起動するシェルスクリプトを書きました。スケッチ側で引数を受け取る事も出来ます。四季の 24 レイヤーのライフゲームはこれで自動化。 - [run p5 sketch from command line](https://github.com/baku89/Subete-ga-F-ni-naru-ED/blob/master/others/p5.sh) ## References 最初からリファレンスとして参考にしていたものも、見返してみてあれの影響だなと気付いたものも混ぜこぜです。 - [Stoned Boys «Strain»](https://vimeo.com/54004784) - [Sablo](https://vimeo.com/94828687) - [安堂ロイド オープニング・タイトル](http://daiheishibata.jp/lloyd/) - [Hooray for Earth “True Loves”](https://vimeo.com/24064252) - [FITC Tokyo 2015](https://vimeo.com/118919656) - [四畳半神話体系 ED](https://www.youtube.com/watch?v=P8uVeSuYjfs) - [フラクタル OP](https://www.youtube.com/watch?v=MMoRrvAeCjA) - [“C” ED](http://www.dailymotion.com/video/xipput_anime-c-ed_creation) ## Conclusion その他にもランダムウォークで線を描いたり、黄金角を使って配列するなど、ジェネ的なアプローチで作っている部分は多々あります。 プログラミング自体は小学生の頃から触れていますが、工学部出身でも無いただのワナビだと自認しています。その道のプロの方に比べても稚拙な手法しか用いていないですし、ツッコミどころは多々あるはずです。そのあたり、もっと勉強していきたいので、色々アドバイスいただけると嬉しいです。