Rhythmic Color Pulse Shader (Sine Wave Brightness and Tint)

Rhythmic Color Pulse Shader (Sine Wave Brightness and Tint)
Created for Godot 4.x

This shader applies a continuous, smooth sine-wave-based color effect 
to the CanvasItem, allowing it to rhythmically brighten, glow, and/or 
tint based on time. It is perfect for indicating active statuses, 
ongoing buffs, or adding ambient life to environmental elements.

The pulse is continuous, ranging smoothly from its base state (when 
the sine wave is at 0) to its peak (when the sine wave is at 1).

Usage:
Apply this shader to any CanvasItem (Sprite2D, Control, ColorRect, 
etc.) to make it visibly “breathe.”

Parameters:
– beat_speed: The frequency of the pulse in beats per second (Default: 1.0).
– pulse_intensity: Controls how much the *base color* brightness changes (multiplicative effect).
– glow_intensity: Controls the *additive* brightness boost. Can push colors above 1.0 for a glowing, over-exposed look (HDR effect).
– pulse_color: The color used for the optional tint effect (e.g., green for healing, red for damage).
– use_glow: Toggle for the additive glow effect.
– use_tint: Toggle for the color mixing effect.

Shader code
shader_type canvas_item;

// --- Uniform Parameters ---
uniform float beat_speed : hint_range(0.1, 10.0) = 1.0; 
uniform float pulse_intensity : hint_range(0.0, 1.0) = 0.3; 
uniform float glow_intensity : hint_range(0.0, 2.0) = 0.5; 
uniform vec3 pulse_color : source_color = vec3(1.0, 0.2, 0.2); 
uniform bool use_glow = true;
uniform bool use_tint = false;

void fragment() {
    // 1. Base color sample
    vec4 tex_color = texture(TEXTURE, UV);
    
    // 2. Generate a sine-based pulse (0..1)
    // The sine function oscillates from -1 to 1. 
    // We remap it to 0 to 1 for a clean pulse effect.
    float pulse = (sin(TIME * beat_speed * 2.0 * PI) * 0.5) + 0.5; 

    // 3. Apply pulse to base brightness (multiplicative effect)
    // brightness starts at 1.0 (rest) and increases by pulse_intensity * pulse
    float brightness = 1.0 + pulse * pulse_intensity;

    vec3 color_out = tex_color.rgb * brightness;

    // 4. Optional glow tint overlay (mixes current color with pulse_color)
    if (use_tint) {
        // Mix amount is proportional to the pulse strength and intensity
        color_out = mix(color_out, pulse_color, pulse * pulse_intensity);
    }

    // 5. Optional glow boost (additive effect)
    if (use_glow) {
        // Adds brightness directly, creating an over-exposed/glowing look
        color_out += pulse * glow_intensity;
    }

    COLOR = vec4(color_out, tex_color.a);
}
Live Preview
Tags
animation, brightness, Color, Feedback, glow, pulse, sine, Status, tint, ui
The shader code and all code snippets in this post are under CC0 license and can be used freely without the author's permission. Images and videos, and assets depicted in those, do not fall under this license. For more info, see our License terms.

More from CaptainLaptop

Related shaders

guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments