Making-of: すべてがFになる ED

last_updated: 2016.Nov.28

2015年秋季ノイタミナ “すべてがFになる THE PERFECT INSIDER” のED映像のディレクション・制作をしました. 作中に登場する天才プログラマー, 真賀田四季にちなんで, ジェネラティブ・アートの手法を用いてつくっています.

GitHubにとりあえずアップしてますが, 本当にアップしただけという感じで, 超汚いです. 僕の作業フォルダのフルパスなんかも入ってしまってます.
baku89/Subete-ga-F-ni-naru

どんなふうに作ったか, ざっくりとメモっておきます.

概要

プログラミングなどの手法を用いて, アルゴリズミックに, 無作為的にグラフィックや音楽, 立体物などを生成する芸術の一ジャンルが”ジェネラティブ・アート”です. その中でも, コンピュータ・サイエンスや複雑系の分野で早くから研究されていたセル・オートマトン(CA)と呼ばれるモデルを用いています.

最も知られているのが, プログラミングの入門サンプルとしても引用されるライフ・ゲーム(Conway’s Game of Life)です. 今映像ではライフ・ゲームそれ自身や, それを一般化したCA, 僕のオリジナルのルールを加えたCAなどを用いています.

また, 作中における”現在”の時間軸は2015年に設定されていますが, ある人物の回想中や原作における時代設定を汲み, 90年代後半のUNIX系OSあたりからモチーフを(文字通り)引用しています. 僕は世代的に通っていないものが多いので, そのあたり自分なりに取材や下調べをしました. ツッコミ所も多々あると思いますが, 原作ファンや工学系の方にニヤリとしてもらえたら幸いです.

ツールとワークフロー

使ったツールです.

Golly – CAのシミュレータ. サンプルが豊富で, PythonやPerlでスクリプトが書ける. ライフ・ゲーム関連で主に使用.
Visions of Chaos – CAに限らず, 複雑系やカオス関連のシミュレータ. 建物の配列を生成.
Processing
After Effects
Cinema4D

Gollyは色々スクリプトを仕込んで使いました. このへん.

Visions of Chaosは, Mac上のVMWare Fusionでシミュレーションしたものを泥臭くスクリーンショットしました… (エクスポートがうまく行かなかったので)

映像ソフト

After Effects – 生成した素材のコンポジット
Cinema4D – カメラワークや3D的表現の制作

Life-like Cellular Automaton

ライフ・ゲームの概念を一般化したCAで, 生きた隣接セル数が「何個のときに生存(Survive)し / 何個のときに誕生(Birth)する」かを自由に設定できるようにしたものです. ライフゲームは S23/B3と表せます. 著名なルール一覧を参考に, アレンジしたりしています.

Conway’s Game of Life (S23/B3)

主に冒頭とサビで使用. ライフゲーム自体を電子回路のように組み合わせ, ライフゲームを作るという OTCA metapixelも登場させています. このあたりはGollyのLifeGameやHashLifeカテゴリのサンプルを使用.

Golly: HashLife/, Life/

Generation Rule (S23/B23)

オブジェクトが生成される部分で用いたオリジナルルール. ライフゲームと似た模様を創発しつつも, ライフゲームほどカオス性を示さず単純に面積が増えていくだけなので, 至る箇所で使っています. 新たに僕が考えたルールとして, 寿命と最大誕生回数を加え, トランジションエフェクトとして使いやすいようにしました. 寿命を超えて生存し続けるか, 誕生/死のサイクルを最大誕生回数繰り返したセルは自動的に死に, 以後オブジェクト(コマンドの文字, UI)の色に固定され続けます.

Spiral Growth (S15678/B34568)

生成ルール同様, UIの生成に使用しています. ライフゲームとは少し違った, チェーンソーのような形状が面白かったので, 部分的に使用しています.

Golly: Life-Like/spiral-growth.rle

Mazectric (S1234/B3)

途中出てきた, 迷路や摩天楼のような構造物の生成に使いました.

塗りつぶしルール (B12345678/S12345678)

