Zenn
💎

データと戯れる vvvv gamma 入門の手引

2022/10/02に公開
.NET
#
shader
vvvv
tech

vvvv gamma とは

概要

  • vvvv gammaは多用途に使えるビジュアルプログラミング環境です。
    公式ページ では下記のようなジャンルに関連性が高いとされています。

    • クリエイティブコーディング
    • ジェネレイティブデザイン
    • インタラクションデザイン
    • コンピュータービジョン
    • VR
    • データサイエンス
    • 機械学習

  • 前述の通り2d/3d/VR などのさまざまな表現を扱うことができます。またArduinoなどのデバイスと通信したり、OSCやMIDIなどのプロトコルも扱うことができます。

  • 制作物は .exe の実行可能ファイルとして書き出すことができます。Executable export

  • 公式ページから無料/登録無しでダウンロードし利用開始することができます。商用利用では有料のツールになっています。

  • 公式サイトは　https://visualprogramming.net

もう少し詳しく

  • 2001年から開発されているvvvvというツールがあり、この次世代版として2020年4月にリリースされたのがvvvv gammaです。vvvv gammaがリリースされたことにより既存のvvvvはvvvv bataと明示的に呼ばれています。
    • それから頻繁にUpdateされており、現時点での最新版はvvvv gamma 2021.4.11です。なおこれがリリースされたのは2022年7月なので、2021だからといって古いわけではないようです。
  • 読み方はなんて読んでも良いと言われていますが、日本ではぶいふぉー ぶいぶいぶいぶい ぶいぶいぶいぶい がんま ぶいふぉー がんまと呼ばれることが多い気がします。
  • vvvv gammaとvvvv bataは共通する概念を多く持っていますが、触り心地はかなり違うように思えます（筆者の感想です）
  • 現時点ではWindowsのPCのみで利用可能です。
  • すでに活用事例もあります。

https://twitter.com/takumanakata/status/1554467660456677377?s=20&t=f7k1GJ8Skd4n6Lyykgv8pg

この記事について

  • この記事では基礎的な概念や名称などを紹介し、公式ドキュメントを読む認知的負荷下げることに徹したいと思います。なので、すべてを網羅することはできないのですが、vvvv gammaを始める一助になれれば幸いです。
  • この記事の内容は私個人の理解の範疇でまとめたものになるので、間違っていることも多々あると思いますがご容赦いただければと思います。
  • vvvv bataの知識は前提としませんが、汎用的に用いられるプログラミングの概念を説明なく用いる場合があります。
  • 筆者が利用しているバージョンは vvvv gamma 2021.4.10 です。
  • 作例はgithub https://github.com/AquaLamp/vvvv_gamma_sample からdownloadできます。

