Baku Hashimoto

橋本 麦

AfterEffects Plugin

(書いてる最中)

エフェクト

よく使う

ニッチだけど便利

ほぼ使わない

スクリプト

ScriptUI

デフォルトで入ってるけどかなり使えるやつ

ユーティリティー

その他

ビジュアルプログラミング

デザイナーも映像作家もなにかかしらの形でプログラムにお世話になってて, FCPもAdobe CCもC4Dも, すっごい拡大解釈すると全部ある種のビジュアルプログラミングだと思うので, あとはどこまで低レベルまで自分でコントロールしたいと思うか, の違いでしかない気がする.

映像生成するのにアセンブラから書くのは流石にしんどいので, 誰かが作ったプログラムの限定的なパラメーターをイジる事でグラフィックを作ってるんだと思うけど, 結局どの部分をカプセル化して, どの部分をデザイナーがコントロール出来るようにUIに落とすかは, 結局プログラムの設計思想に依る所でしかなくて.

一番怖いのは, そうとも知らずに, そうして外部化されたパラメータだけがコントロールできる全てだと勘違いしてしまうことで, 開発者都合で設定されている制約を制約として意識すらしないことだと思う.

例えば映像ソフトの殆どは, 並列処理がし易いように, 前後のフレームの状態に対して差分を加えるような処理を許さないから, クレイアニメのような作り方をデジタルじゃできなかったり, UVリマップやディスプレイスメントも, 大概ピクセルのオフセットの方向がX, Y軸に限定されていて, 例えば2つのチャンネルを極座標方向の変形として処理するだけで凄い面白いグラフィックが出来るのに, その可能性にすら気付けなかったり.

そういうんが, なんでこれが出来ないの!?っていちいちストレスに感じるから, AEとかCinema4Dをそのまま使うよか, ちょっとだけ低レベルから弄ってるだけの話だし, それすらもopenFrameworksだったりWebGLだったり, 誰かが作ったシステムのごくごく高級な部分をちょちょちょって触ってるだけだったりする訳で.

「プログラムで映像作るニュージェネ」みたいな印象自体は別に否定するつもりは無いし, マジで仕事出来ないのに認識してもらえるだけで有り難いのだけど, 自分の中では別にプログラミングと映像の融合とか意識してるつもりも無いし(とか言っちゃうのは少し確信的でヤラシイけど), そもそも理系と文系, デザイン思考とエンジニア思考を対立的に捉えちゃう時点で, すっごい可能性を狭めているなーって, ふんわり感じてるって話でした.

February 21, 2016

形骸化した作法を「そういうものだから」と疑うことなく受け入れること以上に、「理屈の上では無意味かもしれないけれど、『そういうものだから』と考える人もいるから一応はそうすべきだ」っていう考え方こそがそのクソ作法を生かし続けるのにずっと大きく加担してるんだと思う

Making of “KAMRA – Deja Vu”

Deja Vu | KAMRA の制作メモ書き.

なにを担当したか

Web制作のワークフローの中に, 映像制作の視点で細かい演出を入れ込む係として, 動きやルックなど薄く広くやらせていただけました. 具体的には, Cinema4D(C4D)でモーションつくってJSONに固める作業と, 本編中の動画・画像素材全般です. dot by dot inc.の谷口監督やデザイナーの太一さん, 実装担当のSaqooshaさんと衣袋さんの間で翻訳?っぽいことをしてたような気がします. 映像素材, モーションデータや設定値は全部gitで受け渡し, こまかいとこはコード中の定数と直接いじったりしました.

dot-by-dot-inc/KAMRA-Deja-Vu | GitHub

動かし

あとでJSONにしやすいように整理しつつも至って普通にC4Dでうごかしてます. MIDIデータを元に動きを自動生成するって話もあったんですが, 顔たちが自発的に表情を変えていくように演出したかったのと, デジデジしく作る過程の中に泥臭く手数をかける工程を入れたかったので, あえて手打ちしました. というより, 動きの気持ちよさをしゃんと詰めていくなら, イージングもbezier-curve一発指定とかでは無しに複雑な形にしていく事になりますし, 現状手打ちの方が単に手っ取り早いというだけの話.

「口角を上げる」「右眉を上げる」みたいな表情を30種類近くつくってやって, それをブレンドする方法で動かしてます(いわゆるポーズモーフ). そんな自慢気に言えることではないですが, キーフレーム数は20,000個以上ありました.

モーションや設定値をJSONに

