prev. +::::+ index +::::+ next

チュートリアル1 - Hello World （こんにちは世界）

Rendering （描画）

ここから以降、パッチの説明にnode名が出てきます。 node名は"Renderer(GDI)"のように、" "で囲みイタリック体で表記することにします。 また、pin名は'Background Color'のように、' 'で囲むことにします。

それでは最初のパッチ作りに入りましょう。 まずは左ダブルクリックで空nodeを作りましょう。 nodelistから選ぶのも良し、直接node名を入力しても良し、 何は無くとも"Renderer(GDI)" nodeを作成しましょう。 GDI RENDERERという名前のウィンドウが開いたはずです。 これが描画領域になります。 ここでAlt+2とすることで、元のパッチウィンドウ上に描画領域が収納されます。 単一のウィンドウ上にパッチと描画領域が表示されてコンパクトに作業が進められますね。 描画領域を独立なウィンドウに戻したい時は描画領域を選択した状態でAlt+1としましょう。

描画領域の背景色を変更するには"Renderer(GDI)" nodeの左から四つ目の入力pinを使います。 'Background Color'という入力pinがそれですね。 このpin上で右クリックすると、Color Fieldというものが出現します。 このColor Field上で右ドラッグすることで背景色を変更することが出来ます。

• 上下方向 - 明るさ
• 左右方向 - 色相
• 右ドラッグ中Ctrlキー（上下方向） - 彩度

Interaction （相互作用）

ただ文字列を表示するだけではつまらないですね。 そこで、ちょっとだけインタラクティブな感じにしてみましょう。 描画領域y軸方向のカーソル位置によって文字の大きさが変わるようにしてみます。 描画領域は常にマウスのxy座標と各ボタンのクリック状態を出力しているので、カーソル位置を取り出すのはとても簡単です。 描画領域上の座標は(-1,1)の範囲内なので、 これをそのまま文字の大きさに割り当てても見えないような小さな文字にしかなりません。 マイナスの値を持つのも良くないですね。 そこで"+(Value)", "*(Value)" nodeを使って、 文字サイズとして適当な数値の範囲に修正しましょう。 "+(Value)"というように、"+"の後に(Value)と付いているのは、"+"にもいくつか種類があるからです。 数値計算に使えるのは(Value)が付いた"+"だけなので注意してください。 こんな風に、扱えるデータによって同名のnodeがいくつもあったりしてややこしかったりするので気を付けましょう。

サンプル画像で行っている計算を手順に沿ってまとめると下の表になります。 カーソルが描画領域下端にある時の文字サイズは10、上端にある時は110になります。

処理手順	値域
描画領域から得られたy座標	(-1, 1)
+ 1	(0, 2)
* 50	(0, 100)
+ 10	(10, 110)

描画領域上でマウスを動かすと文字の大きさが変化したら成功です。おめでとう。
チュートリアル1 - Hello World （こんにちは世界）はこれにて終了。

prev. +::::+ index +::::+ next