Spread生成ノードには他にもある。
CircularSpreadは円を描くようにx,y２つの座標値を出力する。
TypoSpreadは入力したテキスト(string)の輪郭を出力。
他にも、RandomSpread,Gaussian,Peak,etc…とある。おそらく汎用的に使用できるのはLinearSpreadぢゃないかな。Typoなんて使用目的が決まってくるしね。
ちなみに左の図はRenderer(GDI)ノードがパッチウィンドウの中におさまっているが、これをするにはWindow状態の描画ウィンドウをアクティブにしてからAlt+2。再びウィンドウ状態に戻すには、Alt+1。フルスクリーンにするにはAlt+Enterで元に戻したいときはもう一度Alt+Enter。
これで基本は終わりかな。まだしばらくDX9を使わずにGDIで実験することになるけど、次は動きのあるものを作って見たいと思う。
よし、今回はSpreadに関して。
大量のデータを処理したい場合どうするか?例えば円を等間隔に5つ作りたい場合。
今まで覚えた分だとCircleノードを5つ用意してGroupノードでまとめてRendererノードに送るのが普通。じゃ100個200個と処理したい場合、この方法ではもうお手上げ。
これを解消するのがSpreadという仕組み。表計算ソフトのことをSpread Sheetっていうけどそれと似たようなもので多量のデータをリストみたいに保持して一度に下流ノードへ渡す仕組み。先のパッチをスプレッドを使用して作ってみる。
どう、すっきりでしょ。Circleノードは一つしかないけどちゃんと5つの円が描かれてる。これがSpreadの仕組み、新しく使用したものはLinearSpread(Spreads)ノード一つのみ、ここから5つの数値データが出力されて以下のノードはインスタンスとして扱われる。CircleノードのInputPinのXへ5つの数値が入ったSpeadが入力されこれを一つずつ処理していく。出力するときに5つのCircleのSpeadとしてまとめたものがRendererに送られ5つの円が描かれる。ちょっと理解するには難しい、もうすこし数値が目で見えるようにしてみよう、いったいLinearSpreadノードからどんな数字がでているのか。では一つLinearSpreadノードを作成する、InputPinは5つ、Input, Width, Alignment, Phase, Spead Countだ。一番分かりやすいのはSpread Countかな、つまり数値を何個出力するかということ。あとは使って見たほうが分かりやすい。初期状態でSpread Countは1になっているのでこれを10ぐらいにしておこう。次にIOBoxを一つ作り先ほどのLinearSpreadノードのOutputを入力する。
これじゃ数値が一つしか入っていないようにみえる、が実際にはちゃんと10個の数値が流れている。それを見るためにIOBoxを拡張表示してやろう。InspektorでIOBoxをみてみよう1Rowsってなっているところを10Rowsにする、んでIOBoxの右下あたりをドラッグして拡げてやる。
10個の数値がIOBoxへ入力されているのが分かる?この数値どうやって出てくるかってと、InputPinの右から1番目のInput(ややこしいな)の値0を中心に2番目のWidthの幅、初期状態では1.0なので0を中心に-0.5から0.5までをSpreadCountの値ぶん等間隔に数値を出力した数値だ。ちょっとややこしいが、Alignmentは今まで扱ってきた数値ではない、InputPinを右クリックすると分かるがメニューがプルダウンするはず。これはどこを基点に等間隔にするか、初期状態のCenteredっていうのはInputの0を中心に、LeftJustifiedは数直線で言うと左端つまり-0.5から、RightJustifiedは0.5から、以上3つのAlignment値はカウントの基点が変わるだけで間隔はどれもWidth/SpreadCountになる。一つだけ違うのがBlockで両端を固定してその間を等間隔にする。実際にはWidth/(SpreadCount+1)の間隔になる。
これでLinearSpreadから出る値がわかったのでCircleノードのInputPin Xにつなげて出力してみよう10個の図形がかかれるはず。
ややこしいねぇ。でもこれがv4の「売り」の部分だと思うので理解は必須やね。
あともう一つ忘れてたLinearSpreadのInputPinにPhaseってのがある。理解しにくいので置いておけばよいが日本語で言うところの”位相”でWidthの周期をもったノコギリ波と見なした位相ってことになる。
次はもっとSpread。
Renderer(GDI)ノードを使った図形描画を覚えたけど一つずつしか表示できない。
これを解消するのがGroup(GDI)ノードだ。複数の図形をまとめて、Renderer(GDI)ノードに送りつける。InputPinのLayer1,2がそれ。
ただ、このGroup(GDI)ノードは初期状態で2つしか入力レイヤがない。これはInspektorを使用して設定が可能。まずは“Ctl+I”でInspektorを表示させてみよう。そしてGroup(GDI)ノードを選択する。
InputPinで設定できるものを含めて他にもいくつか情報が並んでいるのが分かる。全ての(たぶん)ノードに共通なDescriptive Nameはノードにラベルをつけることが出来る。ノードが増えていくとどのノードが何の働きをしているのか作った本人でさえ分からなくなる、分かりやすいコメントor名前をつけておくとよい。
で本題、Groupノードの入力レイヤの数を増やすにはどうするか?Inspektorを見るとLayer Template Countってのがどうやらそれらしい。これに今2が設定されているがこれを左ダブルクリックして値を適当に増やして変更してみる。とGroupノードのInputPinが増える。これでもっとたくさん図形を表示させることが出来るようになる。
InspektorはInputPinで設定できない設定をすることが出来る。Inspektorでしか設定できないってのはどういうことかてと、パッチが動作中リアルタイムで変更することができないもので、例えば先のGroupノードの入力レイヤ数はパッチが動作中に他のノードの値を受け取って変更することは出来ない、ということ。
次回はv4の真髄Spreadの設定。
今回はRenderer(GDI)ノードを使ったグラフィック描画について。
GDIってのはGraphic Device Interfaceといって、アプリケーションとディスプレイやプリンタの仲介役みたいなやつ。よく知る必要はないのでv4ではグラフィック描画(簡易版)だと思っておくコトにする。もちろんDirectXを使用しての3Dグラフィック描画をするノードもあるがそれは後回し。
どれ位簡易版かっちゅーと。2Dに画面に線を引いたり、点を打ったり、円を描いたりって感じかな。
じゃあまず、新規パッチを開いてRenderer(GDI)ノードを一つ作る。
パッチウィンドウに長〜いノードが一つ出来る。そして背景が黒いウィンドウが開かれるね(サイズはとりあえずこのまま置いておく)。このウィンドウに図形を描画して行く。どうやって描画するんだっていうと、Renderノードの一番左端のInputPin、Layersって名前のピンに図形情報を送ってやらなければならない。
図形情報を送ってみよう。Circle(GDI)ってノードを一つ作る、名前通り円を描くノードだ。このノードのOutputPinのLayerをRenderノードのInputPinのLayerに繋ぐと、円の出来上がり。
ただこれヒシャゲちゃってるね。もちろん楕円を描いたのではない。試しにCircleノードの3つのOutputPinをマウスオーバーさせると設定可能項目がでる、左からX,Y,Rでつまりx,y座標での位置と半径Rが設定できるだけで楕円な訳ではない。
じゃあ何故ヒシャゲてる?実はグラフィックが描画されているウィンドウの座標の取り扱いにちょっとした決まり事があるそれは、
原点は描画ウィンドウの中心にあり、ウィンドウのx,y軸両方とも-1.0から1.0の間で表記するってこと、普通ならウィンドウの左上端を原点にx方向(画面左方向)へ何pixel、y方向(画面右方向)へ何pixelっていうけど。
なのでできたての描画ウィンドウは400x300pixelの4:3の大きさ、なので縦にひしゃげた見え方になる。もちろん、ウィンドウサイズを正方形にすれば解消できるが、それだけぢゃぁ困る。
でどうするか。Renderer(GDI)ノードの一番右のInputPin’Viewport matrix transformation’ってノードにスクリ−ンアスペクトを調整する行列を入力してやる。ちょっとムヅイけどやり方は簡単、AspectRatio(Transform)ノードをつくりそのOutputPinを先ほどのInputPinへコネクトしてやる。でもそれだけじゃ変わらないのでAspectRatioノードのAspect WidthとAspect HeightのInputPinをそれぞれ3,4に設定しておく。描画ウィンドウの比率を縦横逆にしていれてやればよい。横の図では分かりやすくする為IOBoxを使って設定しているがもちろんInputPinを右クリックor右ドラッグして変更して構わない。これで正円が描画される。
でも描画ウィンドウのサイズ(比率)をかえてしまうとまたひしゃげるので別の方法で対処する必要がある、けどまた後に。
いまのところはRenderノードには一つずつしか図形をコネクトできないんで、Circleノードの接続をはずして別の図形も描いてみよう。
他にカテゴリGDIで表示すると色々あるのが分かる。(カテゴリ表示は空ノードを作った直後に右クリック)
てな感じで終了。次はたくさん図形表示とInspektorノード
数字が入るノードばかり作ってても仕方が無いので他のノードも出してみよう。
IOBox(ValueAdvanced)は右ダブルクリックで作れるけど、他はどうやって作るか?
左ダブルクリック!、そうすると何も入っていないグレーの箱が出来るはず、そこにすかさず”+”と打ち込んでみよう。すると、メニューがプルダウンするはず。最初は+(color)が選ばれているはずだけど、これはちょっと置いておいて、少し下にある+(value)をカーソル移動で選択してEnterキーを押そう。”+”ってノードが出来るはず(これ一般にオートコンプリート機能っていうヤツ)。InputPinが2つOutputPinが1つ、もちろんこれは2つの数字(Value)を足し合わせて結果を出力するノードだ。IOBox(ValueAdvanced)以外のノードはこうやって頭文字を何文字は入力して選択って感じでつくるのが一般的。
ちなみに最初に選択されていた+(color)は色同士を足し算するノード。
+(Value)が出来たので計算するパッチを作ってみよう。もう簡単、IOBox(ValueAdvanced)を3つ作って、+(Value)にコネクトするだけ。最初は0+0になるので、もちろん結果は0。上流2つのIOBoxの値を変えれば結果のIOBoxも変化するでしょ。
じゃもちょっと、複雑な計算をさせてみる例えばこんな感じ。
(8+9+6)*3/2
って計算。乗算とか割り算のノードはどうして出すんだと。これも単純に左ダブルクリックしてから”*”とか”/”をタイプするだけ。ただし計算したいのは数なので(Value)ってノードをつくる事。後は必要な数だけノード作ってコネクト、以上、出来上がり。
このように結果を次のノードに渡しながらパッチプログラムは実行されていく。
ノードの名前がわかってないと作れない訳ではない。ノードのつくり方は他にもあって右ダブルクリックして空のノードを作った後、更にその上で右クリックするとアルファベット順にノード名のリストがずらっと並ぶのでそこから選択してもいいし、そのリストからマウスを左にズイッとずらすと今度はカテゴリ別にリストされたメニューが出てくる。マウスホーイルでスクロールさせると結構な数ある、名前からでもノードの働きが分かるものもあるでしょ。
ただ困ったことに、作りたいノードを選択してクリックしたはずなのにきちんとノードが作れない時がちょくちょくある。背景がグレーにならないやつがそれ。これは残骸です、Deleteで消してからも1回選択するかそれでもダメならノードの名前を覚えておいてオートコンプリートで作ろう。でも残骸にもちょっと役割が合ってコメントとかメモとかに使う事が出来る。でも、明示的に作る方法がよくわからない、、、
あと、この期に及んでv4のメニューの出し方、マウス中クリックでクワッドメニューがでる。保存とか終了もここに入ってるがあんまり使う事がないと思うので、まぁおいおい見ていくことにする。ちなみにマウス中ボタンがない時はSpace+マウス右クリック、Spaceキーを押してから少し遅れてから右クリックすると出しやすい。
次回はグラフィック。