move shape

In this tutorial, we will move a shape.
We use a timer to animate the shape.

TimeSensor node generate periodic values.
We use it to animate the node.

Note:
See TimeSensor node documentation to more information.

We define a "ANIM_TIMER" timer (a TimeSensor node).
When widget is launch, timer is activated ("isActive TRUE") and timer cycle interval is 4 seconds.
At end of time interval (after 4 seconds), timer is relaunched ("loop TRUE").
Time sensor declaration:

DEF ANIM_TIMER TimeSensor {
  isActive TRUE
  cycleInterval 4.0
  loop TRUE
}

We catch timer pulse with fraction_changed (SFFloat - value between 0.0 (animation start) and 1.0 (end of animation)).
We catch end of loop with cycleTime (SFTime - current time).

We have the timer.
We define a shape (a simple rectangle):

Shape {
  appearance Appearance {
    material Material2D { emissiveColor 1 0 0 }
  }
  geometry Rectangle { size 20 20 }
}

To move rectangle, we use a Transform2D node:

DEF MY_SHAPE_TRS Transform2D {
  children [
    Shape {
      ...
    }
  ]
}

We have the timer, the shape... We will now animate the shape.

To create animation, we can use Interpolators nodes (CoordinateInterpolator, ColorInterpolator, ...).
To move a shape, we use PositionInterpolator2D node.
See other Interpolators documentation to rotate, change color, ...

We define 4 positions for animations: (-10, -10), (-10, 10), (10, 10) and (10, -10).
Shape move between this points.
When timer faction is 0.00, shape is at (-10,-10) position.
When timer faction is 0.25, shape is at (-10,10) position.
When timer faction is 0.50, shape is at (10,10) position.
When timer faction is 0.75, shape is at (10,-10) position.
And when timer faction is 1.00, shape is return at (-10,-10) position.

DEF ANIMATION_PI PositionInterpolator2D {
  key      [0.0,       0.25,     0.5,     0.75,     1.0    ]
  keyValue [-10 -10,   -10 10,   10 10,   10 -10,   -10 -10]
}

Link the Interpolator with the timer:

ROUTE ANIM_TIMER.fraction_changed TO ANIMATION_PI.set_fraction

Link the Interpolator with the shape:

ROUTE ANIMATION_PI.value_changed TO MY_SHAPE_TRS.translation

Final code for the first example:

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

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

    DEF ANIMATION_PI PositionInterpolator2D {
      key      [0.0,       0.25,     0.5,     0.75,     1.0    ]
      keyValue [-10 -10,   -10 10,   10 10,   10 -10,   -10 -10]
    }

    ROUTE ANIM_TIMER.fraction_changed TO ANIMATION_PI.set_fraction
    ROUTE ANIMATION_PI.value_changed TO MY_SHAPE_TRS.translation
  ]
}

Interpolators node are easy to used. But for complex animation, we can use a JavaScript function.
Example, if the shape moves on a circle.

Create a script node to the animation.

#Animation  script
DEF ANIMATION_CIRCLE_SCRIPT Script {
  ...
}

This script receive timer event fraction_changed (SFFloat type) and return the shape position (SFVec2f type).
Event in/out declaration:

eventIn  SFFloat setFraction
eventOut SFVec2f value_change

Animation function transform a data between 0.0 and 1.0 in shape position (position on a circle).
We convert timer data in angle between 0 and 2PI. And we convert angle in position with cosine and sinus.

function setFraction () {
  //Compute the new shape position
  var angle;
  angle = (3.1415 * 2) * setFraction;
  var x = Math.cos (angle);
  var y = Math.sin (angle);
  value_change.x = x * radius;
  value_change.y = y * radius;
}

And we link script with the timer and the shape.

ROUTE ANIM_TIMER.fraction_changed TO ANIMATION_CIRCLE_SCRIPT.setFraction
ROUTE ANIMATION_CIRCLE_SCRIPT.value_changed TO MY_SHAPE_TRS.translation

Final code for the second example:

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

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

    #Animation  script
    DEF ANIMATION_CIRCLE_SCRIPT Script {
      eventIn  SFFloat setFraction
      eventOut SFVec2f value_change
      field SFFloat radius 20
      url "
      function setFraction () {
        //Compute the new shape position
        var angle;
        angle = (3.1415 * 2) * setFraction;
        var x = Math.cos (angle);
        var y = Math.sin (angle);
        value_change.x = x * radius;
        value_change.y = y * radius;
      }
      "
    }

    ROUTE ANIM_TIMER.fraction_changed TO ANIMATION_CIRCLE_SCRIPT.setFraction
    ROUTE ANIMATION_CIRCLE_SCRIPT.value_changed TO MY_SHAPE_TRS.translation
  ]
}