» jp.Tutorial Spreads
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

jp.Tutorial Spreads

English | French | Russian | Spanish | Italian | Korean | Mandarin

The original english version of this page is newer and may contain information this translation does not have! Click here to view the english version.

このチュートリアルは、既にチュートリアル2のjp.Herr Inspektorを読んでいるものとして進めます。

データを並べる

一人前のパッチャーとして認められるための最終試験を受ける覚悟ができたなら、スプレッドの使いやすさを理解するのが良いでしょう。じっくり読み進めばきっと気に入るはずです。なぜなら、

あるデータ(数値、色、ファイル、テクスチャ、ジオメトリなど)を複数用意したいケースでは、たいていの場合スプレッドの概念を使うことでパッチをとてもシンプルに保てます。

スライスの集まりとしてのスプレッド

まず始めに、スプレッドという言葉自体はリスト(または配列)と何も変わりません。任意のデータのリストを表します。それは数値であったり、文字列だったりします。そしてそれらのリストに含まれる1つのデータのことをスライスと呼びます。

既に気づいているかもしれませんが、ノードの各ピンはvvvvのデータ型(数値、文字列、色、一覧、ノードなど)のどれかに当てはまります。まだ伝えていませんでしたが、全てのピンは保持できるデータが1つだけではなく、データのリスト、つまりスプレッドを保持できます。

スプレッドを作るノード

ピンが持っている値の数は、マウスカーソルをピンに重ねることで確認できます。LinearSpread (Spreads)ノードを作り、出力ピンにカーソルを重ねてみましょう。特に特別なことはありませんね。では、SpreadCountピンの値を5にセットしてみましょう。もう一度ピンにカーソルを重ねると、値の後に(5)という表示が現れました。

このツールチップは、5つのスライスがある中の1つ目を表示していることを表しています。これはとても便利な機能です。スライスの数が5ではなく9874の場合を考えてみてください。ツールチップに全ての値が表示されては困るはずです。とはいえ、もちろんスプレッドに含まれる全てのスライスを見たいこともあるでしょう。前回のチュートリアルは覚えていますか?インスペクターでノードを見ている時、ピンの名前の左にある小さな矢印をクリックすれば、スプレッドの全体を見ることができます。

LinearSpread (Spreads)のように、スプレッドを作るノードは他にもあります。気になる場合は、CircularSpread (Spreads)や、RandomSpread (Spreads)I (Spreads)helppatchesを調べてください。

スプレッドの使い方

もう少し考えてみましょう。5つのスライスからなるスプレッドを持ったピンがあります。 このスプレッドを、別のノードのある入力ピンに接続すると何か起こるでしょうか。これを調べるために、Renderer (GDI)Point (GDI)ノードを作り、それらを接続します。この状態で、+が1つRenderer (GDI)の中央(Point (GDI)ノードの入力ピンであるXYの初期値)に表示されます。次に、LinearSpread (Spreads)の出力をPoint (GDI)ノードの入力ピンXに接続します。

Point (GDI)ノードがスプレッドを賢く理解してくれるのが見えるでしょう。描かれる+の数が1つから5つに増えて、座標のリストを5つ得たことがわかります。簡単でしょう?あなたが点になったつもりで考えてみてください。では、他のピンにスライスの数が異なるスプレッドをつなげるとどうなるでしょう。LinearSpread (Spreads)を複製して、SpreadCountを2にしたものをPoint (GDI)の入力ピンYに接続して反応を見てみましょう。

どうですか?Point (GDI)ノードは入力ピンXに5つの値、入力ピンYに2つの値を受け取りました。ここでは、

  • 1つ目の+を描く時、XピンとYピンの1つ目のスライスが参照される
  • 2つ目の+を描く時、 XピンとYピンの2つ目のスライスが参照される
  • 3つ目の+を描く時は、Xピンの3つ目のスライスが参照され、Yピンには3つ目がないので単純に1つ目のスライスに戻る
  • ...

ということが起きています。これは入力ピンにスプレッドが与えられた全てのノードに共通するルールです。ノードの入力がスプレッドとして認識されないと、2つ目以降のスライスは全て破棄されることになります。ピンがスプレッドとして認識されているかを調べるにはインスペクターを使います。名前の左にある矢印が>ではなく>>になっていればスプレッドとして認識されています。

スプレッドについてのビデオチュートリアルも見逃せませんよ。

個々のスライスにアクセスする

ほとんど全てのノードはスプレッドに対応しているので、普段はスライスの1つ1つを考慮する必要はありません。とはいえ、個々のスライスにアクセスするメリットは当然あります。その上で、 1つ目のLinearSpread (Spreads)から得られる3番目のスライスを手動で扱ってみましょう。下にあるように、SetSlice (Spreads)ノードを追加します。

SetSlice (Spreads)の一番右の入力ピンは、どのスライスを変更したいのかを指定します。スライスの番号は0から数えるので、3番目のスライスを変更したい場合は2を入力します。2つ目の入力ピンはスライスにセットする新しい値です。ここを変化させると、3つ目の+の位置が1カ所だけ動くのが確認できます。

きっと良くできてると思うでしょう。こちらも見てください:

I (Spreads)ノードを通して、SetSlice (Spreads)に3番目のスライスだけではなく、最初から3番目までのスライスを操作することを伝えます。さらに別のLinearSpread (Spreads)に3つの値を作って...

というように、うまくスプレッドを使いこなせばいろいろなことができるはずです。

さらに先へ

スプレッドについて詳しく知りたい場合、GetSlice (Spreads)Stallone (Spreads)Queue (Spreads)Cons (Spreads)helppatchesを見ておくと良いでしょう。
次のチュートリアルは、IOBoxesについて知っておくべきことを紹介します。

anonymous user login

Shoutbox

~4h ago

microdee: @fibo: vvvv is delphi in its core, it just interacts with .NET with com visible objects under the hood. VL on the other hand...

~1d ago

drupal_admin: hello. maintenance reboot at 1am. save your work. back in a few minutes

~1d ago

fibo: lol now AWS Lambda supports C# ... does it mean we will see vvvv cloud version?

~2d ago

joreg: @pdubost great, i'd love to see this in our gallery 24

~3d ago

skyliner: @pdubost: vvvvery good!

~3d ago

gerrit: Any recommendations for interesting / exciting booths at IAA? Any good media installations? Somebody made something with vvvv? Thx

~3d ago

microdee: @matka: nope because the SD card got full and we never received an empty one :(

~3d ago

matka: Do we have recordings of the second part of PBR Rendering workshop at NODE17?

~5d ago

pdubost: latest personal project thanks devs and @mrvux for Box2d :) https://vimeo.com/233756367