How this code with displacing a picture in shaders works?

Questions
1

I have a beginner’s question and I hope that it is the right place to ask it and that someone can help me with this. :grin:

I have this code in the fragment shader and I’m not 100% sure how it works so it would be great if someone can explain it to me.

    vec2 dist1 = vec2(vUv.x - mouse, vUv.y);
    vec2 dist2 = vec2(vUv.x + (1. - mouse), vUv.y);

The mouse variable is the number between 0 and 1 which is calculated like this

uniforms.mouse.value = THREE.MathUtils.lerp(
    uniforms.mouse.value,
    // targetValue changed from 0 to 1 when the mouse intersects with the plane
    targetValue,
    0.1,
  );

so it is slowly increasing and decreases if the mouse intersects the plane where these textures are placed.

It is used like this:

vec4 _texture = texture2D(texture1, dist1);
vec4 _texture2 = texture2D(texture2, dist2);

vec4 finalTexture = mix(_texture, _texture2, mouseIntersects);

It looks like this in action:

enter image description here

So that it does it moves the textures by the x axis, but a couple of things which I don’t understand:

  1. Why the first picture (with dist1) moves to the right when we decrease the x value? Should it not move to the left because we make x coordinate smaller for each pixel?
  2. How (1. - mouse) makes the second picture also move to the right? If I understand it correctly it is “the opposite” of mouse but how exactly does it work?