Chromatic Chaos Distortion

CasualGarageCoder

Need to express the chaos ? Here’s a chromatic abberation distortion shader.

Parameters are:

  • chaos : Maximum number of pixels for displacement.
  • radius : Distortion range around the center of the effect.
  • attenuation : Easing exponent for distortion mixing (3 = Cubic Out, 4 = Quart Out, 5 = Quint Out)

Apply this shader to a ColorRect for example, make sure the layer is on top of what you want to distort.

Shader code
shader_type canvas_item;

uniform float chaos : hint_range(0., 32.) = 1.;

uniform float radius : hint_range(0., 1.) = 0.5;

uniform float attenuation : hint_range(1., 5.) = 2.;

varying vec2 amount_r;
varying vec2 amount_g;
varying vec2 amount_b;

float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453) - .5;
}

void vertex() {
	vec2 shifted_uv = (UV * 2.) - 1.;
	amount_r = normalize(
		vec2(rand(TIME * 1.3 * shifted_uv),
		rand(TIME * 1.64 * shifted_uv)));
	amount_g = normalize(
		vec2(rand(TIME * 1.5 * shifted_uv),
		rand(TIME * 1.7 * shifted_uv)));
	amount_b = normalize(
		vec2(rand(TIME * 1.17 * shifted_uv),
		rand(TIME * 1.23 * shifted_uv)));
}

void fragment() {
	vec2 chaos_v = vec2(chaos, -chaos) * SCREEN_PIXEL_SIZE;
	
	float dist = length((UV - vec2(0.5)) * 2.);
	float att = clamp(dist / radius, 0., 1.);
	
	chaos_v *= 1. - pow(att, attenuation);
	
	COLOR = vec4(
		texture(SCREEN_TEXTURE, SCREEN_UV + chaos_v * amount_r).r,
		texture(SCREEN_TEXTURE, SCREEN_UV + chaos_v * amount_g).g,
		texture(SCREEN_TEXTURE, SCREEN_UV + chaos_v * amount_b).b,
		1.);
}
Tags
2d, chaos, distortion
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 CasualGarageCoder

Canvas item1040

Shield with impact waves

Canvas item173

Shining Sprite Effect

Canvas item328

Slice and Fade out

Related shaders

Canvas item217

Chromatic Chaos Distortion (Godot4)

Canvas item220

Double Vision w/ chromatic aberration

Canvas item146

Chromatic Abberation (With Offset)

Subscribe
Notify of
guest

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
mrussodev
mrussodev
4 months ago 
//shader by CasualGarageCoder, updated to Godot 4
shader_type canvas_item;


uniform sampler2D SCREEN_TEXTURE : hint_screen_texture, filter_linear_mipmap;


uniform float chaos : hint_range(0., 32.) = 1.;
uniform float radius : hint_range(0., 1.) = 0.5;
uniform float attenuation : hint_range(1., 5.) = 2.;


varying vec2 amount_r;
varying vec2 amount_g;
varying vec2 amount_b;


float rand(vec2 co){
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453) - .5;
}


void vertex() {
    vec2 shifted_uv = (UV * 2.) - 1.;
    amount_r = normalize(
        vec2(rand(TIME * 1.3 * shifted_uv),
        rand(TIME * 1.64 * shifted_uv)));
    amount_g = normalize(
        vec2(rand(TIME * 1.5 * shifted_uv),
        rand(TIME * 1.7 * shifted_uv)));
    amount_b = normalize(
        vec2(rand(TIME * 1.17 * shifted_uv),
        rand(TIME * 1.23 * shifted_uv)));
}


void fragment() {
    vec2 chaos_v = vec2(chaos, -chaos) * SCREEN_PIXEL_SIZE;
    
    float dist = length((UV - vec2(0.5)) * 2.);
    float att = clamp(dist / radius, 0., 1.);
    
    chaos_v *= 1. - pow(att, attenuation);
    
    COLOR = vec4(
        texture(SCREEN_TEXTURE, SCREEN_UV + chaos_v * amount_r).r,
        texture(SCREEN_TEXTURE, SCREEN_UV + chaos_v * amount_g).g,
        texture(SCREEN_TEXTURE, SCREEN_UV + chaos_v * amount_b).b,
        1.);
}
1
Reply