TouchDesignerでHybrid Imageを作ってみる	


# 1. 概要
Hybrid Imageというのは近くで見た時(拡大した時)と遠くで見た時(縮小した時)で異なる画像が見えるようになっているものです。
高周波成分だけを取り出した画像と低周波成分だけを取り出した画像を組み合わせることで作成できるようです。
[おもしろメディア学：　見る距離によって，違う画像が見える？！: 東京工科大学 メディア学部 ブログ](http://blog.media.teu.ac.jp/2016/01/post-b153.html)

自分でも作ってみたかったのですがopenFrameworksでは自分のスキルが不足していて大変だなぁと二の足を踏んでいました。
[twitter アイコンから or OpenCVで Hybrid images 生成 - 覚え書き@Luigitefu](http://d.hatena.ne.jp/Lui/20110306/1299423320)

そこで最近流行りのTouchDesignerを使ったら簡単にできるのではと思って作ってみました。
![アートボード 1のコピー4.png](https://qiita-image-store.s3.amazonaws.com/0/94069/93c150bc-f081-aa28-e6ba-0811ce3636ca.png "アートボード 1のコピー4.png")


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

# 2. 環境
* Macbook Pro (Retina, 13-inch, Mid 2014) & macOS Sierra 10.12.6)
* TouchDesigner 099

# 3. 参考サイト

* [Touch Designer なら超簡単！動画の輪郭(エッジ)を抽出して色をつける方法](https://blog.creative-plus.net/archives/8151)
	* 画像処理の方法

<!--
* [Movie File Out TOP - TouchDesigner 088 Wiki](https://www.derivative.ca/wiki088/index.php?title=Movie_File_Out_TOP)
	* 画像の保存方法
* [TouchDesigner 上で、UIを作成する](https://www.shuhei-matsuyama.com/single-post/2016/01/04/TouchDesigner-%E4%B8%8A%E3%81%A7%E3%80%81UI%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B)
	* UIの作り方
-->

# 4. 方法
## 4.1 新しいプロジェクトを開く
![スクリーンショット 2017-11-12 21.13.36.png](https://qiita-image-store.s3.amazonaws.com/0/94069/25e6e019-3a0a-b526-6bc7-ca152fc8222d.png "スクリーンショット 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](https://qiita-image-store.s3.amazonaws.com/0/94069/7bbc1be4-e68e-1737-9f61-87816b938661.png "スクリーンショット 2017-11-12 21.16.17.png")

配置するとこんな感じにカメラの映像が映し出されました。
![スクリーンショット 2017-11-12 21.26.19.png](https://qiita-image-store.s3.amazonaws.com/0/94069/a1a20595-c82e-d54e-5cf0-9a08b60188c9.png "スクリーンショット 2017-11-12 21.26.19.png")

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

![スクリーンショット 2017-11-12 21.30.08.png](https://qiita-image-store.s3.amazonaws.com/0/94069/28e88d0b-2ef5-6b45-6ac8-f544460b1ad0.png "スクリーンショット 2017-11-12 21.30.08.png")

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

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

![スクリーンショット 2017-11-12 21.37.19.png](https://qiita-image-store.s3.amazonaws.com/0/94069/144d8140-392b-9356-7091-b531aee89620.png "スクリーンショット 2017-11-12 21.37.19.png")

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

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

![スクリーンショット 2017-11-12 21.43.09.png](https://qiita-image-store.s3.amazonaws.com/0/94069/a8afff4c-bb4c-ce9b-52a0-2d38b55d9fa1.png "スクリーンショット 2017-11-12 21.43.09.png")

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

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

![スクリーンショット 2017-11-12 21.45.48.png](https://qiita-image-store.s3.amazonaws.com/0/94069/a038cdaa-050e-360e-5a0f-2928a757cce4.png "スクリーンショット 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](https://qiita-image-store.s3.amazonaws.com/0/94069/207e1b6c-3205-aacf-f353-89b16179dea5.png "スクリーンショット 2017-11-12 23.11.27.png")


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