LoginSignup
10
11

More than 5 years have passed since last update.

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

Posted at

これは「VVVV Advent Calendar 2014」の14日目の記事です。ちなみにvvvvは「ぶいよん」と発する派です。

映像といえばモーショングラフィックス(個人差があります)

h311o vvvv0r1d.
この前の投稿のスピンオフだと思って貰えれば幸いです。
さてvvvvは個人的にヴィジュアルを出してなんぼのツールだと思っております。しかもぎゅんぎゅん動いてくれるヴィジュアル。モーショングラフィックス。そうだ。つくろう。vvvvで。

モーショングラフィックス(以下MG)てなんや(※読み飛ばして構いません)

いろいろと定義はあるでしょうがすべての声を隅々まで汲んでいてはしょうがないのでここでは「幾何学図形・模様がなんかエモい動きをして人々を興奮させるスゴい映像」としておきます。ニコ動やvimeoでmotion graphicsとでも検索すれば出てきます。ちょっと長いけれどこれのバックスクリーンに流れてたりPerfumeの3人にプロジェクションマッピングされてたりするやつです。バックスクリーンのリリック部分はキネティックタイポグラフィじゃないかと言ってくる御仁もいるでしょうがここではモーショングラフィックスに含むことにします。短いのだとこんな感じです。エモい。アガる。
長いほうはopenFrameworksやMAXなんかのプログラミング環境をつかってリアルタイムに制御しているもの、短いものは見た感じAfterEffectsやCinema4Dといった映像制作・3DCGソフトで作られていると思います。たぶん。こっちのほうはリアルタイムではなくプリレンダリングです。
vvvvはoFのようにかなり細かい制御は不得意だし映像編集ソフトでおなじみのタイムライン編集もできません(タイムライン編集についてはプラグインは存在します。vvvvパッチャーで日本語チュートリアル動画を数多く投稿してくださっている@yhy_jpさんのこれがたいへんわかりやすいです)。ですが「なんでもできる雑食系ツール」を標榜してるのでそれっぽいものを作るのにやってできないことはなさそうです。
(ちなみにここまで書いておいてアレですが著者はoFもMAXも使えないし映像制作もしたことないし教育うけたこともないです。せいぜいAEを一瞬さわってたくらいですのでここまで&ここからまちがっていたら初心者を見つめるつもりであたたかく呆れてください)

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

Gyazo

それっぽい動きを作る

トランジション

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

Gyazo

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

ディゾルブ

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

Gyazo

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

Capture_2014_12_13_16_15_27_292.png

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

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

Gyazo

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

Gyazo

Capture_2014_12_14_09_53_53_729.png

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

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

10
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
11