Baku Hashimoto

橋本 麦


Making of “depthcope” (EN)



Below is quick technical note.


This video is originally made for the Japanese TV Show, “TECHNE – The Visual Workshop“. The every episode introduces one visual technique such as stop-motion, then challenges creators to produce a short video using that tequniques. I’ve called to appear on the program as a video artist, and my theme in this ep is to use “rotoscope”. I had been thinking about how to extend the notion of rotoscope, and finally came up with this “3D rotoscope” technique.

To explain it briefly, I made the 3d previs for rotoscoping in Cinema4D at first. It includes a 3d-scanned face with Kinect and geometrical forms which are not usual as a motif of clay animation. Then I rendered them as “depth map”, which represents a distance from the reference surface, such like a topographical terrain map.

Next, I set a pair of Kinect and projector right above the rotating black table(referred as ‘disc’). I made the app which enables to display whether heights of each point on a surface of the clay is higher or lower comparing with the depth map with colored dots. If higher, it represented as red. The lower one is blue. It becomes green when it gets nearly right. Therefore, the form of the clay almost corresponds with the previs if all of the dots turn into green.

I mean we can trace the 3d previs with a clay by repeating this more than 500 times. Generally speaking, clay animations tend to be more handmade-looks, and an analog one. However using such this workflow, I thought clays will move and metamorphose precisely like CG. In addition, I want to combine the highly automated system with such an old-style and laborious technique.


I used Dragonframe and EOS 7D for shooting stop-motion, openFrameworks for creating the shooting app. I adopt a Kinect V2, which partially works on mac.

Integration of Dragonframe and openFrameworks

Dragonframe only can send events by calling shell script with parameters, so I wrote the script which sends as OSC with Node.js.

baku89/dragonframe-osc – GitHub

Kinect-Projector Calibration

I used ofxKinectProjectorToolkitV2 for transformation from 3D Kinect coord to 2D projector coord. I calibrated with this sample in the addon. It exports calibration.xml which includes some coefficients.

The implementation of a transformation using the coefficients appears to be written ofxKinectProjectorToolkitV2::getProjectedPoint(), and I referenced it and rewrote as the shader program to make it more efficient.

Converting to the disc coord

I realized a need for converting between the disc coord (whose origin is positioned at the center of the disc) and the Kinect coord (at IR camera) so I implemented the system to set an X-axis and Y-axis on the disc, like below gif:


It was so tiring😭



I made the mount for the projector and Kinect. Modeled with Fusion 360, and cut the parts from MDF with my CNC milling machine. Honestly, it was most exciting time than any other processes lol

As you can see, I had planned to control also the rotating table, but it was failed because of a shortage of torque of a stepper motor 😨 I have to study about mechanic more.

Incidentally, I wanted to mix iron sand and a glitter into the clay to make it more variant texture. Below picture is the experiment for it.

And I also found the problem that the measurement of depth is interferred by a man who stands very close to a Kinect. Not to wiggle the measured heights, we have to go on standing the same position. After all, we had referenced the guides and contours which rendered with Cinema4D additinally. I’d like to find a smarter way.

Although there’s many reflection points, it was so interesting to make such an experimental work with experimental workflow.

I think Kinect community should be hotter. Until a few years ago there’s so many digital arts using Kinect whose visual looks like “Minority Report”, and it had got out of date. Many creative coders are now working on VR or deep learning field. However, I think there should be a lot of undiscovered ways to use a depth camera, whether using its depth image to visualize directly or not. So I’d like to go on digging it.

And I really don’t want to touch a clay anymore, at least 10 years lol

Making of “depthcope”

English version is here.




NHK Eテレで放送中の「テクネ -映像の教室-」という番組内で、ある映像の技法をテーマに、映像作家がショートムービーを作るというコーナーがあります。今回は僕が依頼を受けたのは「ロトスコープ」でした。ドローイングも下手くそなことですし、いっそ開き直って普通に「実写映像の輪郭線を鉛筆でなぞる」のではなく、「立体の表面の高さを粘土でなぞる」ことに挑戦しました。いわば、3Dロトスコープです。





コマ撮りソフトにはDragonframeを使用。撮影は7D。システム周りは全部openFrameworksで作りました。Kinect V2をMacで動かしてます。



baku89/dragonframe-osc – GitHub










プロジェクターとKinectのマウンターを自作しました。むしろ本編より頑張った。Fusion 360を使って設計し、フライス盤でMDFボードを切削。

見ての通り、回転台も自動制御する予定でしたが、トルクが足りず失敗😨 電子工作とメカニックしゃんと勉強したい。