単調に, 生存セルの範囲が1世代につき1セル幅分広がるだけです. 冒頭のQRコードや, ラストのニューロンのような樹状構造が広がるエフェクトに使用しています.

その他のCA

その他にも, ルールは複雑になってしまうので割愛しますが, いくつかのCAを利用しています.

Diffusion Limited Aggregation (DLA)

ラストのニューロンらしきものに使いました.
無数のつぶつぶがランダムに動き回っていて, “枝”の先にひっついたら固定されます. 各世代をそのまま書き出すと成長に相当時間がかかるので, 樹状構造がある程度成長した段階のものに, 先述した塗りつぶしルールなどを適用し, アニメーションさせています.

Golly: Margolus/DLA.rle

Cubist

途中のウィンドウ群の摩天楼らしきものの構造の生成につかいました. とはいえ, ここで生成されたパターンを元に, 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]

因みに, ブートメッセージはDebianをベースに, 途中登場するCommon Lispはrosettacode.orgのものを, セルの初期状態を外部ファイルから読み込めるように改変したものを使っています.

CAのアニメーション

CAのシミュレーション結果が単純にドット絵のように表示されるだけではなく, セル自身がモーフィングしたり, セル自体が小さなUIのパーツの集合体として描かれるようなスケッチも書いています.

セルのモーフィング

もにょもにょ動かします. 冒頭QRコードのアニメーションや, ラストのニューロン, 四季らしきものが形づくられていくカットの他, PVにも使用して頂けました.

UI化

UIのパーツの集合体に変換します. 本編の至る箇所で使用しています.

四季のシルエット

ラストの, 細かいウィンドウ群で構成された四季らしき構造物は, 線画素材を4種類の解像度の計24つのレイヤーにバラします. 画像は, 解像度毎に色分けしたやつ. 目あたりの解像感は保持してます.

それぞれのレイヤーを初期状態として上書きしながら, 寿命と最大誕生回数を短めに設定したB23/23をベースに, 毎フレーム生きたセルを上書きしながらシミュレーション. その後, モーフィング・UI化を施してます. 周囲に散りばめられてるやつは普通のConway’s Game of Life.

Plugins

追加購入したAEプラグインです.

Pixel Blender Accelerator: CS6以降でPixel Blenderエフェクトを使用するため
GPU Resize: AE標準のトランスフォームエフェクトのピクセル補間法にニアレストネイバーが使えるやつ
Dither: Psの”Web保存”で設定できるような, 細かいディザ指定ができる

Pixel Blender Acceleratorが必要になったのは, イントロ後のデスクトップのシーンで, CSS3の画像ボーダーのように, エッジ部分を保持しながらウィンドウをリサイズするためのエフェクトを自作したからです.

Tips

p5のスケッチをコマンドラインから起動するシェルスクリプト書きました. スケッチ側で引数を受け取る事も出来ます. 四季の24レイヤーのライフゲームはこれで自動化.

run p5 sketch from command line

あと, p5使って映像作る時, プロジェクト毎に大量にスケッチ出来るのだけど, プロジェクト内だけで共通化したいコードをサクッとまとめる方法思いつきませんでした. 地味にコピーしてます. ライブラリにまとめるのも億劫だし, Adobe ExtendScript内で#include出来るような感じで, 簡易的に相対パスで別ファイルをインクルード出来るような方法ほしい…

References

最初からリファレンスとして参考にしていたものも, 見返してみてあれの影響だなと気付いたものも混ぜこぜです.

Conclusion

その他にもランダムウォークで線を描いたり, 黄金角を使った配列を取り入れたり, ジェネ的なアプローチで作っている部分は多々あります.

プログラミング自体は小学生の頃から触れていますが, 工学部出身でも無いただのワナビなので, ガチな方に比べるとプログラミング的にも稚拙な手法しか用いていないですし, ツッコミどころもあるとは思います… そのあたり勉強していきたいので, 色々ごアドバイスいただけると嬉しいです.

橋本 麦∿Baku Hashimoto