Exercise 3

演習３センサーとインターポレータ

アニメーションを作ってみよう

文法上の詳しい説明は
VRMLの文法の
◆センサーノード
◆インターポレータノード
◆センサーとインターポレータの例
を参照してください。

　演習２で作成したファイルにセンサーノードやインターポレータノードを追加してアニメーションを作成してみましょう。

サッカーボールを回そう

　TimeSensorノードとOrientationInterpolatorノードを加えてサッカーボールを回転させましょう。

人形とはちまきとサッカーボール全体をグループ化(Transformノードのchildrenフィールドに入れる)しておきます。
サッカーボールを回転させるので、サッカーボールのノードにDEF文でBallと名前を付けます。後のROUTE文で使用します。
サッカーボールの回転の速さをコントロールするためのTimeSensorノードを追加します。DEF文でBalltimeと名前を付けています。cycleIntervalフィールドでは周期を 4.0 秒と設定しています。周期のデフォルト値は1です。loopフィールドをTRUEにするとTimeSensorは繰り返し周期的な時刻を送り出します。デフォルト値はFALSEです。
サッカーボールの回転の角度を計算するためのOrientationInterpolatorノードを追加します。DEF文でBallrotationと名前を付けています。keyフィールドに1周期分の時刻の変化、keyValueフィールドにその時刻に対応する回転の値(回転の軸と角度)を記述します。設定した値の時刻に相当する回転値は線形に補間されます。
ROUTE文でイベント値を交換する経路を記述します。
- Balltime (TimeSensor) のfraction_changedの値をBallrotation(OrientationInterpolator)のset_fractionに伝えます。TimeSensorはloopフィールドがTRUEであるため常に周期的な時刻を送り出しています(アクティブ)。
- Ballrotation(OrientationInterpolator)では受け取ったset_fractionの値とkeyフィールドとkeyValueフィールドの値から補間値を計算し、value_changedに送り出します。
- Ballrotation(OrientationInterpolator)のvalue_changedの値をBall(サッカーボール)のTransformノードのrotationに伝えます。


#VRML V2.0 utf8
#TimeSensor と 回転(Soccerball)    filename=ex03_puppet.wrl

Background { skyColor 0.8  0.8 1 }

EXTERNPROTO Doughnut                             #Doughnut PROTO
     [ exposedField SFColor doughnutColor ]
     [ "../ex02wrl/ex02_doughnut_proto.wrl" ]

EXTERNPROTO Soccerball                         #Soccerball PROTO
     [ exposedField MFColor soccerballColor ]
     [ "../ex02wrl/ex02_soccer_proto.wrl" ]

Transform { 
  children [
    Transform {                                          #puppet
      scale 0.8 0.8 0.8 
      children [ Inline { url "../ex01wrl/ex01_puppet2.wrl"} ]
    }
    Transform {                                         #Doughnut
      rotation 0 0 -1 0.375
      children [ 
        Transform {
          translation -0.27 1.5 0
          rotation -1 0 0  1.57
          scale 0.35 0.35 0.35 
          children [ Doughnut { doughnutColor 0.4 0.8 0.6 } ] }
    ]} 
    DEF Ball Transform {                                #Soccerball
      translation -0.8 -1.5 0.4
      scale 0.2 0.2 0.2 
      children [ Soccerball {  } ]
    }
]}

    DEF Balltime TimeSensor { cycleInterval 4.0  loop TRUE } 

    DEF Ballrotation OrientationInterpolator {
        key      [ 0,  0.33,   0.66,    1.0 ]
        keyValue [ 0 0 1 0, 0 0 1 2.1, 0 0 1 4.2, 0 0 1 0 ]
    }

ROUTE Balltime.fraction_changed TO Ballrotation.set_fraction
ROUTE Ballrotation.value_changed TO Ball.rotation