Making of “Olga Bell – ATA”

I made the video for “ATA”, taken from Olga Bell‘s LP.

Although there are many hidden concept and context we had discussed, however, it doesn’t need to be explained. I’d like to write only a few technical note for me, or perhaps someone who want to know such a niche techniques.

3D Matte Painting

Although the video perhaps looks like 3d scanned like this, or this, I actually modeled all the object by hand with using a basic technique called “3D matte painting”. I simply projected the photos taken by Josh Wool to the whole scene, and modeled an object so that its perspective bends weirdly against a rule of thumb. I used Cinema4D and X-particles plugin for modeling, and Photoshop for decomposing into layers. (Just applied the “content aware fill” for backside of the layer lol) FYI, I inspired by reverse perspective paintings, Felice Varini’s works, and some topological shape like Calabi-yau manifold.

Melting the Texture using oF

I’ve experimented generating an abstract gradient with bending daily taken photos, which I personally call the method “Feedback Displacement“. It repeatedly warps an input image a little and then makes a pattern like a hand marbled silk. I had performed it as Vjing few times in this year, and I’ve wanted to introduce this technique to normal video-production.

I built the simple system to integrate C4D with openFrameworks which enables to use oF as a sort of external renderer of C4D. The oF app exports sequence images syncing frame with C4D, and it can be set as animated texture in C4D. The flow is below:

  1. C4D sends a frame number and current parameters (warping speed, angle, and opacity) via OSC
  2. oF receives the message then applies a displacement effect to the current frame.
  3. Save frame as needed.
  4. oF sends back a message “just done rendering” with frame number via OSC.
  5. When receiving above message, C4D increments the frame then returns to (1)

The advantage is you can cherry-pick advantages of both timeline based app and generative approach. C4D and some general video-production software are not good at a kind of “difference equation”, which increments a difference to a previous result repeatedly. It is because such an app needs to be capable of multi-thread rendering for a tremendous amount of calculation. So any frames not allowed to depend on another frame’s status as long as baking the result for each frame. But creative coding approach realizes it very easily.

On the contrary, code-oriented tools are not good at timeline based processing like making a music video. Although part of digital artists uses VEZÉR or Ableton Live as a sequencer, I decided to do with C4D directly since it’s the most simple way I guess. Incidentally, this idea originally comes from Satoru Higa‘s experiment.

I uploaded the sources and project file. I think they’re pretty tangled, though.

baku89/ATA: Tools for “Olga Bell – ATA”

I’ve been always curious about “making new ways to make” as much as an artistic or visual aspect. This quoted from Masashi Kawamura‘s word about his concept making (and originally comes from Masahiko Sato). However, for me, as a designer and coder, it is “designing new workflow and tools to make”. Even I don’t know what I want to mean myself lol but I want to continue experimenting.

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個以上ありました.


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

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



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


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


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

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.


Here is a quick technical note.


“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.


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 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.”


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.


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…


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


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にとりあえずアップしてますが, 本当にアップしただけという感じで, 超汚いです. 僕の作業フォルダのフルパスなんかも入ってしまってます.

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


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

Diffusion Limited Aggregation (DLA)

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


途中のウィンドウ群の摩天楼らしきものの構造の生成につかいました. とはいえ, ここで生成されたパターンを元に, 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のシミュレーション結果が単純にドット絵のように表示されるだけではなく, セル自身がモーフィングしたり, セル自体が小さなUIのパーツの集合体として描かれるようなスケッチも書いています.


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


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


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

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



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


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

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


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


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

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

November 15, 2015

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

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

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

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








Making of “group_inou – EYE” (EN)

Below is quick technical note.

How to Make?

Basic idea of this video is combination of Google Street View sequence and stop motion animation of group_inou(cp and imai). Building efficient methods of getting background panoramas from Street View and shooting pictures of members were keys to make the idea real in short period.

Here is a basic workflow.

  1. Location Hunting: Writing down good locations onto spread sheet.
  2. Fetching proxy images of Street View and making pre-visualization.
  3. Shooting.
  4. Converting images to high-res and compositing with characters.

Below is set of tools I had built in making process while large part of their codes is messed up.

baku89/group_inou-EYE – GitHub


To get images from StreetView, I forked Hyperlapse.js which was an open source library from teehan+lax.

I ended up barely used Hyperlapse.js itself but mainly used a library called GSVPano.js which Hyperlapse.js depended. An original repository was deleted by violating Term of Service so I used the modified version in Hyperlapse.js. The official blog of teehan+lax said they rewrote the part of code which downloads panorama-tiled images to use official API methods not to conflict with ToS.