C4DはPythonがふつうに動くので, APIを参考にモーションデータを書き出し. スプレッドシートで, 渡したいデータのフォーマットを共有.
C4DとThree.jsの座標系は逆なので, このへんで掌変換する必要があります.

これを, フレーム毎のデータとしてJSONに固めて圧縮. 相当に強引ですが, 圧縮後も17MB近くあったので, Saqooshaさんの方で配列部分をバイナリデータにして頂きました. データ構造わかりやすいようにモーションデータ部分を空にしたやつも載っけてます. 参考までに.

つくった素材

背景ムービー

塵や, もやがかったエフェクト, 白い線とかをムービーにまとめて, 比較(明)で合成. サランラップや, プリズムが光る映像とかの物撮り素材を使って, WebGL感を無くすようにしました. スクリーンやオーバーレイと違い彩度が持ち上がらないので, ルック的に不気味さが増すのと, 前後関係があやふやになるので, 背景, 前景的要素を一つのムービーにまとめられました.

LUT

青みがかった色調補正データはLUT(ルックアップテーブル)で指定しました. こういうデータを渡して, glsl-lutで補正.

UVパス

顔がとろとろに溶けるシーンや顔のパーツが福笑いみたくあべこべになるラストシーンは, UVリマップの仕組みでデータを作っています. こういうこと. ビット深度不足を補うのと, 圧縮時のアーティファクトを消しこむためにシェーダ側でブラーかけて使ってもらってます.

性的対応表

何かかしらの拍子に偶然トレンド入りした「性的対応表」という謎のことばを見た人が, 「『性的対応表』がトレンド入りしてるんだけどどういう意味なんだろう」と反応することが「性的対応表」のトレンド入りを持続させる, っていう現象, 面白い. なんとなく鮫島事件を思い出すけど.


検索のサジェスチョン機能でもこれに似た構図の現象がある. 例えば「イソタ―ステラ― つまらない」が一度サジェスチョン候補に入ってしまうと,

って反応をする人がいて, そのことが却って「イソタ―ステラ―」と「つまらない」の関連度を強固にしてしまう.

と俯瞰的に語るツイートすらも関連度に貢献している.

という僕のこの記事も, クローラに拾われて, Google検索の「イソタ―ステラ― つまらない」の関連度をほんの少し強めてしまうことに貢献してしまうとファンとして悲しいので, 「イソタ―ステラ―」って敢えて書いたんだけど, 多分表記ぶれ補正されてしまうので意味がない.

December 17, 2015

異業種コラボレーション とか銘打ったとて, 表面上のスキルやトーンは違ってても, 結局意識の高さレベルとか, そのシーンにおけるスタンスや切り口はトポロジー的に同じ(適当な意味で使ってる)なことが多い気がする, 全く悪気なく, 僕の高校時代レベルのリテラシーで比較すると武田双雲とチームラボはトポロジー的に同じ.

一方のシーンからするともう片方のシーンはすげぇ内輪臭くてゴミみたいなクオリティに映って, もう片方からするとツルッツルに均質化された酷くコマーシャルでつまらない世界に映って, しようと思えばお互いのシーンを別に無視できる位, 要するに「ノリ」の違うシーンの人と作って初めて見えてくるものがあるし, 自分のシーンにおける粋と野暮, ナウさとダサさをより俯瞰視点で相対化できる気がする.

それが小劇場とテニミュなのか, EDMと奥華子なのか, バーグハンバーグバーグとユーフラテスなのか分からないし, 双方のシーンにとって意味のわからないものになる可能性もあるけど, 結果は置いといて, やってる当本人にとってはすごく実りのある体験にはなるんじゃないかなぁ.

ノガミカツキと映像作ってる時に思った. コラボレーションからのイノヴェーションだか何だか的な意識高いアレでも, 全然違うタイプだけど認めてるぜ的なマブダチ感を醸したい訳でもなしに, それは, わりかし率直に思う.

映像作ってる人の中でも, なんとなくアート・アニメーション界隈とかエナジードリンクにやたら詳しい界隈, クリエイティブ・コーディングみのある界隈とか, オモシロい其れ即ちクリエイティブな界隈, インターネット・ミーム大好き界隈, 政治的関心度高い界隈とかやたら細かく分断されてる感覚はあって(半径50mの話), 映像クリエイター飲みつってもそのクラスタを超えて集まることはあまり無かったりするのだけど, 多分そういうノリの違いこそ越えていくべきで, 「よさ」が単一のクラスタに閉じたサムいものにならない為には, そういう人と一緒に作っていくべきなんだと思う.

