2mo ago

A cool zigzag-to-sin-wave line shader I just wrote

i wanted to add a cool background to some game i'm making for a friend, so i had a lil fun with glsl and made this.

i uploaded a short screen recording on all the parameters, but apparently catbox doesn't work well with that anymore. So I replaced it with this image.

here is the code, use it however u want <3

 glsl

    
shader_type canvas_item;

uniform sampler2D gradient : source_color;

uniform vec2 frequency = vec2(10.0, 10.0);

uniform float amplitude = 1.0;

uniform vec2 offset;

// 0.0 = zigzag; 1.0 = sin wave
uniform float smoothness : hint_range(0.0, 1.0) = 0.0;

float zig_zag(float value){
    float is_even = step(0.5, fract(value * 0.5));
    float rising = fract(value);
    float falling = (rising - 1.0) * -1.0;
    
    float result = mix(rising, falling, is_even);
    return result;
}

float smoothzag(float value, float _smoothness){
    float z = zig_zag(value);
    float s = (cos((value + 1.0) * PI)) * 0.5 + 0.5;
    return mix(z, s, _smoothness);
}

void fragment() {
    float sinus = zig_zag(((UV.y*2.0-1.0) + smoothzag((UV.x*2.0-1.0) * frequency.x - offset.x, smoothness) * amplitude * 0.1) * frequency.y - offset.y);
    COLOR = texture(gradient, vec2(sinus, 0.0));
}

if u have any questions, ask right away!