Fetching Panorama

Hyperlapse.js automatically searches route between two points with Google Map API, subdivides the route to array of points, and finds corresponded positions in StreetView. This means Hyperlapse.js cannot go out-of-way places, inside buildings, or elevated railroad so a tool exports array of contiguous panorama IDs was required instead of a one searches route.
So I made this.

Pano ID Extractor

GSVPano.js loads the JSON array of panorama ID and downloads each panorama images.

toDataURL() converts the panorama image drawn on canvas into base64 and “fs.saveFile()“ in Node.js saves them into local. I used NW.js to enable Node.js functions to be called from browser.

Embeding Data in Panorama Images

Below is edited panorama images.

A red and green dots on bottom edge of this video are the saved Panorama data.

    "id": "WysqsRo6h5YGNmkkXVa9ZA",
    "rotation": 35.11,
    "pitch": 1.09,
    "latLng": {
        "A": 51.59035,
        "F": 3.677251999999953
    "date": "2009-09",
    "heading": 0

These JSON converted into byte arrays and writes each bit on bottom of video. (corresponding code)
The reason to go though this process was to replace with high-res images later. The dimension of sky map image needed for rendering 1080p is at least 10Kpx but it could cause some trouble if I kept downloading too much of such large images so I got 1600px-wide good looking images for that time. I built proxy-replacing tool for that.

Making Pre-visualization

A detailed previz was required at pre-production stage because shooting could be very tough otherwise. I brought edited panorama images into C4D and added camera motion. Fortunately, there were low-poly models of both characters from another project so it was easy to set motion of members.


EOS 5Dm2 was used for shooting. To add realistic adjustment for lighting and perspective, the idea of taking images of many general poses so to use them repeatedly was not good enough. So I decided to shoot from begin to end in turn. (It seemed to be much better to dare to adopt the hard way for shooting. )

It turned out to be around 3,000 frames to shoot. A strong automation was required so I built a shooting system with NW.js.

Controlling lights with DMX

DMX a protocol generally used for controlling stage lights was applied to control lightings. ENTTEC DMX USB PRO was used to send DMX signals. It was tough to install driver into mac with OS after Mavericks because of some known bugs. This is an support article.

DMX is basically a protocol sends light intensity with XLR so stage lights usually have XLR input for receiving DMX but there is no such things on photographic lighting. An alternative was ELATION DP-415 to control input voltage directly.

Test with some lights at office.

Calculating Camera Position and Ajusting Direction of Characters

I added Xpresso in C4D project to calculate camera position. Time direction was used to set direction of members. Distance from members are written on floors and scale was written on tripod feet to make angle more accurate. Plates with each time were around them. A video guide was set above them so they could see the direction to turn next.

DIY Release and Electric Follow-focus with Arduino

Since position of camera was high, I built PC control for shutter and zoom ring with Arduino.

(I found there were official Canon SDK and add-on for oF after everything was done by the way.)

I used stepping motor for follow-focus. It was little risky because it did not recognize end of rotation of zoom ring but I there was no time to fix that problem. It was ugly but still worked all fine.

C4D with Python Libraries

External python libraries works fine inside C4D. This means OSC and DMX also works on C4D with related libraries. I used python-orc to synchronize timecode between shooting system of Node.js and C4D, and used pySimpleDMX to control lighting.

ex) Send OSC with python tag

Use of VDMX

A large video guide was projected using VDMX. This helped members to image their motion.

Actual Shooting

It turned out to be system like above. Pink arrows indicate OSC. With this system, all of 3,500 frames were shot in two days.

Test shooting.

Post Production

All sources were edited with AfterEffects. Background was replaced with high-­res version. Because of too fast motion, “Warp Stabilizer” effect did not work well so most of the frames were adjusted by hand. Positioning of characters was done frame by frame that almost killed us.

I guess I will not make another video with same method and I will not take street view work so if you have any question, please feel free to mention to @_back89.

Special thanks to nolie for translating.

Feb 4, 2016

Making of “group_inou – EYE”

group_inou “EYE”のMV、かなり独特なフローで制作したので、技術まわりの諸々をメモ。丁寧に書いていくと相当な物量になりそうなので、要所だけ抑える感じで…。


見れば分かる通り、Street Viewを使ってます。そこにコマ撮りしたアーティストを雑コラ的に合成。


  1. ロケハン (スプレッドシートによさ気な場所をピックアップ)
  2. プロキシ版StreetViewの取得 & プレビズ作成
  3. 撮影
  4. 高解像度置き換え & 合成


baku89/group_inou-EYE – GitHub





