Simple Movement

There are a few ways that textures can be animated. The simplest method is using the animationTools.xml fragment, which uses matrix transforms to manipulate the shape. Alternatively, you can define matrices yourself.

Example 1

In this example, a rocket texture is shifted in the X and Y planes using both the animation tools move function, and the matrix translation property.

<include src="animationTools.xml" />

<xyPlot name="plot">
  <style>
    <aspectRatio>1</aspectRatio>
  </style>
  <axis dim="x" auto="fixed" min="0" max="1" />
  <axis dim="y" auto="fixed" min="0" max="1" />
  <texture name="rocketTexture">
    <image src="resources/rocket.png" />
  </texture>
  <series name="rocket" draw="radialFill" style="trueColor" ignore="true">
    <data>0.3 0.6; 0.3 0.4; 0.7 0.4; 0.7 0.6</data>
    <textureCoords ref="rocketTexture">0 0; 0 1; 1 1; 1 0</textureCoords>
  </series>
</xyPlot>

<!-- Animation tools to move texture -->
<p>X</p>
<slider name="xSlider" min="-0.5" max="0.5">
  <onValueChanged>
    xVal = value
    yVal = ySlider.Value
    -- [Series].Transform = move([Series],[x Shift],[Y Shift])
    plot.rocket.Transform = move(plot.rocket,xVal,yVal)
  </onValueChanged>
</slider>

<!-- Matrix transform to move texture -->
<p>Y</p>
<slider name="ySlider" min="-0.5" max="0.5">
  <onValueChanged>
    xVal = xSlider.Value
    yVal = value
    plot.rocket.Transform = matrixf.translation(xVal, yVal, 0)
  </onValueChanged>
</slider>

Example 2

In this example a simulation is used to shift a rocket texture in the Y with the amplitude of a sine wave. The rotation property is also used to rotate the rocket along the path.

<drawing name="plot">
  <style>
    <aspectRatio>1</aspectRatio>
  </style>
  <axis dim="x" auto="fixed" min="0" max="1" />
  <axis dim="y" auto="fixed" min="0" max="1" />
  <texture name="rocketTexture">
    <image src="resources/rocket.png" />
  </texture>
  <series name="rocket" draw="radialFill" style="trueColor">
    <textureCoords ref="rocketTexture">0 0; 0 1; 1 1; 1 0</textureCoords>
    <data>0 0.25; 0 0; 0.5 0; 0.5 0.25</data>
  </series>
</drawing>

<simulation name="sim">
  <onActivePageChanged>
    if active then
    sim:Start();
    else
    sim:Stop();
    end
  </onActivePageChanged>
  <solver>
    <series>
      <sine amplitude="0.1" frequency="0.25" bias="0.4" />
      <system>
        <input name="amp" width="1" />
        <output name="ampOut" width="1" />
        <onOutputs>
          sineAmp = amp[1]
          return amp;
        </onOutputs>
      </system>
      <derivative />
      <system>
        <input name="angle" width="1" />
        <onOutputs>
          plot.rocket.Transform = matrixf.translation(0.25, sineAmp, 0)*matrixf.rotationAboutAxis(0, 0, 1, math.atan(angle[1]));
        </onOutputs>
      </system>
    </series>
  </solver>
</simulation>