第１１回　コンピュータグラフィクス演習（遠隔講義）
アニメーション２（回転アニメーション、色変化アニメーション）

講義に関する質問について

この授業について質問がある場合は、hemmi@sun.ac.jp までメールで問い合わせてください。
その際、件名は 「コンピュータグラフィクス演習の講義について（１１）」 としてください。

【注意】ブラウザは Internet Explorer を使っているか確認してください。
　

【エラーメッセージについて】

プログラムが複雑になってくるとエラーが出る場合があります。
その際は「エラーメッセージについて」を参照してください。
　

前回の授業では、移動アニメーションについて学びました。

今回は、回転アニメーションと色変化アニメーションについて学びます。
　

回転アニメーション

回転アニメーションとは物体を回転させるアニメーションです。
どのような動きをするのかは【例１】の実行結果でイメージをつかんでください。

回転アニメーションは次の（１）〜（４）の設定を行う必要があります。
これらの設定は前回学んだ移動アニメーションの時とほとんど同じです。
移動アニメーションの作り方を理解できていれば難しくはないと思います。
回転角度が＋だと、回転の向きは反時計方向となります。

（１）Transformノードの定義（表示させる物体、表示位置、回転させる中心、の定義を行います）
　translation 0.0 1.0 0.0 #物体を表示する位置（３次元座標）を指定します
　center 0.0 -1.5 0.0 #回転の中心の３次元座標を指定します

（２）１周期の時間とアニメーションを繰り返すかどうかの定義（TimeSensorノード）
　TimeSensorの書き方は移動アニメーションと全く同じです。

（３）回転に関するアニメーションの定義（OrientationInterpolatorノード）
　移動アニメーションではPositionInterpolatorを使いましたが、回転アニメーションではOrientationInterpolatorを使います。
　keyの書き方は移動アニメーションと全く同じです。
　keyValueの書き方が少し異なります。
　　0.0 0.0 1.0 0.0,　　先頭から3番目までは回転軸（どの軸を中心に回転するか）、最後は回転角（ラジアン）です。
　　回転の指定は　第３回遠隔講義、幾何変換の「●回転させる」と同じです。

（４）ROUTE文の定義
　移動アニメーションと同じですが、OrientationInterpolatorノードをDEF定義した値がOIなのでここだけ注意してください。
　
　

【例１】三角錐が回転する

#VRML V2.0 utf8    #回転アニメーション
DEF WHEELS Transform{
  translation 0.0 1.0 0.0    #表示位置
  center 0.0 -1.5 0.0        #回転中心
  children[
    Shape{
      appearance Appearance{
        material Material{
          diffuseColor 0.0 1.0 0.0
        }
      }
      geometry Cone{
        bottomRadius 0.2
        height 3.0
      }
    }
  ]
}

#TimeSensorの定義
DEF TIMER TimeSensor{
  cycleInterval 10.0    #１周期の時間を設定（秒）
  loop TRUE             #繰り返しの設定
}

#回転に関するアニメーションの定義（回転軸はＺ軸、keyが0.0の時に0.0ラジアン、0.5の時に3.14ラジアン、1.0の時に6.28ラジアン回転させる）
DEF OI OrientationInterpolator{    #回転するアニメーションの設定
  key[
    0.0  0.5 1.0    #動作を起こす時間ポイント
  ]
  keyValue[         #値の変化を設定
    0.0 0.0 1.0 0.0,      #回転軸（X Y Z）　回転角度ラジアン（回転角度が＋の時は回転の向きは反時計方向）
    0.0 0.0 1.0 3.14,
    0.0 0.0 1.0 6.28
  ]
}

#ROUTE文の定義
ROUTE TIMER.fraction_changed TO OI.set_fraction
ROUTE OI.value_changed TO WHEELS.set_rotation




実行例

【例２】２つの物体（三角錐と円柱）が別々に回転する（回転の動きが異なる）

