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

このチュートリアルは、見る人がvvvvを全く知らないものと仮定しています。チュートリアルを完了するために覚えるべきことは一つずつ説明しながら進めます。ただ、途中でvvvvのユーザインタフェースについて詳しく知りたい場合もあるでしょう。何かわからない点があればユーザインタフェースの詳細ページ（The User Interface in Detail）を見てください。ここに戻ってくるのをお忘れなく！

いよいよ始まります

vvvvを起動するとグレー色のウィンドウが現れます（そうでなければ、まずIntroductionを見てください）。あなたにクリックやドラッグをしてもらうのを待っているボタンやメニュー、スクロールバーはどこでしょう？実は、既にここにあるんです。

メインメニュー

マウスの中ボタン（中ボタンが無い場合はSPACEキー＋右ボタン）を押すとメインメニューが開きます。普段使う内容は全てここで見つかります。

CTRL＋Pキーを押して新しいパッチを作ると、パッチの左上がぴったりマウスカーソルの下に来ていることに気づくでしょう。これはクリック＆ドラッグでパッチをスクリーンの好きな場所に移動できるので便利です。

ノードの作成

次にパッチの好きなところで左ダブルクリックをしてみましょう。空のBOXの中でテキストカーソルが点滅し、作りたいノードの名前を入力するのを待機する状態になります。でも待ってください。まだノードの名前を知りません。きっと、あなたは全てのノード名のリストを見たいはずです。空のBOXの中で右クリックをしてみましょう。お望みのリストがアルファベット順で現れます。スクロールホイールがある場合はリストをスクロールできますし、スクロールバーを表示しても同じことができます（SPACEキーを押すとスクロールバーを強制的に表示します）。ノード名にカーソルを当てると、（たいていの場合は）何ができるのかを説明する短い文章が表示されます。

マウスをノードリストの外まで左に動かすと、別のリストが現れます。これは同じノードですがカテゴリ別になっています。Valueカテゴリへスクロールし、+ (Value)ノードをクリックしましょう。+ (Value Spectral) ?ではないので注意してください。

ビデオチュートリアル（Video Tutorial）もご覧下さい。

ノード名とカテゴリ

ノードの名前はいくつかのパーツに分かれています：
ノード名（カテゴリ バージョン１ バージョン２ ... バージョンN）
バージョンはオプションですが、全てのノードには名前に続いてカテゴリ名が括弧の中に割り当てられています。これによって複数の＋という名前のノードが、異なるカテゴリに同時に存在することを実現しています（例えば、+ (Value), + (String), + (Color) など）。

正しいノードを作れたかをノードの上にカーソルを当てて確認してください。ツールチップが現れてノードの名前を示してくれます。どのノードもノード上でクリックし、ドラッグすることでパッチの別の場所へいつでも移動できます。

ではカーソルをノードの入力ピンへ動かして値を見てみましょう。どちらも0になっており、これが初期値です。入力ピンの値は右クリックで変更できます。新しい値を入力し、Enterキーを押してください。もしくは入力ピンの位置で右クリックをしたまま上下にドラッグしても値を変更できます。入力値を変更すると、出力ピンの値がそれらを足した結果になっていることがわかります。

IOBox

入力／出力値を簡単に扱うには、値の入力と表示を行うIOBoxを作ると良いでしょう。パッチの好きな場所で左ダブルクリックをし、右クリックでノードリストを表示したらIOBox (Value Advanced)という名前のノードを探してクリックしてください。このノードはよく使うことになるのでノードを作るショートカットを知っておくと良いでしょう。パッチの好きな場所で右ダブルクリックをしてみてください。いかがですか？

ノードの接続

IOBoxを+ (Value)ノードと接続するために、マウスカーソルをIOBoxの出力ピンへ動かして左クリックをしてください。接続できる全てのピンが大きくなったことに気づくはずです。パッチの好きな場所でクリックすれば折れ線でつなげることもできます。最後に、カーソルを+ (Value)ノードの入力ピンに重ねてクリックします。反対に、入力ピンから出力ピンへ接続することもできます。

ビデオチュートリアル（Video Tutorial）もご覧下さい。

接続を始めた後に右クリックすればキャンセルできます。2つのピンの接続を解除するには、それを（左クリックで）選択して右クリックするかDELETEキーかBACKSPACEキーを押します。

IOBoxの値を変更するには、ピンの値を変更するのと同じ方法になります。IOBoxの中でマウスの右ボタンを押したままドラッグします。IOBoxやピンの値をデフォルトに戻したい場合はカーソルを重ねてALTキーを押しながら右クリックをします。

ここでちょっと休憩しましょう。すぐに戻って来てくださいね！

レンダリング

