vvvv Hello World

さて、前回のnoteでは、vvvvのインストールと、動作確認まで行いました。

今回は、何かしら動くものを作ってみましょう。

題材

基本図形を表示させつつ、将来的にインタラクティブに動かしたいということもあり、マウスを使って中の図形が動くものを作ってみます。

やってみます

まず、基本図形を表示させてみます。

vvvvを起動し、ダブルクリックして、Renderer (EX9) を置いてみます。

置くと、以下のように、真っ黒なウィンドウが出てきます。ここに何かの表示を行うわけですね。

ただ、今は別ウィンドウにせず、vvvvのウィンドウ内(どうやら「パッチ」と言うようですが)で表示させてみます。Rendererをクリックし、Alt+2キーを押すと、vvvvのパッチ内に表示用のエリアが移動します。

あとは表示したい部品を置いていくだけなのですが、Hello Worldということで四角いポリゴンを表示させましょう。
パッチの空きスペースでダブルクリックし Quad(DX9) を選択、Quadの出力端子(箱の下側にあるポッチが出力端子、逆に上側にあるポッチは入力端子ですね)と、Rendererの最左の入力端子をクリック→クリックでつなげてみます。

白い四角が表示されました。はじめての図形表示です。やったね！
ここまでで基本図形の表示ができるようになりました。

ここからは、マウスでのインタラクティブ操作をさせてみたいと思います。
Rendererは、描画領域上にマウスカーソルがある場合、その位置(x,y)を出力端子から得ることができます。試しに値を表示させてみましょう。
値を表示するには、パッチをダブル右クリックして配置した Value というボックスでできます。Valueボックスを2つ並べ、xとyをそれぞれ表示してみましょう。Rendererのxとyは出力の最左の2つです。

また、Valueボックスをミドルクリック(マウスの中ボタンでクリック)すると、接続している要素名が表示されます。

この数字、Renderer上の位置を示しているのですが、その値は±1の間の小数で表されます。Rendererの左下が(x, y)=(-1, -1)、右上が(x, y)=(+1,  +1)になります。xが横方向、yが縦方向を表します。

ということで、次はRendererをもう一つ追加し、1つ目のRendererで取得した(x, y)を使って、その数値の位置で2つ目のRendererに小さい四角を表示してみましょう。小さい四角は、Quadの縦横を0.1倍にしたものとしましょう。
他に使うボックスは、表示する要素のサイズを変更する Scale と、表示する位置を変更する Translate を配置します。具体的には、下図のように配置しました。

この配置にする前は、ScaleとTranslateの位置を逆にしていました。
「小さくしてから移動する」という感覚なら、ScaleしてTranslateする、という流れになると思うのですが、vvvvの場合、Quadに近いところから処理されるようで、 Translate → Scale → Quad の順で接続します。逆に接続するとどうなるか、確認してみるのも面白いです。

で、マウスをグリグリ動かしてみました。上側のRenderer上でマウスカーソルを動かすと、下側のRendererの小さい四角が追従して動いていることがわかります。

…よくよく見てみると、上側のRendererの左右端っこまでマウスを持っていっても、下側のRendererの左右の端っこまでは四角が移動していませんね。
これについては、次回対策してみたいと思います(Aspectが関係しています)。

まとめ

・Rendererに図形を表示してみました。
・マウスでインタラクティブに動かせるものを作ってみました。

Hello Worldとしては、こんなところではないでしょうか。
次回は、違う形や色付けについて何かしてみようと思います。