#VRML V2.0 utf8    #回転アニメーション
DEF WHEELS1 Transform{
  translation 0.0 1.0 0.0    #表示位置
  center 0.0 -1.5 0.0        #回転中心
  children[
    Shape{
      appearance Appearance{
        material Material{
          diffuseColor 0.0 1.0 0.0
        }
      }
      geometry Cone{
        bottomRadius 0.2
        height 3.0
      }
    }
  ]
}

DEF WHEELS2 Transform{      #赤色の円柱
  translation 0.0 1.0 0.0    #表示位置
  center 0.0 -1.5 0.0        #回転中心
  children[
    Shape{
      appearance Appearance{
        material Material{
          diffuseColor 1.0 0.0 0.0
        }
      }
      geometry Cylinder{
        radius 0.05
        height 3.0
      }
    }
  ]
}

#TimeSensorの定義1
DEF TIMER1 TimeSensor{
  cycleInterval 10.0    #１周期の時間を設定（秒）
  loop TRUE             #繰り返しの設定
}

#TimeSensorの定義2
DEF TIMER2 TimeSensor{
  cycleInterval 2.0    #１周期の時間を設定（秒）
  loop TRUE             #繰り返しの設定
}

#回転に関するアニメーションの定義1
DEF OI1 OrientationInterpolator{    #回転するアニメーションの設定
  key[
    0.0  0.5 1.0    #動作を起こす時間ポイント
  ]
  keyValue[         #値の変化を設定
    0.0 0.0 1.0 0.0,      #回転軸　X Y Z　回転角度
    0.0 0.0 1.0 3.14,
    0.0 0.0 1.0 6.28
  ]
}

#回転に関するアニメーションの定義2
DEF OI2 OrientationInterpolator{    #回転するアニメーションの設定
  key[
    0.0  0.5 1.0    #動作を起こす時間ポイント
  ]
  keyValue[         #値の変化を設定
    0.0 0.0 1.0 0.0,      #回転軸　X Y Z　回転角度
    0.0 0.0 1.0 3.14,
    0.0 0.0 1.0 6.28
  ]
}

#ROUTE文の定義
ROUTE TIMER1.fraction_changed TO OI1.set_fraction
ROUTE OI1.value_changed TO WHEELS1.set_rotation

ROUTE TIMER2.fraction_changed TO OI2.set_fraction
ROUTE OI2.value_changed TO WHEELS2.set_rotation


実行例

色変化アニメーション

回転アニメーションは次の（１）〜（４）の設定を行う必要があります。
これらの設定は前回学んだ移動アニメーションの時とほとんど同じです。
移動アニメーションの作り方を理解できていれば難しくはないと思います。
回転角度が＋だと、回転の向きは反時計方向となります。

（１）Transformノードの定義（表示させる物体、表示位置、回転させる中心、の定義を行います）
　translation 0.0 1.0 0.0 #物体を表示する位置（３次元座標）を指定します
　center 0.0 -1.5 0.0 #回転の中心の３次元座標を指定します

（２）１周期の時間とアニメーションを繰り返すかどうかの定義（TimeSensorノード）
　TimeSensorの書き方は移動アニメーションと全く同じです。

（３）回転に関するアニメーションの定義（OrientationInterpolatorノード）
　移動アニメーションではPositionInterpolatorを使いましたが、回転アニメーションではOrientationInterpolatorを使います。
　keyの書き方は移動アニメーションと全く同じです。
　keyValueの書き方が少し異なります。
　　0.0 0.0 1.0 0.0,　　先頭から3番目までは回転軸（どの軸を中心に回転するか）、最後は回転角（ラジアン）です。
　　回転の指定は　第３回遠隔講義、幾何変換の「●回転させる」と同じです。

（４）ROUTE文の定義
　移動アニメーションと同じですが、OrientationInterpolatorノードをDEF定義した値がOIなのでここだけ注意してください。
　

回転アニメーションとは物体を回転させるアニメーションです。
どのような動きをするのかは【例３】の実行結果でイメージをつかんでください。

