【Notch】動的なSlit Scan

###Notch #madewithnotch Advent Calendar 2020
https://qiita.com/advent-calendar/2020/notch
1日目の記事です。
#インスピレーション

**「Slit Scan」** スリット状に分割された映像が時間のズレによって連鎖、変形するような映像表現。

・Sebastian Lange氏の作品「Urban Surfaces」
[Urban Surfaces](https://vimeo.com/83542403)
・Mason Charanza氏の作品「Flight In Formation」
[Flight In Formation](https://vimeo.com/214594675)
・Hiroshi Kondo氏の作品「The Others」
[The Others](https://vimeo.com/162945779)

非常に感銘を受けた3作品です。
スリットが細かくなればなるほど滑らか且つ柔らかい変形になります。また、画角に対して動いているものほど大きく変形します。
以前からライブエフェクトでやれたらなあと思っていたところで今回できるか検証してみました。
↓これを解説します。
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Realtime Slit Delay × Mirror Effect　<a href="https://twitter.com/hashtag/madewithnotch?src=hash&amp;ref_src=twsrc%5Etfw">#madewithnotch</a> <a href="https://twitter.com/hashtag/%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%AC%E3%83%B3%E3%83%80?src=hash&amp;ref_src=twsrc%5Etfw">#リアルタイムレンダ</a> <a href="https://t.co/4sE8S6Uh3x">pic.twitter.com/4sE8S6Uh3x</a></p>&mdash; Shuhei Maeta (@shu1053) <a href="https://twitter.com/shu1053/status/1333505528266297345?ref_src=twsrc%5Etfw">November 30, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#Notch標準機能「Slit Scan」「Frame Delay」

###「Slit Scan」
標準機能で搭載されてるのでシンプルなSlit Scanであればすぐに作れてしまいます。
![Sliit Scan04.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/5f1c8aa3-93fa-711c-acea-68393aca3756.gif)
**＜使用方法＞**
適用したいVideo系ノードから繋ぎます。

Gap Width・・・スリットの幅
Delay Range・・・スリットの間隔
Direction・・・方向

<font color="Red">**＜欠点＞**</font>
ディレイのフレーム数を制御できない
ディレイの方向がX軸とY軸のみ
動的なスリットは作れない
![Slit02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/f8aa9132-8090-7bff-411f-53fe9094eb0e.png)

###「Frame Delay」
任意のフレーム数だけDelayさせる。これ単体でもディレイの効果が得られる。
「Slit Scan」と組み合わせることでスリット状のディレイフレーム数を制御できる

**＜使用方法＞**
Video系ノードから繋ぐ。Slit Scanと併用する場合はSlit Scanの下に繋ぐ。

Num Delay Frame・・・ディレイするフレーム量を調整。MAX600

<font color="Red">**＜欠点＞**</font>
あくまでも適用したノードにディレイを追加するものでしかない。
同じく動的なSlit Scanはできない。
![Slit04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/ef874d87-ce75-690c-aeaf-ec9859fad7ce.png)

#Cloner + Frame Delay

Clonerのiterateモードを使うことにより複数ノードを順番にクローンできる。
これと「Frame Delay」を組み合わせてみる。

今回は8個の「Image Plane」をクローンしている。

![Slit05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/47e89a32-616a-0ab7-4d10-bb78b42724a9.png)

各「Frame Delay」に1,2,3,4,5・・・と入力していく。
![Slit0６.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/761289d1-c0c2-95a3-874e-d689d5ee672b.png)
ディレイ量制御用のEnvelope Modifierを用意し、Operationを**「Mulutiply」**へ変更
全ての「Frame Delay」へ繋ぎ一括制御する。

![Slit0７.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/76a7245b-0ec6-1ac6-3b01-39d648ce4a05.png)

Clonerの各種Effectorでクローンを動かす。

Rotationなどにキーフレームを打つ。あとは好みで
![Slit0８.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/8a2551f5-c5c0-e59f-bf12-2ce3019b6246.png)

**Mirror**を入れたりしてシンメトリーやカレイドSlit Scanを作ってみる。
![Slit08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/243114/940d78f5-f3e1-2841-bbb3-8cb4b6d58db5.png)

#完成
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Realtime Slit Delay × Mirror Effect　<a href="https://twitter.com/hashtag/madewithnotch?src=hash&amp;ref_src=twsrc%5Etfw">#madewithnotch</a> <a href="https://twitter.com/hashtag/%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%83%AC%E3%83%B3%E3%83%80?src=hash&amp;ref_src=twsrc%5Etfw">#リアルタイムレンダ</a> <a href="https://t.co/4sE8S6Uh3x">pic.twitter.com/4sE8S6Uh3x</a></p>&mdash; Shuhei Maeta (@shu1053) <a href="https://twitter.com/shu1053/status/1333505528266297345?ref_src=twsrc%5Etfw">November 30, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

####メリット
・Clonerを使うことで各種ClonerおよびEffectorの機能を活用できる。
・キーフレームアニメーションで様々な動きをつけれられる。
・ディレイするフレーム数を直感的に一括制御できる。
・クローンするImage Plane自体を変形したり加工したり3Dオブジェクトに変えたり応用がかなり効きそう。


####デメリット
・スリット幅が細かい滑らかな表現をしようとすると用意するクローンが必然的に増えてしまう
・動的モーションと細かいディレイ間隔の両立はこの方法では難しい


質問等あればお答えしますので以下まで
Twitter : https://twitter.com/shu1053
FB : https://www.facebook.com/profile.php?id=100009103327410