今まで学んだ内容でどうすればhello worldを表示できるのかと聞きたくなるでしょう。まだそこまでたどり着いていませんが、今は先に進んでください。どんな出力結果を見るにもrendererノードが必要です。vvvvにはいくつかのrendererノード（＝それぞれが異なる種類のデータをビジュアライズ／描画する役割を持つ）があります。今回はRenderer (GDI)を使います。

先に行っておくことがあります。既に作りたいノードの名前が解っている場合は、単純にパッチ上でダブルクリックした後に名前を入力してください。入力した文字で始まるノードの一覧がプルダウンメニューで表示されます。作りたいノードの名前がハイライト表示されたらEnterキーを押してください。もしくは上下キーを使って目的のノードをハイライトすることもできます。

Renderer (GDI)はウィンドウとセットになっているノードの一つです。ノードを作ると、ウィンドウが現れます。（下のスクリーンショットのように）ウィンドウをボックスとしてパッチの中に収めるには、ウィンドウがアクティブになっているのを確認してALT+2キーを押します。これでrendererがパッチの中にちゃんと収まりました。ALT+1キーを押せば、rendererをウィンドウモードに戻すことができます。

rendererの背景色を変えるために、Background Colorという名前の入力ピンを探し、右クリックをしてカラーフィールドを表示してください。このカラーフィールド内では、

• マウスの右ボタンを押したまま上下にドラッグで明るさの変更、
• 左右にドラッグで色相の変更、
• CTRLキーを押しながらドラッグをして彩度を変更できます。

パッチのどこかをクリックすると新たな色が適用されます。

rendererに何か文字を表示するには、Text (GDI)ノードを作りrendererに接続します。ノードの入力ピンにカーソルを重ねてTextという名前のピンを探してください。そこで右クリックし、hello worldと入力してください。まさにhello worldというフレーズを入力するのは、このチュートリアルをきちんと理解する上で重要です。これはプログラミングの歴史的な背景によるものなので、細かいことは気にしないようにしましょう。

では、‘Font’というピンを探して、右クリックでシステムにインストールされた全てのフォントのプルダウンメニューを開きます。ここでは歴史を気にしないで好きなフォントを選びましょう。Lucida Consoleあたりが良いでしょう。

インタラクション

最後に簡単なインタラクションを加えましょう。文字のサイズをマウスの縦方向の動きに連動させて、さらに最小サイズを15に、最大サイズを50にしてみましょう。頑張って！

マウスの位置はrendererが常にマウス座標を出力しているので簡単に取得できます。この値はピクセル単位ではありませんが、常に左下が (-1, -1)で、右上が (1, 1)になっています。

マウスのY座標をそのまま文字のサイズに割り当てると、1以下のサイズは文字が見えなくなってしまうので得策ではありません。もっと広い範囲で文字サイズを変更できたほうが魅力的な結果になります。そこで、rendererのYピンの出力値（-1から1）の範囲を、15から50の範囲に広げることにしましょう。

このように値の範囲を広げる（マッピングと呼ぶ）は、Map (Value)というノードで簡単に実現します。新たにノードを作らなくても、必要のなくなった+ (Value)ノードをダブルクリックして新しいノードの名前を入力すれば変更できます。ここで、+ (Value)とMap (Value)はどちらも出力ピンの名前が同じなので、IOBoxとの接続は保たれたままになります。

それでは、rendererのYの出力をMap (Value)の左端の入力ピンにつなげて、Map (Value)の出力ピンをText (GDI)のSizeピンに接続します。

Map (Value)に必要なマッピングをしてもらうには、入力ピンを以下のようにセットします：

• Source Minimum（元の最小値）： -1
• Source Maximum（元の最大値）： 1
• Destination Minimum（変換後の最小値）： 15
• Destination Maximum（変換後の最大値）： 50
• Mapping（マッピング方法）： Clamp（両端で制限）

renderer内でマウスを上下に動かすと、文字のサイズが15から50の範囲でインタラクティブに変化するはずです。

さらに先へ

これで腕試しは終わりなので、一息つきましょう。もう少し続けたい場合は、GDIカテゴリのその他のノードを使って遊んでみたり、それらのヘルプパッチ（helppatches）を見てみましょう。

ユーザインタフェースの詳細ページ（The User Interface in Detail）も忘れずに見てください。ここでは、パッチングをより素早く、直感的に行うための様々なトリックを学べるはずです。

さらに、もう一つのhello worldチュートリアル（alternative 'Hello World' tutorial）や、さらに進んだもの（more advanced）もビデオチュートリアルの中にあります。

このチュートリアルで学んだことに自信を持てたら、2つ目のチュートリアルであるHerr Inspektorへと進んでください。