色変化アニメーションは次の（１）〜（４）の手順で設定を行う必要がありますが、移動アニメーションと回転アニメーションを理解できていれば色変化アニメーションの設定も容易に推測できると思います。

（１）Transformノードの定義

（２）TimeSensorの定義

（３）色変化に関するアニメーションの定義

（４）ROUTE文の定義

【例３】球の色が変化する

#VRML V2.0 utf8    #色変化アニメーション
Transform{
  translation 0.0 0.0 0.0
  children[
    Shape{
      appearance Appearance{
        material DEF Color1 Material{
          diffuseColor 0.0 1.0 0.0
        }
      }
      geometry Sphere{
        radius 1.0
      }
    }
  ]
}

#TimeSensorノードの定義
DEF TIMER TimeSensor{
  cycleInterval 5.0     #１周期の時間の設定（秒）
  loop TRUE             #繰り返しの設定
}

#色の変化に関するアニメーションの定義
DEF CI1 ColorInterpolator{
  key[  
    0.0 1.0        #cycleInterval時間の中で動作を起こすポイント
  ]
  keyValue[        #色の変化を設定
    0.0 1.0 0.0,
    0.0 0.0 0.0,
  ]
}

#ROUTE文の定義（青）
ROUTE TIMER.fraction_changed TO CI1.set_fraction
ROUTE CI1.value_changed TO Color1.set_diffuseColor


実行例

【例４】２つの球の色が変化する

#VRML V2.0 utf8    #色変化アニメーション
#１つ目の球
Transform{
  translation -2.0 0.0 0.0
  children[
    Shape{
      appearance Appearance{
        material DEF Color1 Material{
          diffuseColor 1.0 0.0 0.0
        }
      }
      geometry Sphere{
        radius 1.0
      }
    }
  ]
}

#２つ目の球
Transform{
  translation 2.0 0.0 0.0
  children[
    Shape{
      appearance Appearance{
        material DEF Color2 Material{
          diffuseColor 0.0 0.0 0.0
        }
      }
      geometry Sphere{
        radius 1.0
      }
    }
  ]
}

#TimeSensorノードの定義1
DEF TIMER1 TimeSensor{
  cycleInterval 5.0     #１周期の時間の設定（秒）
  loop TRUE             #繰り返しの設定
}

#TimeSensorノードの定義2
DEF TIMER2 TimeSensor{
  cycleInterval 5.0     #１周期の時間の設定（秒）
  loop TRUE             #繰り返しの設定
}

#色の変化に関するアニメーションの定義1
DEF CI1 ColorInterpolator{
  key[  
    0.0 1.0        #動作を起こす時間ポイント
  ]
  keyValue[        #値の変化を設定
    1.0 0.0 0.0,
    0.0 0.0 0.0,
  ]
}

#色の変化に関するアニメーションの定義2
DEF CI2 ColorInterpolator{
  key[  
    0.0 1.0        #動作を起こす時間ポイント
  ]
  keyValue[        #値の変化を設定
    0.0 0.0 0.0,
    0.0 0.0 1.0,
  ]
}

#ROUTE文の定義
ROUTE TIMER1.fraction_changed TO CI1.set_fraction
ROUTE CI1.value_changed TO Color1.set_diffuseColor

ROUTE TIMER2.fraction_changed TO CI2.set_fraction
ROUTE CI2.value_changed TO Color2.set_diffuseColor


実行例

　
　
　
　
【問題１】
次の動きを作りなさい
　　１
　　２
　
　
【問題２】
信号機を作りなさい。
実行例

第１１回の講義はここまでで終了です

１０：３０までに、ここまでの課題が終わったかどうかを返信してください。
返信は、LiveCampusの「授業連絡」から行ってください。
返信内容は、「終わった」または「終わらなかった」のいずれかとしてください。

【返信期限】　

2020年6月15日（月）　１0：30
　　

【返信方法】

LiveCampusの「授業連絡」から「返信」で行ってください。
　

【返信内容】

「終わった」または「終わらなかった」のいずれかで答えてください。

　
以上