基本的なCGを作ってみよう

五角形を表示させてみる

前章ではRendererに文字列を表示してみました． それでは，次は(よりCGっぽい)図形を表示してみましょう． 前章の要領で，Renderer(EX9)を配置します．

次に，GridSegment(EX9)ノードを配置します．

GridSegment(EX9)は三角形〜円までのn角形を簡単に描画する事の出来るノードです．それではこのGridSegmentのOutputピンをRendererピンにくっつけましょう．

五角形が表示されました．2つのノードを使うだけで五角形が描けちゃいます．

五角形をいじってみる

五角形を回転させてみましょう． CGの回転や縮小など，形状変化に関する操作を行うときはTransformというノードを使用します，Transformノードには複数種類が存在し，

• 2d: XY軸に沿った回転・拡大縮小．X軸方向の値，Y軸方向の値を別々のデータで管理
• 2d Vector: 機能的には上と一緒．ただしVector型でのXY指定が必要
• 3d: XYZ軸に沿った回転・拡大縮小．X軸方向の値，Y軸方向の値，Z軸方向の値を別々のデータで管理
• 3d Vector: 機能的には上と一緒．ただしVector型でのXYZ指定が必要

ノードのOutputデータの中にはVector形式で結果が返ってくるものもあるので，使用しているノードが出力するデータ型に一致したTransformノードを選ぶと良いでしょう． 今回はTransform(2d)を選んで配置します．

Inputピンでは，それぞれCGが表示される場所やCGの大きさを指定することができます． 試しにScaleXの値を変更してみましょう．ScaleXの値を1.0から2.0に変更してみてください．

X軸方向に2倍の大きさになりました！

また，GridSegment(EX9)のInputピンの値を変更することで，五角形そのものの形を変更することができます． GridSegmentのInputピンの中からInnner Radiusというピンを探し，ここの数値を0.5にしてみてください．

五角形の中に穴が開きました！

マウスイベントを追加してみる

CGとマウスイベントを連携してみましょう．いきなりマウスイベントで怯むかもしれませんが，vvvvではマウスイベントの取得及びCGとの連携は非常に簡単です！

まずMouse(Device Window)を追加します．このノードはPCに接続されているマウスのクリックやスクロール等のイベントを取得し，vvvvで使用できるようにしてくれる便利ノードです．

これでvvvv内にマウスの入力を持ってくることはできました．

マウスイベントとCGを連携する

次にCGとの繋ぎこみをやっていきましょう．

同じ要領でHitTest(2d Circle)というノードを追加します．HitPoint(2d Circle)ノードはMouseノードから渡されてきたマウスポインタの座標データを中心に任意の半径の円を描き，この円の範囲を当たり判定とするような処理を行うノードです．また，このHitTestは配置するだけでRendererの中身と紐づき，Rendererの中に表示されているオブジェクトに対し当たり判定を持ちます．

マウスが五角形に触れた時の処理を書いてみましょう．以下のようなパッチを組んでみてください．

それぞれ，

• Switch(Value Input): 入力された値が0.5以上であった場合，3つめのInputピンの値(ここでは1.0)を出力する．0.5以下であった場合．2つめのInputピンの値(ここでは2.0)を出力する．
• Damper(Animation): 前フレームとの値と現在のフレームの間で数値に変更があったとき，2つの数値の間の連続値を算出して出力する．このノードにより滑らかなアニメーションが実現できる．

以上の役割を担います．

ここまでプログラムを組めたら，五角形が表示されているRendererの画面にマウスポインタを持って行ってみましょう． マウスポインタが五角形に触れたとき，五角形がくるくると回るアニメーションがついているはずです．

ここまでが基本的なCGの作成方法でした． 次章ではこのCGを改造して，もっと面白いCGにしていきましょう！