title: In GLSL Shader, how to move an image 'smoothly' without 'scrubbing'
body: <p>In particular I am using a Processing Java example that makes use of a GLSL shader (it's called InfiniteTiles).  The original sketch is actually just moving a tiled image.  </p>
  
  <p>I have a uniform variable called time that I call in java.  </p>
  
  <pre><code>tileShader.set("time", millis() / 1000.0);
  </code></pre>
  
  <p>Now in the fragment shader there is a code section</p>
  
  <pre><code>vec2 pos = gl_FragCoord.xy - vec2(TILES_COUNT_X * time);
  vec2 p = (resolution - TILES_COUNT_X * pos) / resolution.x;
  vec3 col = texture2D (tileImage, p).xyz;
  </code></pre>
  
  <p>What I attempted to do in the java code is set the time variable such that I might be able to increase and decrease the speed at which the image scrolls.  </p>
  
  <p>I wrote this</p>
  
  <pre><code>float t =millis() / 1000.0;
  float pctX = map (mouseX, 0, width, 0, 1);
  tileShader.set("time", t*pctX);
  </code></pre>
  
  <p>What happens is that when I move the mouse, the entire image moves rapidly either left or right depending on where im moving as if its like 'scrubbing' the image.  When i stop moving the mouse, then it will move at the desired speed.  </p>
  
  <p>I would like to avoid this 'scrubbing' effect and have the image scrolling speed transition smoothly with the mouse movement.  </p>
  
  <p>Normally I could accomplish such a thing with just drawing an image in java and scrolling it, but I think I'm not understanding something fundamental about the way glsl works to achieve the same effect on the graphics card.  </p>
  
  <p>Any help appreciated.  </p>
  
  <p>Full processing code from example:</p>
  
  <pre><code>//-------------------------------------------------------------
  // Display endless moving background using a tile texture.
  // Contributed by martiSteiger
  //-------------------------------------------------------------
  
  PImage tileTexture;
  PShader tileShader;
  
  void setup() {
    size(640, 480, P2D);
    textureWrap(REPEAT);
    tileTexture = loadImage("penrose.jpg");
    loadTileShader();
  }
  
  void loadTileShader() {  
    tileShader = loadShader("scroller.glsl");
    tileShader.set("resolution", float(width), float(height));  
    tileShader.set("tileImage", tileTexture);
  }
  
  void draw() {
    tileShader.set("time", millis() / 1000.0);
    shader(tileShader);                    
    rect(0, 0, width, height);
  }
  </code></pre>
  
  <p>Full Shader code</p>
  
  <pre><code>//---------------------------------------------------------
  // Display endless moving background using a tile texture.
  // Contributed by martiSteiger
  //---------------------------------------------------------
  
  uniform float time;
  uniform vec2 resolution;
  uniform sampler2D tileImage;
  
  #define TILES_COUNT_X 4.0
  
  void main() {
    vec2 pos = gl_FragCoord.xy - vec2(4.0 * time);
    vec2 p = (resolution - TILES_COUNT_X * pos) / resolution.x;
    vec3 col = texture2D (tileImage, p).xyz;
    gl_FragColor = vec4 (col, 1.0);
  }
  </code></pre>