Using shader to move texel to its center

Question

I'm trying to move squared texture texel to the center of the texture following time. The following code is doing it's job unless I want the pixel drawn vanish when it reaches the center of the geometry (a plane) and for now it's only becoming more a more small while time increase and the texture seems to be like contracted.

uniform float time;
varying vec2 vUv;

void main() {

    vec2 center = vec2(0.5, 0.5);
    vec2 newPosition = vec2(vUv.x + t * (center.x - vUv.x), vUv.y + t * (center.y - vUv.y);

    gl_FragColor = texture2D( texture, vec2(newPosition.x, newPosition.y) );
}

Edit :

Think of this as a black hole in the texture center.

Answer 1

As I understand it, you want the texel to be at vUv when t=0 and at center after a while.

The result is a zoom-in on the center of the texture.

Actually your code do it from t = 0 to t = 1. When t = 1 the texel position is center.

You have the same behavior using the mix function.

vec2 newPosition = mix(vUv, center, t);

Also when t = 1 all the texel are at center and the image is a single color image. (The color of the center of the texture).

Your problem is that t keep growing. And when t > 1 the texel continues on their path. After they all meet at the center, now they stray from each other. The effect is that the texture is reversed and you see a zoom-out.

Depending on how you want it to end there are multiple solutions:

• You want to go to the maximal zoom and keep this image: clamp t in the range [0, 1] like this t = clamp(t, 0, 1);.

• You want to go to the maximal zoom and the image vanish: stop to draw it when t > 1 (or t >= 1 if you do not want the single color image).

• You want an infinite zoom-in, ie texel going closer and closer to the center but never reach it.

For this third behavior, you can use a new t, say t2:

• t2 = 1 - 1/(t*k+1); // Where k > 0
• t2 = 1 - pow(k, -t); // Where k > 1
• t2 = f(t); // Where f(0) = 0, f is increasing, continuous and limit in +∞ is 1