как изменить цвет на картинке при помощи webgl?

Есть флаг который сделан с помощью webgl ,

<canvas id="flag-canvas">not support html5</canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
uniform float u_Distance;
attribute vec2 a_Position;
varying vec2 v_UV;
varying float v_Slope;

float PI = 3.14159;
float scale = 0.8;

void main() {

  float x = a_Position.x;
  float y = a_Position.y;

  float amplitude = 1.0 - scale; // 振幅
  float period = 2.0;  // 周期
  float waveLength = 2.0 * scale;

  v_UV = (mat3(0.615,0,0, 0,0.625,0, 0.5,0.5,1) * vec3(x, y, 1.0)).xy;
  y += amplitude * ( (x - (-scale)) / waveLength) * sin(2.0 * PI * (x - u_Distance));

  float x2 = x - 0.001;
  float y2 = a_Position.y + amplitude * ( (x2 - (-scale)) / waveLength) * sin(2.0 * PI * (x2 - u_Distance));

  v_Slope = y - y2;
  gl_Position = vec4(vec2(x, y), 0.0, 1.0);
}
</script>

<script id="fragment_shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_Sampler;
varying vec2 v_UV;
varying float v_Slope;

void main() {
  vec4 color = texture2D( u_Sampler, v_UV );
  if( v_Slope > 0.0 ) {
    color = mix( color, vec4(0.0, 0.0, 0.0, 1.0), v_Slope * 300.0 );
  }
  if( v_Slope < 0.0 ) {
    color = mix( color, vec4(1.0), abs(v_Slope) * 300.0 );
  }
  if(v_UV.x < 0.0 || v_UV.x > 1.0 || v_UV.y < 0.0 || v_UV.y > 1.0) {
    color.a = 0.0;
  }
  gl_FragColor = color;
}
</script>

https://codepen.io/caest/pen/bGeMOLd У меня вопрос: как смену цвета на флаге по времени, чтобы через каждые 5 секунд он был оранжевый? потом снова такой как есть