DENXブログ

同志社大学 電気情報研究会(DENX)の活動や日常風景などを紹介します。

vvvvでの制作解説!

こんにちは、2回生の山田です。今回は、vvvv での作品の制作について書こうと思います。
vvvvとは何かというと、ビジュアルプログラミング言語の一つで、特にオーディオ、3Dアニメーションなどのメディアを用いた作品の制作に適しているツールキットです。
公式サイトは、英語はもちろん、一部のコンテンツでは日本語でも公開されています。
vvvvの特徴としては、素早くアイディアを形にできる点細かなコードについての知識が不要である点が挙げられます。
ただし、欠点として、ループ構造が作りづらい点や後述するノードが多く、検索性に優れない点があります。
ちなみに、vvvvの読みは、vが4つなので、「ブイフォー」とか「フォーブイ」とからしいです。
と、まぁ、簡単な説明も終えたので、実際の作品を解説して、制作の雰囲気を味わってもらいたいと思います。

vvvvのパッチを見てみる


今回、解説する作品は、こんな作品です。

そして、この作品のパッチはこんな感じです。
f:id:denx:20190815143324p:plain
vvvvでは、ソースコードではなく、パッチと呼びます。そして、この画像上にある下や上に線が伸びている長方形をノードと呼びます。
vvvvは、このようにパッチ上でノードをつなぎ合わせることで動作を作っていくのが基本的な流れです。
この辺りは、普通のプログラミング言語にはない感覚ですね。
ノードには入力と出力があります。上辺が入力側で、下辺が出力側になっています。
そして、ノードは入力に対して、内部で処理をし、値を出力します。
これは関数やメソッドと呼ばれているものに近しいですね。
ただし、ノードはそれらよりも柔軟性があります。
なぜなら、vvvvでの値は、値の列であるスプレッドとして処理されており、それによって値の個数が増減しても問題なく出力できるからです

基本的なことは述べたので、この作品の構造を説明します。
この作品は、2つの状態をもっています。円の状態nekoの状態です。
これらは、実質的には2つの座標の集合です。
ここでパッチの一番下に注目してもらうと、一番最後は、Rendererノードになっています。これは、画面に出力するためのノードです。
その1個前のPointノードは、点を画面上に出力するノードです。
つまり、このPointノードに座標を入力することで、円やnekoの状態を表現できますね。

では、この円やnekoの座標の集合をどのようにして生成すればよいかが次の問題となります。
パッチの中央付近にある、CircularSpreadと、TypoSpreadがその答えです。
CircularSpreadは、その名の通り、円形の座標のスプレッドを出力するノードです。
ここでは、458個の座標を円形に出力しています。
TypoSpreadも、その名の通り、文字を座標の集合として表現し出力するノードです。
ここでは、nekoという文字が入力され、458個の座標でこれを表現しています。
では、この2つをスイッチする仕掛けを作れば、完成……というわけではありません。
というのも、2つの状態をこのままスイッチすると、円からnekoに急に変わるだけになってしまうからです。
したがって、この2つの状態のかけ橋となるアニメーションが必要になります。
そこで登場するのがDamperノードです。
これは非常に便利なノードで、現在の入力値と過去の入力値をミックスし出力するノードです。
詳細に述べれば、現在の入力値と過去の入力値で変化があった場合に、その値の差を補完します。
そして、補完した値を決められた時間内で次々に出力します。
補完の仕方については、Damperのヘルプパッチを参照してもらう方が説明するよりも良いです。
とにかく、このノードによって、円の一部からnekoの一部に移動する点のアニメーションが表現できます。
あとは、0から1まで指定秒数で周期するLFOノードをスイッチの切り替えに用いたり、円とnekoの点をぐるぐるさせるために使ったりして完成です。

終わりに

最後の仕上げの解説はかなり省きましたが、実際に制作するとこの点は難しくはないと思います。
vvvvは、強力なノードがいくつもあります。例えば、Wiiリモコンと通信するノードや、DX11のアレコレのノード等。
また、コードを一切打たないので、非プログラマーにもおすすめできます。
vvvvは日本ではあまりメジャーではなく、情報も少ないですが、ノードをいろいろ弄ってみれば何とかなることが多いです。
あとは、ヘルプパッチをよく見て、実験を繰り返すことが重要です。
ということで、vvvvは非商用に限り、無料で使用できるので、入門してみてください。
以上、山田でした。