Hyperlapse.jsはGoogle Map APIで2点間の経路を検索し、その経路のパスを分割して点群にバラし、各点毎に近傍のStreetViewを検索かけています。つまり、経路検索の出来ない僻地や建物内は行けない上に、僻地や高架などではうまく動かないので、経路検索ではなく、隣接するパノラマのIDの配列を吐き出すツールを作りました。

Pano ID Extractor


公開した後になって、この方のツイートでtakramさんの記事を知ったのだけど、やってる事はかなり近いです。ただ、canvasをbase64変換したやつをAjax的にゴニョゴニョしてサーバーから保存かけてやるのはコードが分散して億劫だったので、Node.jsの fs.saveFile() 使ったというワケ。で、ブラウザ内からNode.jsのモジュールが使えるようにするために、NW.jsなるものを使いました。要するにNode.jsでネイティブアプリっぽいものが作れるよーっていうやつで、使い方も割と簡単。多分APIとか絡めてジェネ的に映像素材を作るためのフレームワークとして今後もかなり使えそうです。何よりHTML+CSSでUIが組めるのがデカイ。




    "id": "WysqsRo6h5YGNmkkXVa9ZA",
    "rotation": 35.11,
    "pitch": 1.09,
    "latLng": {
        "A": 51.59035,
        "F": 3.677251999999953
    "date": "2009-09",
    "heading": 0

こういうJSONを、バイト配列にバラし、各ビットを書き込んでるから仕組みは単純です。(該当箇所のコード) 何がしたいのかというと、後で高解像度版に置き換えられるようにするため。フルHDでスカイマップとして使うには横13,000px位は必要なのだけど、そんなバカバカ画像取得しまくったら何となく怒られそうだったのと、編集段階ではなるたけデータを軽くしたかったので、一旦横1600px程度でサクサクよさ気な場所を取得し、Premiereで実尺に編集したのを一気に高解像度版に置き換え。これも専用のツールを作りました。


編集したパノラマをC4Dに持って行ってカメラワークとか付けて。ちょど前のgroup_inouのPR vol.10のティザー映像で、お二人のローポリモデルを作っていたので、それを再利用して人物の動きも決めていきます。




ライブハウスとかの照明の制御に使われるプロトコル、DMXを使って、ライトの制御をしました。DMXの送信にはENTTEC DMX USB PROを使いました。Marvericks以降のドライバのインストールはかなり厄介で、サポート記事参考にしています。

DMXは要するにXLRで照明の明度を送んよーってプロトコルで、ライブ照明とかは本体にXLRの入力端子が付いていたりするのだけど、撮影用照明はそうはいかないので、ELATION DP-415を使って照明への入力電圧を直接変えることにました。今後も色々つかえそうです。



プレビズ作成に使ったC4DのプロジェクトをXpressoを使い、カメラ位置などを算出します。人物の向く方向は「○時の方向」で。スタジオ床にメンバーからの距離をバミって、三脚の伸縮部分にも目盛りを付け, カメラ位置を正確に移動させられるようにしました。スタジオの周囲には「○時」のプレートを貼り付けて、上のガイド映像を見つつ、指定の方向を向いてもらいます。



カメラのタイマーレリーズを自作してみた – FALCON’s Diary

あと、諸々終わって気づいたのだけど、EOSのSDKも出てるし、oF用のアドオンもある。国内ではダウンロード出来ないのだけど、色々ゴニョゴニョやったら入手出来ました。(かもしれません, と念のため言っておきます)



C4D Library


参考: OSC with C4D – gist








撮影後は、地道にAfterEffectsを使って編集。背景は先のReplace Proxyを用いて高画質版に変換し、AEでワープスタビライザーかけています。ただ、あまりに動きが早すぎて、スタビライズが全く上手く効いてくれなかったので、半分くらいは人力で…。(辛かった)


, これもPhotoscanというソフトを謎活用して無茶苦茶なことやってるらしいです。



Term of Servicesはかなり読み込みました。ウォーターマークを消さない状態で、ブラウザ上での見え方から”著しく”変わらなければ商用利用も可、許可申請も要らない。雲などの自然物の除去や合成は可。あとは多分ToS的にはアウトですが、2年以上公開停止になっていないStreetViewを使った他作品(これとかこれ)を参考にしつつ、どこまで画を弄っていいかを判断しました。




多分今後同じ手法を用いて作品作ることはありませんし, 似た案件が来たとしても断るつもりでいますので、何か作り方に関して質問等があれば気軽に@_baku89に連絡ください。webには書きづらい制作過程とか結構ありますので。

追記 Feb 4, 2016