more animations

This tutorial is a continuation of the move shape tutorial.
We use:

Shape node (see shape tutorial)
TimeSensor node (see time sensor tutorial)

We start with the following code:

Group {
  children [
    DEF ANIM_TIMER TimeSensor {
      isActive TRUE
      cycleInterval 4.0
      loop TRUE
    }

    DEF MY_SHAPE_TRS Transform2D {
      children [
        Shape {
          appearance Appearance {
            material DEF MY_SHAPE_COLOR Material2D { emissiveColor 1 0 0 }
          }
          geometry DEF MY_SHAPE Rectangle { size 100 100 }
        }
      ]
    }

  ]
}

We use ColorInterpolator node to change shape color.
The operation of ColorInterpolator is the same as CoordinateInterpolator2D.
ColorInterpolator use key and keyValue fields to compute and return a color when node receive set_fraction event.

Define the ColorInterpolator node:

DEF INTERPOLATOR ColorInterpolator {
      key      [0,      0.33,   0.66,  1    ]
      keyValue [1 0 0,  0 1 0,  0 0 1, 1 0 0]
}

Link ColorInterpolator node with timer and shape color:

ROUTE ANIM_TIMER.fraction_changed TO INTERPOLATOR.set_fraction
ROUTE INTERPOLATOR.value_changed  TO MY_SHAPE_COLOR.emissiveColor

Final code for color animation:

Group {
  children [
    DEF ANIM_TIMER TimeSensor {
      isActive TRUE
      cycleInterval 4.0
      loop TRUE
    }

    DEF MY_SHAPE_TRS Transform2D {
      children [
        Shape {
          appearance Appearance {
            material DEF MY_SHAPE_COLOR Material2D { emissiveColor 1 0 0 }
          }
          geometry DEF MY_SHAPE Rectangle { size 100 100 }
        }
      ]
    }

    DEF INTERPOLATOR ColorInterpolator {
      key      [0,      0.33,   0.66,  1    ]
      keyValue [1 0 0,  0 1 0,  0 0 1, 1 0 0]
    }
    ROUTE ANIM_TIMER.fraction_changed TO INTERPOLATOR.set_fraction
    ROUTE INTERPOLATOR.value_changed  TO MY_SHAPE_COLOR.emissiveColor
  ]
}

ScalarInterpolator is used if animation change only one simple value (example: angle, transparency, radius, ...).
The operation of ScalarInterpolator is the same as CoordinateInterpolator2D.
ScalarInterpolator use key and keyValue fields to compute and return a float value when node receive set_fraction event.
We can change shape transparency with this interpolator.

Define the ScalarInterpolator node:

DEF INTERPOLATOR ScalarInterpolator{
  key      [0.0,  0.5,   1.0]
  keyValue [0.0,  1.0,   0.0]
}

Link ScalarInterpolator node with timer and shape transparency:

ROUTE ANIM_TIMER.fraction_changed TO INTERPOLATOR.set_fraction
ROUTE INTERPOLATOR.value_changed  TO MY_SHAPE_COLOR.transparency

Final code for transparency animation:

Group {
  children [
    DEF ANIM_TIMER TimeSensor {
      isActive TRUE
      cycleInterval 4.0
      loop TRUE
    }

    DEF MY_SHAPE_TRS Transform2D {
      rotationAngle 0
      children [
        Shape {
          appearance Appearance {
            material DEF MY_SHAPE_COLOR Material2D { emissiveColor 1 0 0 }
          }
          geometry DEF MY_SHAPE Rectangle { size 50 50 }
        }
      ]
    }

    DEF INTERPOLATOR ScalarInterpolator{
      key      [0.0,  0.5,   1.0]
      keyValue [0.0,  1.0,   0.0]
    }
    ROUTE ANIM_TIMER.fraction_changed TO INTERPOLATOR.set_fraction
    ROUTE INTERPOLATOR.value_changed  TO MY_SHAPE_COLOR.transparency
  ]
}

Same tutorial than transparency. A ScalarInterpolator generate angles and change shape.

Note:
Rotation increases processing and memory consumption.
Rectangle shape does not rotate. We use an IndexedFaceSet2D node in this tutorial.

Final code for rotation animation:

Group {
  children [
    DEF ANIM_TIMER TimeSensor {
      isActive TRUE
      cycleInterval 4.0
      loop TRUE
    }

    DEF MY_SHAPE_TRS Transform2D {
      children [
        Shape {
          geometry IndexedFaceSet2D {
            color Color { color 1.0 0.0 0.0 }
            coordIndex [ 0 1,  1 2,  2 3,  3 0 ]
            coord Coordinate2D {
              point [ -50 -50,  50 -50,  50 50,  -50 50 ]
            }
          }
        }
      ]
    }

    DEF INTERPOLATOR ScalarInterpolator{
      key      [0.0,  1.0   ]
      keyValue [0.0,  6.2830] # 0 to 2PI
    }
    ROUTE ANIM_TIMER.fraction_changed TO INTERPOLATOR.set_fraction
    ROUTE INTERPOLATOR.value_changed  TO MY_SHAPE_TRS.rotationAngle
  ]
}