サッカーボールが回転 (クリックすると上の例がVRMLブラウザに表示されます）

クリックしたら回転させよう

　サッカーボールは常に回転していますが、人形をクリックしたら回転するようにしてみましょう。

人形(はちまきとサッカーボールも含む)全体を回転させるので一番外側のTransformノードにDEF文でPuppetと名前を付けます。後のROUTE文で使用します。
クリックしたことを感知するセンサーであるTouchSensorノードを追加します。TouchSensorノードは、TouchSensorノードと同じグループ内にある物体がクリックされたことを感知します。ここでは人形と同じグループ内に定義しています。TouchSensorノードの名前をDEF文でPuppetclickと付けています。
人形の回転の速さをコントロールするためのTimeSensorノードを追加します。DEF文でPuppettimeと名前を付けています。cycleIntervalフィールドでは周期を 4.0 秒と設定しています。回転はクリックしたときに1周期分だけです。Balltimeの周期は2.0に変更しました。
人形の回転の角度を計算するためのOrientationInterpolatorノードを追加します。DEF文でPuppetrotationと名前を付けています。keyフィールドとkeyValueフィールドの指定法はBallrotetionと同じです。回転の軸をyのマイナスの方向にしています。
ROUTE文でイベント値を交換する経路を追加します。
- Puppetclick (TouchSensor) のtouchTimeの値をPuppettime(TimeSensor)のstartTimeに伝えます。TouchSensorはクリックされたときに初めてアクティブになりtouchTimeの値を送り出します。TimeSensorは、loopフィールドがFALSEのときは startTimeに値がセットされて始めて動き出します。
- Puppettime (TimeSensor) のfraction_changedの値をPuppetrotation(OrientationInterpolator)のset_fractionに伝えます。
- Puppetrotation(OrientationInterpolator)では補間値を計算し、value_changedに送り出します。
- Puppetrotation(OrientationInterpolator)のvalue_changedの値をPuppet(人形)のTransformノードのrotationフィールドに伝えます。Transformノードのcenterフィールドに -4.0 0 0 を指定していますので大きく回ります。

　次にクリックすると回転するVRMLの記述例を示します。TouchSensorが設定されている部分(ここでは人形全体)にマウスカーソルを移動するとカーソルの形が変化します。


#VRML V2.0 utf8
#TimeSensor と 回転(Soccerball)    filename=ex03_puppet2.wrl
#TouchSensor と 回転(Puppet)

Background { skyColor 0.8  0.8 1 }

EXTERNPROTO Doughnut                             #Doughnut PROTO
     [ exposedField SFColor doughnutColor ]
     [ "../ex02wrl/ex02_doughnut_proto.wrl" ]

EXTERNPROTO Soccerball                         #Soccerball PROTO
     [ exposedField MFColor soccerballColor ]
     [ "../ex02wrl/ex02_soccer_proto.wrl" ]

DEF Puppet Transform { 
  translation 4 0 0
  center -4 0 0
  children [
    Transform {                                          #puppet
      scale 0.8 0.8 0.8 
      children [ Inline { url "../ex01wrl/ex01_puppet2.wrl"} ]
    }
    Transform {                                         #Doughnut
      rotation 0 0 -1 0.375
      children [ 
        Transform {
          translation -0.27 1.5 0
          rotation -1 0 0  1.57
          scale 0.35 0.35 0.35 
          children [ Doughnut { doughnutColor 0.4 0.8 0.6 } ] }
    ]} 
    DEF Ball Transform {                                #Soccerball
      translation -0.8 -1.5 0.4
      scale 0.2 0.2 0.2 
      children [ Soccerball {  } ]
    }
    DEF Puppetclick TouchSensor {}
]}

    DEF Balltime   TimeSensor { cycleInterval 2.0  loop TRUE } 
    DEF Puppettime TimeSensor { cycleInterval 4.0 } 

    DEF Ballrotation OrientationInterpolator {
        key      [ 0,  0.33,   0.66,    1.0 ]
        keyValue [ 0 0 1 0, 0 0 1 2.1, 0 0 1 4.2, 0 0 1 0 ]  }

    DEF Puppetrotation OrientationInterpolator {
        key      [ 0,  0.33,   0.66,    1.0 ]
        keyValue [ 0 -1 0 0, 0 -1 0 2.1, 0 -1 0 4.2, 0 -1 0 0 ]  }

ROUTE Balltime.fraction_changed TO Ballrotation.set_fraction
ROUTE Ballrotation.value_changed TO Ball.rotation

ROUTE Puppetclick.touchTime TO Puppettime.startTime
ROUTE Puppettime.fraction_changed TO Puppetrotation.set_fraction
ROUTE Puppetrotation.value_changed TO Puppet.rotation

クリックしたら回転 (クリックすると上の例がVRMLブラウザに表示されます）

はちまきの色を変えよう

　今度は、人形をクリックしたら回転しながらはちまきの色も変わるようにしてみましょう。次に変更の手順を示します。

はちまきの色を変化させるので、はちまきの色を指定するフィールドをもったDoughnutノードにDEF文でD_nutと名前を付けます。
はちまきの色の変化の周期は人形と同じにするのでPuppettimeを使用します。
はちまきの色の変化を計算するためのColorInterpolatorノードを追加します。DEF文でDcolorと名前を付けています。keyValueフィールドには、keyフィールドに対応させて色の値を設定します。ここでは中間で赤になり元に戻るようにしています。間の色は補間されます。
ROUTE文でイベント値を交換する経路を追加します。
- Puppettime (TimeSensor) のfraction_changedの値をDcolor(ColorInterpolator)のset_fractionに伝えます。
- Dcolor(ColorInterpolator)では補間値を計算し、value_changedに送り出します。
- Dcolor(ColorInterpolator)のvalue_changedの値をD_nut(はちまき)のDoughnutノードのdoughnutColorフィールドに伝えます。


#VRML V2.0 utf8
#TimeSensor と 回転(Soccerball)    filename=ex03_puppet3.wrl
#TouchSensor と 回転(Puppet)
#               色を変える(Doughnut)

Background { skyColor 0.8  0.8 1 }

EXTERNPROTO Doughnut                             #Doughnut PROTO
     [ exposedField SFColor doughnutColor ]
     [ "../ex02wrl/ex02_doughnut_proto.wrl" ]

EXTERNPROTO Soccerball                         #Soccerball PROTO
     [ exposedField MFColor soccerballColor ]
     [ "../ex02wrl/ex02_soccer_proto.wrl" ]

DEF Puppet Transform { 
  translation 4 0 0
  center -4 0 0
  children [
    Transform {                                          #puppet
      scale 0.8 0.8 0.8 
      children [ Inline { url "../ex01wrl/ex01_puppet2.wrl"} ]
    }
    Transform {                                         #Doughnut
      rotation 0 0 -1 0.375
      children [ 
        Transform {
          translation -0.27 1.5 0
          rotation -1 0 0  1.57
          scale 0.35 0.35 0.35 
          children [ DEF D_nut Doughnut { doughnutColor 0.4 0.8 0.6 } ] }
    ]} 
    DEF Ball Transform {                                #Soccerball
      translation -0.8 -1.5 0.4
      scale 0.2 0.2 0.2 
      children [ Soccerball {  } ]
    }
    DEF Puppetclick TouchSensor {}
]}

    DEF Balltime   TimeSensor { cycleInterval 2.0  loop TRUE } 
    DEF Puppettime TimeSensor { cycleInterval 4.0 } 

    DEF Ballrotation OrientationInterpolator {
        key      [ 0,  0.33,   0.66,    1.0 ]
        keyValue [ 0 0 1 0, 0 0 1 2.1, 0 0 1 4.2, 0 0 1 0 ]  }

    DEF Puppetrotation OrientationInterpolator {
        key      [ 0,  0.33,   0.66,    1.0 ]
        keyValue [ 0 -1 0 0, 0 -1 0 2.1, 0 -1 0 4.2, 0 -1 0 0 ]  }

    DEF Dcolor ColorInterpolator {
        key      [ 0,  0.5,  1.0 ]
        keyValue [ 0.4 0.8 0.6, 1 0 0, 0.4 0.8 0.6 ]  }

ROUTE Balltime.fraction_changed TO Ballrotation.set_fraction
ROUTE Ballrotation.value_changed TO Ball.rotation

ROUTE Puppetclick.touchTime TO Puppettime.startTime
ROUTE Puppettime.fraction_changed TO Puppetrotation.set_fraction
ROUTE Puppetrotation.value_changed TO Puppet.rotation

ROUTE Puppettime.fraction_changed TO Dcolor.set_fraction
ROUTE Dcolor.value_changed TO D_nut.doughnutColor

はちまきの色 (クリックすると上の例がVRMLブラウザに表示されます）

はちまきを飛ばそう

　今度は、回転しながらはちまきが飛び上がるようにしてみましょう。次に変更の手順を示します。

はちまきの位置を変化させるので、はちまきの位置を指定するフィールドをもったTransformノードにDEF文でD_nutnutと名前を付けておきます。
はちまきの位置を変化の周期は人形と同じPuppettimeを使用します。
はちまきの位置の変化を計算するためのPositionInterpolatorノードを追加します。DEF文でDpositionと名前を付けています。keyValueフィールドには、keyフィールドに対応させて位置の座標値を設定します。ここでは上にあがるようにしています。間の位置座標は補間されます。
ROUTE文でイベント値を交換する経路を追加します。
- Puppettime (TimeSensor) のfraction_changedの値をDposition(PositionInterpolator)のset_fractionに伝えます。
- Dposition(PositionInterpolator)では補間値を計算し、value_changedに送り出します。
- Dposition(PositionInterpolator)のvalue_changedの値をD_nutnut(はちまき)のTransformノードのtranslationフィールドに伝えます。


#VRML V2.0 utf8
#TimeSensor と 回転(Soccerball)    filename=ex03_puppet4.wrl
#TouchSensor と 回転(Puppet)
#               色を変える(Doughnut)
#               位置を変える(Doughnut)

Background { skyColor 0.8  0.8 1 }
Viewpoint { position 0 0 12.5 }

EXTERNPROTO Doughnut                             #Doughnut PROTO
     [ exposedField SFColor doughnutColor ]
     [ "../ex02wrl/ex02_doughnut_proto.wrl" ]

EXTERNPROTO Soccerball                         #Soccerball PROTO
     [ exposedField MFColor soccerballColor ]
     [ "../ex02wrl/ex02_soccer_proto.wrl" ]

DEF Puppet Transform { 
  translation 4 0 0
  center -4 0 0
  children [
    Transform {                                          #puppet
      scale 0.8 0.8 0.8 
      children [ Inline { url "../ex01wrl/ex01_puppet2.wrl"} ]
    }
    DEF D_nutnut Transform {                            #Doughnut
      rotation 0 0 -1 0.375
      children [ 
        Transform {
          translation -0.27 1.5 0
          rotation -1 0 0  1.57
          scale 0.35 0.35 0.35 
          children [ DEF D_nut Doughnut { doughnutColor 0.4 0.8 0.6 } ] }
    ]} 
    DEF Ball Transform {                                #Soccerball
      translation -0.8 -1.5 0.4
      scale 0.2 0.2 0.2 
      children [ Soccerball {  } ]
    }
    DEF Puppetclick TouchSensor {}
]}

    DEF Balltime   TimeSensor { cycleInterval 2.0  loop TRUE } 
    DEF Puppettime TimeSensor { cycleInterval 4.0 } 

    DEF Ballrotation OrientationInterpolator {
        key      [ 0,  0.33,   0.66,    1.0 ]
        keyValue [ 0 0 1 0, 0 0 1 2.1, 0 0 1 4.2, 0 0 1 0 ]  }

    DEF Puppetrotation OrientationInterpolator {
        key      [ 0,  0.33,   0.66,    1.0 ]
        keyValue [ 0 -1 0 0, 0 -1 0 2.1, 0 -1 0 4.2, 0 -1 0 0 ]  }

    DEF Dcolor ColorInterpolator {
        key      [ 0,  0.5,  1.0 ]
        keyValue [ 0.4 0.8 0.6, 1 0 0, 0.4 0.8 0.6 ]  }

    DEF Dposition  PositionInterpolator {
        key      [ 0,  0.25, 0.5, 0.75, 1.0 ]
        keyValue [ 0 0 0, 0 2 0, 0 1 0, 0 2 0, 0 0 0 ]  }

ROUTE Balltime.fraction_changed TO Ballrotation.set_fraction
ROUTE Ballrotation.value_changed TO Ball.rotation

ROUTE Puppetclick.touchTime TO Puppettime.startTime
ROUTE Puppettime.fraction_changed TO Puppetrotation.set_fraction
ROUTE Puppetrotation.value_changed TO Puppet.rotation

ROUTE Puppettime.fraction_changed TO Dcolor.set_fraction
ROUTE Dcolor.value_changed TO D_nut.doughnutColor

ROUTE Puppettime.fraction_changed TO Dposition.set_fraction
ROUTE Dposition.value_changed TO D_nutnut.translation

はちまきが飛ぶ (クリックすると上の例がVRMLブラウザに表示されます）

演習３ センサーとインターポレータ

サッカーボールを回そう

クリックしたら回転させよう

はちまきの色を変えよう

はちまきを飛ばそう

演習３センサーとインターポレータ