TouchDesigner

TouchDesignerでHybrid Imageを作ってみる

1. 概要

Hybrid Imageというのは近くで見た時(拡大した時)と遠くで見た時(縮小した時)で異なる画像が見えるようになっているものです。
高周波成分だけを取り出した画像と低周波成分だけを取り出した画像を組み合わせることで作成できるようです。
おもしろメディア学: 見る距離によって,違う画像が見える?!: 東京工科大学 メディア学部 ブログ

自分でも作ってみたかったのですがopenFrameworksでは自分のスキルが不足していて大変だなぁと二の足を踏んでいました。
twitter アイコンから or OpenCVで Hybrid images 生成 - 覚え書き@Luigitefu

そこで最近流行りのTouchDesignerを使ったら簡単にできるのではと思って作ってみました。
アートボード 1のコピー4.png

まだ調整が必要そうですが、なんとなく左側がモナ・リザで右側は男性に見えませんか?

2. 環境

  • Macbook Pro (Retina, 13-inch, Mid 2014) & macOS Sierra 10.12.6)
  • TouchDesigner 099

3. 参考サイト

4. 方法

4.1 新しいプロジェクトを開く

スクリーンショット 2017-11-12 21.13.36.png

4.2 Video Device Inputを配置

画面上でダブルクリックすると「OP Create Dialog」というものが表示されます。
その中の「Video Device Input」を選びます。キーボードでvideo..と打つと候補が絞られるので便利です。
スクリーンショット 2017-11-12 21.16.17.png

配置するとこんな感じにカメラの映像が映し出されました。
スクリーンショット 2017-11-12 21.26.19.png

4.3 Edgeを配置

同じように「Edge」を配置して両者をつなぎます。
「Video Device Input」の右側からドラッグして「Edge」の左側にドロップすればつながります。

スクリーンショット 2017-11-12 21.30.08.png

高周波画像はとりあえずこれでOKとします。

4.4 Movie File Inputを配置

これまで同様に「Movie File Input」を配置します。
右側のウィンドウの「File」の+を押して適当な画像を選択しました。

スクリーンショット 2017-11-12 21.37.19.png

画像の縦横比の調整の仕方が分からなかったので、元画像を1280x720にトリミング&縮小しています。
(今回は[無料絵画] レオナルド・ダ・ヴィンチ 「モナ・リザ」 (1503–1505) - パブリックドメインQ: 著作権フリー写真・イラストを使用しました。)

4.5 MonochromeとBlurを配置

「Monochrome」と「Blur」を配置して、先程の「Move File Input」に直列につないでいきます。

スクリーンショット 2017-11-12 21.43.09.png

低周波画像はとりあえずこれでOKです。

4.6 Addを配置

「Add」を配置し、4.3で作成した高周波画像と4.5で作成した低周波画像を接続します。

スクリーンショット 2017-11-12 21.45.48.png

これで高周波画像と低周波画像を1枚にすることができました。

4.7 Windowを配置

画面上をダブルクリックして「OP Create Dialog」を表示させます。一番左のタブに「COMP」というものがあるので、それを選択し「Window」を配置します。
ここには何もつなげず、ウィンドウの「Operator」にAdd1と入力するとAdd1に表示されている画像がWindowにも表示されます。
また「Open in Separate Window」を押すと別ウィンドウが開きます。

スクリーンショット 2017-11-12 23.11.27.png

4.8 パラメータの調整

目と口の位置を合わせるとなんとなくいい感じになりますが、その他に「Edge」と「Blur」のパラメータで細かく調整できます。
今回は「Edge」はそのままで、「Blur」の「Pre-Shrink」を5、「Filler Size」を4にしてみました。