チュートリアル2 - Spread and Filters

さて、チュートリアル2ではvvvv独自の機能であるSpreadsについて学びましょう。と思いきや、本家マニュアルではチュートリアル2が完成していない。 試行錯誤してみる人は以下のnodeを作ってみると少しは分かるかも。 だそうです。

• "Renderer(GDI)"
• "RoundRect(GDI)"
• "LinearSpread(Spreads)"
• "TypoSpread(Spreads)"
• "CircularSpread(Spreads)"
• "Oscillator(Animation)"
• "Damper(Animation)"
• "LFO(Animation)"
• "HSB(Color Join)"
• "IOBox(Value)"

と、まあ、これで終わったらあんまりなんで各nodeのごく簡単な解説でもしてみます。

まず最初の"Renderer(GDI)"はチュートリアル1でも出てきたからもうおわかりですね。これが無きゃ始まらない描画領域です。

RoundRect

{picture file=img/wiki_up//vvvv2_2_1.jpg}
次に出てきた"RoundRect(GDI)"はRound（角が丸い）Rectangle（矩形）を描画してくれるnodeです。初期状態では完全に直角な長方形が描画されますが、左から五番目の'Radius' pinの値を大きくしていくと徐々に角が丸くなっていきます。取り得る値は(0, 1)で、最大の1にすると直線部分が一切無くなって、ラグビーボールみたいな形になってしまいます。その他のpinは、描画位置や矩形の幅・高さ、ペン色・太さ・スタイル、ブラシ色・スタイルなどの指定に使います。ちょっと余談ですが、vvvvにおいてペンと呼ばれてるのは、主に輪郭であったり、描画対象の本質的要素を指すようです。 "RoundRect(GDI)"の場合は、矩形の輪郭線ですね。で、ブラシっていうのは、その要素内の塗り潰しだったり背景だったりっていう感じです。

各種Spread

"LinearSpread(Spreads)", "TypoSpread(Spreads)", "CircularSpread(Spreads)"とは、なにやら本章のタイトルに関係ありそうなnodeが出てきましたね。 "****Spread"というnode群は、説明が難しいですが、パラメータ違いの同じ図形を複数表示したい場合などに、本来であれば多数の同一nodeを用意しなければならないところを、一つのnodeだけで簡単に処理してくれる便利nodeです。

{picture file=img/wiki_up//vvvv2_2_2.jpg}
"LinearSpread(Spreads)"は指定した幅を等間隔で指定した数だけ区切った数値群を出力します。左pinから順に、基準点、拡がりの幅、基準点の扱い方、位相、分割（複製？）数を指定します。複製処理は、等間隔に一次元的に行われるので、どんなパラメータにも使いやすいでしょう。 x座標について、幅2、複製数5で"LinearSpread(Spreads)"を用いた例です。わかりやすいように、"RoundRect(GDI)"の幅は縮めてあります。

{picture file=img/wiki_up//vvvv2_2_3.jpg}
"TypoSpread(Spreads)"は、二次元的に、文字列を表現するような拡がりを持った数値群を出力します。ここで示した例では、図形の表示位置に"TypoSpread(Spreads)"を適用することで、大量の図形によって文字を表現しています。文字列表示用の"Text(GDI)"を使えば、文字列の集合体でさらに文字列を表現することも出来ます。文字列の長さや含まれている文字の複雑さにも依りますが、'Spread Count'は200くらいから調整していくのが良いと思います。

{picture file=img/wiki_up//vvvv2_2_4.jpg}
"CircularSpread(Spreads)"は、その名の通り、二次元的に円形の広がりを持った数値群を出力するnodeです。大した使ったこと無いんで、突っ込んだことは分かりません。

各種Animation

お次のAnimation系nodeは（半）自動的な動きを付けたいときに使いましょう。

{picture file=img/wiki_up//vvvv2_2_5.jpg}
"Oscillator(Animation)"は、現在値から目標値までの間を振動的に補完します。入力pin左から、目標値、補完にかける時間、一秒当たりの振動数、cyclicとなっています。最後のcyclicがどういう影響を与えるのか今一わかりませんが、挙動が変わるのは確かです。出力pinは、左から順に、補完された出力（位置）、速度、加速度となっています。

"Damper(Animation)"も、現在地と目標値の間を補完するnodeですが、こちらは直線的な補完となっていて、 "Oscillator(Animation)"のようにオーバーシュートすることはありません。入力pinは、左から、目標値、補完にかける時間、cyclicとなっています。出力pinは"Oscillator(Animation)"と同じです。

{picture file=img/wiki_up//vvvv2_2_6.jpg}
ここに示した図は、x軸に"Damper(Animation)"を、y軸に"Oscillator(Animation)"を用いたものです。主な目的は、わかりにくいであろう"Oscillator(Animation)"の挙動を示すことであり、ビヨンビヨンと振動的に目標値に追従していることがわかると思います。 Animation系node全般に言える事だけど、動画で実際に動いているところを見てもらうのが一番わかりやすいんだけどねえ。

"LFO(Animation)"は0から1への鋸歯状波を生成します。周期・位相が設定できるのはもちろん、一時停止、逆走、リセットなども行えます。 vvvvでは、数値で設定するパラメータのほとんどが(0, 1)に正規化されているので、"LFO(Animation)"の出力を改めて整形する必要性が余り無いです。ここらへん、開発者はしっかり考えてるな、と感じます。

その他

{picture file=img/wiki_up//vvvv2_2_7.jpg}
最後の二つはまとめて紹介してしまいましょう。 "HSB(Color Join)"は、色設定に関わるパラメータを入力pinとして持つnodeで、これまでは各図形nodeの'pen color' pinや'brush color' pinで設定していた色設定パラメータをそれぞれ独立して変化させることが出来ます。 "IOBox(Value)"は、右ダブルクリックで出てくるおなじみの数値ボックスのことです。

まとめ

Animation系nodeで至る所にある数値パラメータを動かすだけで、少なくとも初心者にとっては十分すぎるほど面白い映像が作れます。どんどん試して不思議ちゃん映像をガシガシ作って下さいな。ということで、チュートリアル2は不完全ですが（これでも本家マニュアルより頑張ってんだよ）、これにて終了。自分で探求する姿勢が大事なんですよー。