# How this code with displacing a picture in shaders works?

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. 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: 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?