16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

VVVVAdvent Calendar 2014

Day 6

vvvv では常に Spreads を意識しよう

Last updated at Posted at 2014-12-05

この投稿は「VVVV Advent Calendar 2014」の6日目の記事です。

##Spreads とは
vvvv の特徴として**「Spreads」という概念があります。
これは配列のようなイメージのデータの集合です。
数値、ベクトル、カラー、テクスチャ、行列などを
「一連のデータ」**として扱えます。
Spreads は非常に強力な仕組みで、色々な表現を簡潔に記述できます。
Spreads を使いこなしてこそ vvvv らしいパッチだと言えるでしょう。(僕が使いこなせているとは言っていない)

##例
四角形を2つ描画しています。
01.JPG

###(1)単純に2つ並べた。
vvvv に慣れていないと力技でこのような書き方をすると思います。
###(2)位置、サイズ、色を Spreads にまとめた。
Transform、Quad ノードが減りました。
Spreads を使うとノード数が減り、それはすなわち生産性とメンテナンス性の向上です。
###(3)位置の Spreads を LinearSpreads を使って楽に生成。
Spreads を生成してくれるノードもあります。ここでは LinearSpread ノードを使って、4つの X 座標を生成しています。
ここで生成される X 座標が4つなのに対し、サイズや色の Spreads は2つのデータのみです。
このようにノードの入力スライス数が等しく無い場合、ノードの結果の大きさは、一番数が大きいものに合わせられます。
少ないものは、要素数を超えたときにはまた先頭から繰り返し値が参照されます。
この例だと、
位置(4つ): -0.6, -0.2, 0.2, 0.6
サイズ(2つ): 0.3, 0.5, 0.3, 0.5
色(2つ): 赤、青、赤、青
となり、位置データの4スライスに合わせるために、2スライスのサイズデータと色データが2回繰り返されています。

Spreads 生成系のノード

LinearSpread 以外にも Spreads を生成してくれるノードはたくさんあります。
カテゴリで言うと**「Spreads」カテゴリ**内にたくさん入っています。
例えば、

02.JPG

これだと、左から、
###CircularSpread
円形になるように X,Y 座標を生成
###TypoSpread
文字に沿うように X,Y 座標を生成
###Cross(2d)
二つの Spreads を組み合わせて 2次元的な Spreads を生成しています。
この場合、5x6 の X,Y 座標を生成しています。
###GaussianSpreads
GaussianSpreads はガウス分布に従って値を生成してくれます。
これと Cross を組み合わせると、上の画像のようになります。

##休憩
Spreads は値を生成するので、もちろんそれに Damper をはさむ事なども出来ます。
そうすると、こういったひょこひょこした変化も簡単に作れますね。

03.gif

こんな感じ。

また、vvvv のノードの入出力は基本的に Spreads に対応しています。
なのでテクスチャを Spreads にする事などももちろん可能です。

06.gif

こんな感じ。

##スライス の選択
**「ある条件のスライスを取得する」**というやり方が分からなくて、似たようなノードが大量にコピペされているパッチをよく見かけます。
そういった時は Select ノードを使えばすっきりします。
04.JPG
###(1)
選択されているスライスのインデックスを取得しています。
###(2)
0.1 以上のスライスの値とインデックスを取得しています。

##データの集合の保持
いくつかの値をまとめて保持したい場合。他の言語でいう構造体的なものを扱いたい場合。
少し生データを扱う感じになってしまいますが、シェーダで言う頂点データ定義のような考えで、データ集合を保持する事が出来ます。
主に**「Cons」「Unzip(Bin)」「Queue」**ノード辺りがミソになってきます。
これの例として、下のような表現をするためのチュートリアル動画をアップしました。

動画はこちら。【vvvv講座】チュートリアル:Spreads を使ってデータ集合を保持しよう
このパッチファイルはこちら。https://github.com/yhyjp/vvvv_tutorial/blob/master/Tutorial_Kurumi.v4p

05.gif

**「Cons」で位置、色、サイズ情報を繋ぎ、「Queue」にデータを貯め、「Unzip(Bin)」**で復元、という流れが主に伝えたい所です。
Spreads を出来るだけ使っている動画です。

##最後に
Spreads は非常に強力で、vvvv の大きな魅力の1つです。
vvvv において、重複する部分が出てきた場合は必ず Spreads にして簡潔に記述する事が出来ます。

vvvv でパッチを作る時の心がけとして、
コピーする前に Spreads で表現できないか考えてみよう。
たまにパッチ全体を見て Spreads に出来る所が無いか探そう。

Spreads を使って重複を減らしましょう。
ノードを減らせるという事、それはすなわち生産性とメンテナンス性の向上です。

以上。ばいばーい。

16
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?