vvvv gammaのダウンロード

  • 公式サイト(https://visualprogramming.net)からdownloadしてください。登録等は不要でダウンロードすることができます。
  • ダウンロードしたインストラーからインストールを実行してください。
  • 追加Librariesを導入の案内がありますが、なくても動きます。

起動と基礎操作

  • 起動すると下記のような画面が出ると思います。

  • Help BrowserのExample Patchesに作例があるので、なにか開いてみましょう。Repelling Circlesなどをクリックすると、パッチ(patch)の画面が出てきます。このパッチを作ってゆくことがvvvv gammaでのプログラミングです。

  • Rendererのウィンドウ上でクリックすると画面に変化が起こります。

  • 基本的な名称は下記のとおりです

  • 新しいNodeを出す場合は、パッチ上の何もない場所をダブルクリックします。

  • Nodeを右クリックするとオプションが表示されます。OPENを選択すると、その処理の中身を見ることことができます。その他は色々できます。

  • パッチ上のこのようなノードは IOBoxと呼ばれ、値を入力したり、押しボタンのようにクリックすることができます。

  • Alt + Shift + a でパッチ内で定義されたProsessNodeやRecode,Classなどを見ることができます

  • パッチを閉じるときはCtrl + wです。保存するかどうか聞かれれますので、任意に選択します。

  • 他のショートカット一覧はこちらです
    https://thegraybook.vvvv.org/reference/hde/keyboard-shortcuts.html

  • パッチの構造はここに詳しく書いてあります。深く考えると沼なので、参考程度と思っておくのが良いような気がしています https://thegraybook.vvvv.org/reference/hde/project_structure.html

  • Group など動的にピンを増やせるノードも存在します。その場合はノードを選択して Ctrl + (+プラス),減らす場合は Ctrl + (-マイナス)です

作例と解説

Rendererに円を表示するだけの作例

  • https://github.com/AquaLamp/vvvv_gamma_sample/tree/master/sample1 の内容です

  • この作例は簡単なので、ゼロから作ってみても良いかもしれません。

  • パッチの上でダブルクリックして、ノードブラウザを開くことができます。上の画像と同じようにノードを出して繋いで見ましょう。

  • 同名で複数のノードがある場合もあるので、今回その場合はGraphics.Skia関連の関連のノードを選びます

  • 完成したらRendererのウィンドウ上でマウスを動かしてみるとCircleの位置が変わります。

  • ちなみにリンクの線を引っ張っているときに、マウスの中ボタンをクリックすると、適したIOBoxが自動的に現れます。このIOBoxで現在の値を見ることができます。

  • ピンにマウスを当てると、流れているデータの種類を見ることができます。この流れを追うことで処理の意味を追うことができると思います。

任意のデータ型のSpreadを扱う

任意のデータ型パッチ（Datatype Patches）

  • 任意のデータ型を作成することもできます。これはオブジェクト指向プログラミング言語におけるクラスや構造体の定義に似ているように思えます。
  • 任意のデータ側はClassかRecodeとして作成します。両方とも、オブジェクト固有の処理(Operation)を定義して、データに振る舞い定義するこができます。
  • ClassとRecodeはほぼ同じようですが、Classを使うとリンク間で流れるデータがおそらくポインタになると思われます。なので、いわゆるポインタ渡しのようなメリットとデメリットが発生すると考えられます。
  • オブジェクトを定義するときはノードブラウザからオブジェクト名を入力して「Node」を選択します
  • 出現したノードを開いて現れた左上の「P」は、現在Prosessであることを示しているので、RecodeかClassに変更することで任意のデータ型を定義することができます。

Spread

  • スプレッドと読みます。vvvv独自の概念です。
    • vvvv betaとvvvv gammaではSpreadの扱いが異なります。
  • Spreadは任意の型を格納する配列のようなものと捉えることができます。
    • vvvv gammaでは型を意識する必要があるため、例えば「Vector2のSpread」や「MyObjectのSpread」ように、何の型を格納するSpreadであるかを意識する必要があります。
  • Spreadのひとつひとつを処理するにはForEatchやRepeatの領域(region)を使う必要があります。
  • 領域(region)はノード群をドラックして選択して、右クリックsurroundから指定します。

作例

  • https://github.com/AquaLamp/vvvv_gamma_sample/tree/master/sample2 の内容です

  • パッチ左上のAddを押し続けるとRendererのウィンドウに円が増えます。Clearを押すと消えるようになっています。

  • Sampleという名前の独自のデータ型のSpreadを取り扱っています。

    • Sample の1つのオブジェクトは下記のパラメータを持ちます
      • Position(Vector2) 現在の位置
      • TargetPosition(Vector2) 目標位置
      • Color(Color) 色

  • 作成したオブジェクトには任意の操作(Operation)を定義することができます。

    • オブジェクト指向プログラミング言語で言うところのインスタンスメソッドだと捉えることができそうです。

  • Createはオブジェクトの生成時に1回のみ実行されることを意図しています。

    • Createの操作の部分はノードやリンクが白くなります。
    • ここではPosition,TargetPosition,Colorにランダムな値を割り当てています。

  • Update の操作では、オブジェクトが生成されたあとUpdateが呼ばれたときに実行されます。

    • PositionとTargetPositionの距離を測定して、一定値より近い場合は新しいTargetPositionをランダムな値で更新するようにしています。

  • Move では、Positionの値をTargetPositionに近づけるように現在位置を更新しています。遠い場合は大きく、近い場合は少なく更新するようになっています。

  • GetPositon GetColor では単純にPosition,Colorの値を取得をしています。

    • これらのOperationはプログラミング言語のGettarのようなものを意図しています。説明のため冗長ではありますが明示的に作ってみました。（updateやmoveの出力とすれば十分という考えもある）

  • ちなみにPadはOperation間で共有できるのでこのように書くこともできるようです。処理内容に変更はありません。

  • ここまでは処理の定義なので、実際に各処理が呼ばれているのはパッチの下記部分です。

  • SampleViewの中ではPositionとColorを取り回していい感じに1Sampleオブジェクト分の描画をしています。

  • Group(Spectoral)で描画結果がとりまとめられRendererに送られています。

  • 仮にこの状態で下記のように Move を呼ばなくした場合、各SampleのオブジェクトはPositionの更新を行わなくなるので動きが停止するように見ます。

    • Updateの処理はPosition(現在位置)とTargetPosition(目標位置)のDistanceが一定値以下であったらランダムな座標にTargetPositionを更新するだけなので、現在位置を動かしているわけではありません。（妥当な設計かどうかはさておき、あくまで作例として見ていただければと思います。）

  • なお余談ですが、RecodeやClassとして定義していても、下記のようにチェックが入っているとProsessNodeとしても利用可能なようです。

    • ProsessNodeとして使った場合、このような書き方でも同様に実行することができました。

任意の条件でオブジェクトを消す

  • ForEachの中で、ノードブラウザからKeepというノードを出現させるとこのようになります。
  • ForEachの中にKeepがある場合は、KeepがTrueにならない場合その回のループ結果が出力に含まれなくなります。これを利用して、寿命の尽きたオブジェクトのDestroyなどを行うことができます。

作例

  • 外周の円の外側に座標が移動するとKeepがFalseになり、そのオブジェクトは次のフレームで処理されるSpreadに受け渡されません。
  • 特段目新しいことはしていなくて、表現の部分で情報量を足しています。
  • このパッチでは処理しているSpreadの数が一定数以下になったとき、自動的にCreateが呼ばれSpreadが足されるようになっています。

その他の表現

3Dを扱う

  • ここまで2dの例を出してきましたが、3dになったらデータ構造上はx,yにzが追加されるだけです。
  • 描画系はStride系のNodeを使うことになります。 https://thegraybook.vvvv.org/reference/libraries/graphics-3d.html
  • Shaderとかでいい感じに遊ぶなどの使い方もできそうす。

fuse

  • GPUを使ったリッチな表現を行うことができるOSSがfuseです。vvvv gamma上で利用できることを念頭に開発されています。shaderコードそのものを書かなくても、高度な表現を実現できそうです。

    https://www.thefuselab.io/

https://github.com/TheFuseLab/VL.Fuse

音を扱う

vvvv gamma はリアルタイムに描画を行っているので、音からリアルタイムに映像を生成するような使い方と相性が良いと言えると思います。
vvvv bataよりは格段にSound周りの処理が拡張されているようです
https://thegraybook.vvvv.org/reference/libraries/audio.html

終わりに

  • すべての概念を説明するには程遠い状況ではありますが、公式ドキュメントを読むための助けになれれば幸甚です。

  • 個人的な感想ではありますが、データの振る舞いを視覚的に表せるのは面白いですし、データとインタラクティブに戯れることで得られる気づきなどがあり、データビジュアライゼーションとかなり相性が良いのではないかと思っています。

  • またオブジェクト指向をビジュアルプログラミングで実現しているというのも面白いパラダイムだなと感じます。

  • vvvv gammaの本を書かれている方もいらっしゃるのでここでも紹介させてください。

https://twitter.com/reiji1020/status/1451220768273014786?s=20&t=LQXCyakrgVUXm-fQQhxG1g

  • なお Twitterには#vvvv_jpというハッシュタグがあって、日本のvvvvユーザーが見ている気がするので、ハッシュタグをつけてつぶやくとレスポンスがあるかもしれません。

Discussion