いちいち細かいインターネット感の違いを遠目にあざといなぁー思ったり, 無関心を装ったシニカルな目を向けていたりするのはただただ機会損失(この言葉選びにシニカルになるクラスタもある)でしかなくて, 個人的にすごく寂しいし, なんかもっと(自分含め)みんなナイスになれればいいのになぁって最近感じる.

Making of “The Perfect Insider ED” (EN)

I directed and made an ending movie of “Subete ga F ni naru -The Perfect Insider” a Noitamina animation for Autumn 2015. The movie is made with a method called “Generative Art” based on one of a main characters in the story Shiki Magata who is a genius programmer.

I uploaded some some codes used in this work but they’re might pretty disordered.

baku89/Subete-ga-F-ni-naru

Here is a quick technical note.

Overview

“Generative Art” is an artistic field to create graphics, musics, or three-dimensional objects with algorithmic method like programing. Among them, Cellular Automaton (CA) a model studied in the field of complex system and computer science is mainly applied to the movie.

The most popular CA is “Conway’s Game of Life” which is often referred as entry-sample of programing. In addition to “Conway’s Game of Life” itself, more generated CA and one with original rules are used.

Motif (GUI framework) is (literally) referred from *nix from late-90s’ considering background of original novel and flashback of a character although the time setting in anime version is changed to 2015. My generation had not gone through the era in original novel so research was required to collect background information. There might be some conflict but hopefully the movie interests some original fans or hackers.

Tools and Workflow

Below is tools used.

Golly was used with several scripts like here.

Since export did not go well, Visions of Chaos was simulated with VMWare Fusion inside Mac and captured by screenshot…

Compositing Softwares

Life-like Cellular Automaton

It is a CA generated the concept of “Conway’s Game of Life.” Users can control number of active adjacent cells like “Survive when there are this amount of cells and born when there are that amount.” The rule of Conway’s Game of Life” is written as S23/B3 but there are other arranged versions taking idea from ” list of prominent rules.”

Conway’s Game of Life (S23/B3)

It is mainly used in intro and climax. OTCA metapixel which connects some “Game of Life” themselves like electronic circuit is applied. Samples are taken from “Golly’s LifeGame” or HashLife’s category.

Generation Rule (S23/B23)

An original rule used in the birth of objects. Leaving similar pattern as “Conway’s Game of Life,” it spreads less chaotically and simply to increase their areas so they can be seen in many parts of the movie. New rules of life span and maximum birth number are also added to make it more useful as a transition effect. Both active cells stay over their life spans or go though birth-death-cycle more than maximum number of birth are automatically killed and turn out to be nonactive objects changing their colors to text or UI of commands.

Spiral Growth (S15678/B34568)

It is to create UI same as Generation Rule. The shape looks like chainsaw is interesting.

Mazectric (S1234/B3)

Used for the objects look like maze and skyscraper in mid-part.

Filling Rule(B12345678/S12345678)

It simply adds one active cell in every one generation used for QR code on beginning and tree-structure like neuron in final scene.

Other CAs

There are some other CAs like below. I will cut down details since it is little too complicated to go through.

Diffusion Limited Aggregation (DLA)

It is applied to final neuron scene.
Several dots move randomly and ones stick “branches” are fixed. It took too long to glow enough so DLA is applied with “Filling Rule” to the tree-structure which is grown to certain level in advance.

Cubist

It is applied to bunch of skyscraper-structures in middle part. However, edges were cut and cleaned with photoshop, UI-Conversion (explained later) was added, and arranged their UI pattern by hand so it was not really a generating.

Motif, CDE, Common Lisp, Emacs…

It is little rude to explain too much but I have concerned about Shiki’s development environment. “RedMagic” in the story maybe came from “RedHat” so I mixed things up assuming it is *nix.

[Spoilers] Subete ga F ni Naru: The Perfect Insider – Episode 1 [Discussion]

Boot message is by the way Debian base, Common Lips is rosettacode.org which is customized
to import the first condition of cells from external file.

CA Animation

Not only the result of CA simulation shows as dot drawings, but also each cells themselves are controlled to morph and to act as small parts of UI aggregate.

Morphing of Cells

Moves cells like larvas. It is applied in QR animation in beginning, neuron in the final, forming of Shiki’s outline, and even PV of the animation.

UI Conversion

Turns white part into mass of UI parts like an image above. Applied everywhere in the movie.

