# A simple animation

Learning objectives:

• animation using time sensor, interpolators and routes
• DynamicTransform node

## Dynamically-transformed Shape

The full code for this example:

```
<Scene>
<DynamicTransform DEF="D" angularMomentum="0.12 0.4 0.9">
<Shape>
<Appearance>
<Material DEF="M" />
</Appearance>
<Box size="0.1 0.1 0.1" />
</Shape>
</DynamicTransform>
<TimeSensor DEF="T" cycleInterval="5" enabled="true" loop="true" />
<ColorInterpolator DEF="CI" key ="0 0.333 0.666 1" keyValue="1 0 0, 1 1 0, 0 0 1, 1 0 0"/>
<PositionInterpolator DEF="PI" key="0 0.25 0.5 0.75 1" keyValue="0 0 0, 0.25 0 0, 0 0 0, -0.25 0 0, 0 0 0"/>
<ROUTE fromNode="T" fromField="fraction_changed" toNode="CI" toField="set_fraction" />
<ROUTE fromNode="T" fromField="fraction_changed" toNode="PI" toField="set_fraction" />
<ROUTE fromNode="CI" fromField="value_changed" toNode="M" toField="diffuseColor" />
<ROUTE fromNode="PI" fromField="value_changed" toNode="D" toField="position" />
</Scene>
```

Let us focus on this part of the code first:

```
<Scene>
<DynamicTransform DEF="D" angularMomentum="0.12 0.4 0.9">
<Shape>
<Appearance>
<Material DEF="M" />
</Appearance>
<Box size="0.1 0.1 0.1" />
</Shape>
</DynamicTransform>
</Scene>
```

We begin with theScene node, which contains a Shape. There is nothing unfamiliar with the Shape; it is a Box geometry of dimensions 0.1x0.1x0.1. We DEF-ed The Material node as M as we would be referring to this node later. We place the Shape as a child node to DynamicTransform. DynamicTransform is an H3D-specific grouping node that also has basic properties to define the rigid body motion of its children Shape nodes. In this example the angularMomentum of DynamicTransform is defined causing the Shape in our scene to rotate continuously. The DynamicTransform node is DEF-ed D and will be referred to later.

## Animation with time sensor and interpolators

```
<TimeSensor DEF="T" cycleInterval="5" enabled="true" loop="true" />
<ColorInterpolator DEF="CI" key ="0 0.333 0.666 1" keyValue="1 0 0, 1 1 0, 0 0 1, 1 0 0"/>
<PositionInterpolator DEF="PI" key="0 0.25 0.5 0.75 1" keyValue="0 0 0, 0.25 0 0, 0 0 0, -0.25 0 0, 0 0 0"/>
```

We place a TimeSensor, ColorInterpolator and PositionInterpolator in our scene for the animation. The cycleInterval of TimeSensor is set to 5 seconds, and will be the length of one time cycle. This cycle is repeated as we have set loop to true. We also enabled the TimeSensor. As time passes, the TimeSensor sends out events from its fraction_changed field.

The interpolators contain the fields key and keyValue. The keyValue of each interpolator contains a typed list of values depending on the interpolator. The ColorInterpolator hence has keyValue of type MFColor while the PositionInterpolator keyValue is of type MFVec3f. The key field of both interpolators indicate the fraction at which each element of keyValue should be. When we use the TimeSensor with the interpolators the key values indicate the fraction of the time cycle e.g. at the start of the time cycle in our example, the value of ColorInterpolator is red (RGB(1, 0, 0)), at a third (key=0.333) of the time cycle it is yellow (RGB(1, 1, 0)), at two third (key=0.666) it is blue (RGB(0, 0, 1)) and at a full cycle (key=1) it is red again. Between cycle fractions the value is interpolated to the next value in the keyValue list.

```
<ROUTE fromNode="T" fromField="fraction_changed" toNode="CI" toField="set_fraction" />
<ROUTE fromNode="T" fromField="fraction_changed" toNode="PI" toField="set_fraction" />
```

We connect the TimeSensor and interpolators by routing the fraction_changed field to the set_fraction field of both interpolators.

```
<ROUTE fromNode="CI" fromField="value_changed" toNode="M" toField="diffuseColor" />
<ROUTE fromNode="PI" fromField="value_changed" toNode="D" toField="position" />
```

To change the colour and position of the the cube, we route the value_changed field of both interpolators to diffuseColor and position respectively.