Back to Knowledge Base

Texture Coloring

Textures can be colored by updating the foreground style of their series, or by changing their per-vertex colors.

Example 1

In this example, three cloud textures are recolored using different methods. 

<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="cloudTexture">
    <image src="resources/clouds.png" />
  </texture>
  <series name="sky" draw="radialFill">
    <style>
      <foreground color="lightCyan" />
    </style>
    <data>0 0; 1 0; 1 1; 0 1</data>
  </series>
  <series name="clouds1" draw="radialFill" style="trueColor" manual="true">
    <data>1 0.9; 0 0.9; 0 0.6; 1 0.6 </data>
    <textureCoords ref="cloudTexture">0 0; 1 0; 1 1; 0 1</textureCoords>
  </series>
  <series name="clouds2" draw="radialFill" style="trueColor" manual="true">
    <data>1 0.6; 0 0.6; 0 0.3; 1 0.3 </data>
    <textureCoords ref="cloudTexture">0 0; 1 0; 1 1; 0 1</textureCoords>
  </series>
  <series name="clouds3" draw="radialFill" style="trueColor" manual="true">
    <data>1 0.3; 0 0.3; 0 0; 1 0 </data>
    <textureCoords ref="cloudTexture">0 0; 1 0; 1 1; 0 1</textureCoords>
  </series>
</drawing>

<simulation name="sim">
  <onActivePageChanged>
      if active then
          sim:Start();
      else
          sim:Stop();
      end
  </onActivePageChanged>
  <onUpdate>
    -- Changing the color of an entire texture with time (adjusting R with time)
    plot.clouds1.Style.ForegroundColor = color.rgb(255*0.5*(math.sin(0.2*math.pi*time)+1), 255, 255);

    -- Changing the alpha of an entire texture with time
    plot.clouds2.Style.ForegroundColor = color.rgba(255, 255, 255, 255*0.5*(math.sin(0.2*math.pi*time)+1));

    -- Changing the per-vertex colors of a texture, including the alpha
    plot.clouds3.Colors:Clear();
    plot.clouds3.Colors:Add(color.yellow);
    plot.clouds3.Colors:Add(color.rgba(255*0.5*(math.sin(0.2*math.pi*time)+1), 255*0.5*(math.cos(0.2*math.pi*time)+1), 200, 255));
    plot.clouds3.Colors:Add(color.yellow);
    plot.clouds3.Colors:Add(color.rgba(255*0.5*(math.sin(0.2*math.pi*time)+1), 50, 0,  255*0.5*(math.cos(0.2*math.pi*time)+1)));

    plot.clouds1:Update();
    plot.clouds2:Update();
    plot.clouds3:Update();
  </onUpdate>
</simulation>