Forming Shiki

Structure of little windows forming Shiki in final scene is made of line-drawing material divided into 24 layers with 4 different resolutions. An image above shows 4 resolutions with different colors. Resolution is set not to go too rough to lose Shiki’s shape.

It is a simulation overwrites active cells onto each layers as initial state based on B23/23 with shorter life and fewer maximum birth number. Morphing and UI-conversion are added after the simulation. Cells around Shiki are normal “Conway’s Game of Life.”

Plugins

Below is additional AE plugins I have purchased.

Pixel Blende Accelerator was needed to built an effect resizes windows keeping edges like CSS3’s image-border for “desktop” scene after beginning part.

Tips

I have built a shell script starts p5 sketch from command line. It is capable of receiving argument on sketch side. “Life Game” of Shiki’s 24 layers are automated by this.

BTW, compositing movie with p5 spreads large amount of sketch per projects but I did not come up with quick way to put common code together so I had to just copied and pasted them. It takes too much effort to put them together into a library. I wish if I had any easy way to include other files with relative-path like I can #include inside Adobe ExtendScript…

References

Here is list of works I have referred consciously and unconsciously.

Conclusion

Other than above, the movie contains many methods like hand-drawing, arrangement using golden ratio, and generative approach.

Although I have been using programming since I was in elementary school, I am a wannabe-hacker who is not even from engineering field so these methods are not so professional but I would love to keep studying. It will be great pleasure to hear your advice!

Making of “すべてがFになる ED”

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は色々スクリプトを仕込んで使いました. このへん.

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

映像ソフト

Life-like Cellular Automaton

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

Conway’s Game of Life (S23/B3)

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

Generation Rule (S23/B23)

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

Spiral Growth (S15678/B34568)

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

Mazectric (S1234/B3)

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

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

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

その他のCA

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

Diffusion Limited Aggregation (DLA)

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

Cubist


途中のウィンドウ群の摩天楼らしきものの構造の生成につかいました. とはいえ, ここで生成されたパターンを元に, Photoshopで輪郭をクリーンアップした上で UI化(後述)を適用したり, 手作業でUIを配置するなどしているので, 厳密にはジェネでは無いです.

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

Tips

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

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

References

最初からリファレンスとして参考にしていたもの, 無意識に影響を受けていたなぁと感じる作品です.

Conclusion

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

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

November 15, 2015

批判をするも勝手だけど, 自分ん中で正論だったとて, それをニュートラルに表現すればいいだけの話で, わざわざ嫌な言い方を必要は全く無いんだってここ数年でようやく気付けた.

多分, やな言い方をわざわざ選ぶ人の頭の中では, 単に自分は当たり前のことを言ってるだけなのに, 発言の本質じゃなくて, 感情論で突っかかったり勝手に傷ついたりするなんて頭のわるい人がすることだ, 理知的じゃない, 議論じゃない, って思ってたりする.

数年前同級生の進級制作を, 安易におっぱい撮る美大女クソとかdisった時まさにそんな事を考えてた気がするし, 批評を受け入れられないなら作品つくんなやとか本気で思ってたし, けどそもそもそういう次元の話じゃなしに, すげぇシンプルに誰かの気を悪くさせるのはいくないことだと.

殆どの人にとっては当たり前のことだと思うけど, 本当にそれが理解できない人が僕含めて一定の割合いるような気がしてて, 自分を論理的だと思ってる人程, そういう議論の本質から外れた部分での「やな人」にならないための労力や同質化を悪だと, 論理的に信じてるから辛い. 最近インターネットでもろもろの議論みるたびそういう事グルグル考えてしまってやるせない.

おまつりトライアングル

性格悪いよね、というのは久美子が人の流れに沿っているようで、実はそうではないということを言いたいんだと思う。優しい顔をして心には毒を持っている。けれども、それは人を中傷するだけの悪口ではなくて、純粋に感じるシニカルな毒なんだ。

例えば大統領になりたいとか、宇宙飛行士になりたいと言う人がいるよね。それに対して「なんで?/どうやってなるつもりなの?/そんな困難なことをどうして夢見るの?」とクエスチョンマークを引っさげて悪意なく問いかける人は滅多にいない。麗奈は久美子の全国~の何気ない一言で、自分の信念を見直して再評価する機会を得たんだと思う。だから、麗奈は久美子の物の見方に興味があるんだ。

フロム・ディスタント:響け!ユーフォニアム 第8話「おまつりトライアングル」:海外の反応