How do I distort a 2D texture based on the movement of a point that starts at the center?

Question

So there's this point that starts in the center. If the user drags it up towards the top of the texture, the top squishes and the bottom stretches. If the user drags it down, the top stretches on the bottom squishes. The same goes for left and right. How do I do this?

Answer 1

okay i figured it out

shader_type canvas_item;

const vec2 center_original = vec2(0.5, 0.5);
uniform vec2 center_actual = vec2(0.5, 0.5);

void fragment() {
    vec2 adjusted_uv = vec2(0.0, 0.0);
    if (UV.x < center_actual.x){
        adjusted_uv.x = UV.x * center_original.x / center_actual.x;
    } else {
        adjusted_uv.x = UV.x * (1.0 - center_original.x) / (1.0 - center_actual.x) + 1.0 - (1.0 - center_original.x) / (1.0 - center_actual.x);
    }
    if (UV.y < center_actual.y){
        adjusted_uv.y = UV.y * center_original.y / center_actual.y;
    } else {
        adjusted_uv.y = UV.y * (1.0 - center_original.y) / (1.0 - center_actual.y) + 1.0 - (1.0 - center_original.y) / (1.0 - center_actual.y);
    }
    COLOR = texture(TEXTURE, adjusted_uv);
}