見出し画像

vvvv gamma入門 - 2

vvvv入門の2回目です。
前回の記事はこちら。

シーンにオブジェクトを追加する

前回のパッチを少し修正していろんなプリミティブな3Dオブジェクトを置いてみます。

RootSceneノードには子要素を設定するピンが複数あります。こちらにBoxを置いてみます。

RootSceneのChild2ピン
BoxノードをRootSceneのChild2に繋げる

するとこのような見た目になりました。Boxは置かれましたが…おっと、ライトがないので真っ黒です。

真っ黒なBox

そこでSkyboxLightノードというものを置いてみます。ただし、RootSceneノードにはもう子要素を繋ぐピンがありません。
実はノードによってはピンの数を増減させることができます。ピンの数を増やすにはRootSceneノードを選択してCtrl++を押します。
するとChild3ピンが現れるのでそこにSkyboxLightノードを繋ぎます。

RootSceneノードのChild3にSkyboxLightノードを繋ぐ

レンダリング結果はこのようになりました。

シーンがライトに照らされました

ちなみにピンの数を減らすにはCtrl+-です。
キーボードショートカットの詳細はこちらにまとまっています。

シーンに配置するオブジェクトはこの様にGroupノードでまとめることもできます。GroupノードのChildピンも増減できます。

Groupノードを使用した例

オブジェクトをアニメーションさせる

追加したBoxに動きをつけてみましょう。
ここでは簡単のため、その場で回転するだけにします。
Rotateノード、Vector(Join)ノード、LFOノードを使用してこの様にBoxノードに繋げます。

BoxをY軸で回転させる
Boxが回転する

vvvvでは(betaの時代から)何かをアニメーションさせる際にはその動力源としてLFOノードを良く使用します。(LFOはLow Frequency Oscillatorの略。)

また、Vector3やRGBAといったデータの一要素(今回の場合はVector3のY軸)だけに何か変更を加えたりする場合に、Split系のノードで要素に分けて、何か変更を加えた後にJoin系のノードまた元のデータ型に戻すというのも大変よく使うイディオムなので覚えておきます。

SplitしてJoinの例

さらにオブジェクトを追加する

Boxを増やしてシーンをにぎやかにしてみます。
Boxの位置が重なってしまうのでTranslateノードを追加して位置をずらしています。
新しく作ったBoxノードはGroupノードのChild3に繋ぎます。(ピンを増やすのをお忘れなく。)

Boxをもう一つ追加
双子のBoxes

Operationで処理を共通化

ここでプログラマー気質の方なら既に気になっているかと思いますが、同じ様なノード構成が2つ出てきました。
同じ様な処理なら共通化できないのでしょうか。
プログラムで共通処理を再利用可能にするには関数にまとめたりしますが、vvvvではOperationというものが関数に当たります。
Opeationを定義するには以下の様にします。

まず、ノードブラウザーでOperationを探してクリックします。

Operationを探す

すると、Operation定義用のRegionが配置されます。
vvvvではこの様なパッチの他の領域と隔てられた領域のことをRegionと呼びます。

Operation Region

Operationと書かれている部分をダブルクリックすると任意の名前を付けることができます。ここではMoveとしました。

Moveにリネーム

OperationにはInputとOutputを設けることができます。
それぞれノードブラウザーでInput/Outputで検索すると見つかるはずです。
位置指定とY軸の回転角度をInputで受けて移動/回転させた結果をOutputにしています。
Regionにノードを出し入れするにはCtrlを押しながらノードをドラッグします。

Move Operation

これでOperationの定義が終わりました。
このOperationを使用するには、ノードブラウザーでOperationを検索します。
この場合、Main > Moveにあるはずです。Operationを定義したのがMain(最上位のパッチ)の中だからです。

ノードブラウザーでMoveを検索

Moveノードにはちゃんと定義した通り、PositionとRotateYのInputピンと処理結果のOutputピンが備わっています。
Moveノードで先ほどのBoxの移動処理を置き換えると、この様にコンパクトになりました。

Moveノードを使用

コンパクトになったもののまだ似たようなノードが2組並んでしまっています。
LFOノードやBoxノードまで含めてOperationにまとめられないの? と思うかもしれません。実際にやってみるとこの様に警告が表示され、うまく動きません。

期待通りに動作しないOperation

実はOperationは状態を保持することができません。状態を保持することができないとはどういうことかというと、わかりやすいのはLFOノードです。
LFOノードはリアルタイムで刻々と変化する数値を保持しています。
Operationの警告文にもあるように、Operationノードは実行されるたびに初期化されるので、LFOノードの数値がその度にリセットされてしまい正常に機能しません。
詳しくはOperationのリファレンスを参照してください。

この様な制約のため、Operationはちょっとした便利関数みたいな用途で使用するのが良いかと思います。

Processを使う

さて、状態を保持できないOperationを超えてさらに一歩進んだ再利用可能なモジュールを作成するにはProcessを定義します。
Processとは自作のノードを実装する場合に最も良く使用するもので、Operationの様な状態が保持できない等の制約はありません。

Processを定義するには以下の様にします。
ノードブラウザーでProcessを検索して配置します。

Processを検索

Processが配置されます。ダブルクリックして任意の名前に変更します。

Processの定義

ここではMovingBoxとリネームしました。

MovingBoxにリネーム

Processを右クリックしてOpenをクリックするか、 マウスの中ボタンを押してProcessを開きます。

開いたProcessの中に、先ほどまで使用していたBoxノード関連のノードをコピー&ペーストします。

MoviegBox内にノードをコピー&ペーストする

Inputを追加してPositionという名前にし、Translateノードに繋ぎます。Outputも追加して、Boxノードを繋ぎます。
これで任意の位置に回転するBoxを配置するノードができました。

MovingBoxノード

親のパッチに戻ってノードブラウザでMovingBoxノードを検索し、今までのBoxノードと置き換えます。

MovingBoxノードを使用

いい感じにコンパクトになりました!
vvvvではこの様に自作のノードを作成してパッチをきれいに保ちながら開発を進めることができます。
ノードを作って使い回すことで開発効率も上がっていきます。
どんどん便利なノードを作成していきましょう!

今回はここまでです。
次回は今回使用したProcess関連のトピックについてもう少し掘り下げた内容を書く予定です。
個人的にはその辺りがvvvvの鬼門かなぁと感じております。乞うご期待!

もしこの記事があなたのお役に立てたなら幸いです。 よろしければサポートをお願いします。今後の制作資金にさせていただきます!