distorction pixelperfect

This shader applies a distortion effect to a texture, creating a “wavy” or “vibrating” appearance on the UV coordinates of the texture. Here’s how it works:

1. Distortion on UV Coordinates: The shader manipulates the texture’s UV coordinates, causing distortion on both the X and Y axes. The distortion is based on a sine function, which is animated over time (TIME) and controlled by user-defined frequency and speed.

2. Amplitude and Frequency Control: The user can adjust the amplitude of the distortion on both axes (X and Y), determining how strong the distortion will be. The frequency controls the “density” of the distortion waves, while the speed determines how quickly the effect moves over time.

3. Overlay Application: After applying the distortion, the shader also allows for an overlay color (defined by the overlay_color variable), multiplying the texture color by the overlay color. This adds additional visual effects, like applying a specific hue to the texture.

4. Line-based Application: The shader rounds the Y coordinates to ensure that the distortion is consistently applied per pixel line, creating a more organic and fluid distortion effect.

In summary, this shader creates an animated distortion effect on a texture, with control over intensity, frequency, speed, and overlay color, making it ideal for effects like “vibrations” or “waves.”

Shader code

shader_type canvas_item;

uniform float amplitude_x : hint_range(-0.2, 0.2) = 0.05; // Distortion on the X axis
uniform float amplitude_y : hint_range(-0.2, 0.2) = 0.05; // Distortion on the Y axis
uniform float frequency : hint_range(-20.0, 20.0) = 7.5;
uniform float speed : hint_range(-5.0, 5.0) = 2.0;
uniform vec4 overlay_color : source_color = vec4(1.0, 1.0, 1.0, 1.0);
uniform vec2 texture_size = vec2(64.0, 64.0); // Texture size in pixels

void fragment() {
    // Converts UV coordinates to pixel coordinates
    vec2 pixel_coords = UV * texture_size;

    // Rounds the Y coordinate to ensure the distortion is applied per line
    pixel_coords.y = floor(pixel_coords.y) + 0.5;

    // Converts back to UV coordinates
    vec2 line_uv = pixel_coords / texture_size;

    // Applies distortion based on X and Y coordinates
    line_uv.x += sin(line_uv.y * frequency + TIME * speed) * amplitude_x; // Distortion on the X axis
    line_uv.y += sin(line_uv.y * frequency + TIME * speed) * amplitude_y; // Distortion on the Y axis

    // Fetches the texture color using the distorted coordinates
    vec4 texColor = texture(TEXTURE, line_uv);

    // Applies the overlay color
    COLOR = texColor * overlay_color;
}