【vvvv Advvvvent Calendar 2014】vvvvでモーショングラフィックスぽい素材なんて作れるのか

これは「[VVVV Advent Calendar 2014](http://qiita.com/advent-calendar/2014/vvvv)」の14日目の記事です。ちなみにvvvvは「ぶいよん」と発する派です。
#映像といえばモーショングラフィックス（個人差があります）
h311o vvvv0r1d.
[この前の投稿](http://qiita.com/hurafula/items/0c1fa29b44dcccb7b8ab)のスピンオフだと思って貰えれば幸いです。
さてvvvvは個人的にヴィジュアルを出してなんぼのツールだと思っております。しかもぎゅんぎゅん動いてくれるヴィジュアル。モーショングラフィックス。そうだ。つくろう。vvvvで。

##モーショングラフィックス（以下MG）てなんや（※読み飛ばして構いません）
いろいろと定義はあるでしょうがすべての声を隅々まで汲んでいてはしょうがないのでここでは「_**幾何学図形・模様がなんかエモい動きをして人々を興奮させるスゴい映像**_」としておきます。ニコ動やvimeoでmotion graphicsとでも検索すれば出てきます。ちょっと長いけれど[これ](https://www.youtube.com/watch?v=gI0x5vA7fLo)のバックスクリーンに流れてたりPerfumeの3人にプロジェクションマッピングされてたりするやつです。バックスクリーンのリリック部分はキネティックタイポグラフィじゃないかと言ってくる御仁もいるでしょうがここではモーショングラフィックスに含むことにします。短いのだと[こんな](https://vimeo.com/29378261)感じです。エモい。アガる。
長いほうはopenFrameworksやMAXなんかのプログラミング環境をつかってリアルタイムに制御しているもの、短いものは見た感じAfterEffectsやCinema4Dといった映像制作・3DCGソフトで作られていると思います。たぶん。こっちのほうはリアルタイムではなくプリレンダリングです。
vvvvはoFのようにかなり細かい制御は不得意だし映像編集ソフトでおなじみのタイムライン編集もできません（タイムライン編集についてはプラグインは存在します。vvvvパッチャーで日本語チュートリアル動画を数多く投稿してくださっている[@yhy_jp](https://twitter.com/yhy_jp)さんの[これ](https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cad=rja&uact=8&ved=0CEAQtwIwBA&url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6QQw8KXjQss&ei=FMSLVKSmHqS8mQX36oKoBg&usg=AFQjCNErWxgvS8AvsFnmAs_WZ0QLrkv_rg&sig2=WE4Juz67vS5nGI0wM_CadA)がたいへんわかりやすいです）。ですが「なんでもできる雑食系ツール」を標榜してるのでそれっぽいものを作るのにやってできないことはなさそうです。
（ちなみにここまで書いておいてアレですが著者はoFもMAXも使えないし映像制作もしたことないし教育うけたこともないです。せいぜいAEを一瞬さわってたくらいですのでここまで＆ここからまちがっていたら初心者を見つめるつもりであたたかく呆れてください）

さてイントロが長くなりましたが最終的にこんなん作りました。

[![Gyazo](http://i.gyazo.com/b5ffebe1c7fcdb09a1b749086b2940ab.gif)](http://gyazo.com/b5ffebe1c7fcdb09a1b749086b2940ab)

#それっぽい動きを作る
##トランジション
「要は画面が切り替わってる的なテクニックを使えばできるのでは」と考えてトランジションを思いつきました。トランジションというのは映像のつなぎのことです。サザエさんだったらよく真ん中から円が広がって次のシーンに移ったりするやつです。

[![Gyazo](http://i.gyazo.com/9deb8d83d5c8f4940cd06f3cffa9b898.gif)](http://gyazo.com/9deb8d83d5c8f4940cd06f3cffa9b898)

slideInを使ってみました。こういうのもみたことあるとおもいます。

##ディゾルブ
さきほど出したサザエさんの例はじつはトランジションの中でもディゾルブという部類に含まれます。あと演歌のTV番組とかでよくステージを上からみた引きの映像とご本人さんの悶えてるような顔のどアップがオーバーラップして出てきたりするやつを想起していただければだいたいあっています。フェードイン/アウトとかですね。

[![Gyazo](http://i.gyazo.com/c54112dc7dd3024743321451662b8103.gif)](http://gyazo.com/c54112dc7dd3024743321451662b8103)

vvvvにはデフォルトでDissolveノードがあり、A→Bの遷移をControlインレットで操作してます。Controlについては前の投稿で書いてます。あとFaderプロパティとランダムシードプロパティがあるのですがFaderはどう機能するのかいまいちわからなくてランダムシードは今回のように狙った動きを出すには邪魔この上ないのでどちらも影響のない値を与えてあります。ランダムシードのデフォルトが有効値なので注意。

![Capture_2014_12_13_16_15_27_292.png](https://qiita-image-store.s3.amazonaws.com/0/60003/d2045b20-fd62-31ce-dafc-770d726b168c.png)


##Dissolveノードを使ってそれっぽい動きへ




MGでよくあるのが幾何学図形が格子状に出たり消えたりするやつです。正式に名称があるのかすらわからないのですがこういう感じのやつです。

[![Gyazo](http://i.gyazo.com/327562aa43ac58336331fb37cc4bf3a4.gif)](http://gyazo.com/327562aa43ac58336331fb37cc4bf3a4)


ボカロPVなんかではよくミクだったりの周りを飛んでますよね。すなわちこれがあるだけでMGっぽくなりそうです。あとは線が徐々に伸びていってひとつのかたちを成す、みたいなのもよく見ます。

[![Gyazo](http://i.gyazo.com/34cb9270d0508faa59ff943c29a35563.gif)](http://gyazo.com/34cb9270d0508faa59ff943c29a35563)


![Capture_2014_12_14_09_53_53_729.png](https://qiita-image-store.s3.amazonaws.com/0/60003/82e087e8-50bb-3fb0-b9f6-3fe5b531d83b.png)

力業ですが格子状に展開していくのはLinearSpreadで作った細長っちょろいQuadと正円にしたSegmentをDissolveにつっこんでごにょごにょしています。徐伸線（三角が各頂点から徐々にのびていってるほう）のやつはLine(EX9 FromeTo)でぶっとくしたlineを引いてますがこれがマスクとなり実際の三角（GridSegment）の上をなぞっています。座標は目見当で調整しました。強引です。

以上のようなテクニックをがんがん使っていくことによって冒頭のようなものがわりと力業で作り出すことができました。雑食系ツールvvvv、面目躍如！得手不得手がひしひしと伝わってきてくるしくなったところで筆を置きたいとおもいます。最後まで読んでくださりありがとうございました。それではhavvvve a nice patching!!
（なおそれぞれのgifアニメーションはgif動画制作サービスGyaoで撮ったものなのでカクついていますが、わたしの環境では60fpsは余裕で出ます。今回つくったパッチは手直ししてそのうちギッハブにでも載せる予定です。）