Gradient Generator

A simple gradient generator with 5 modes, noise and alpha clipping.

Settings:

2 Colours, Gradient type, Proportion – to show more of 1 colour, Noise, Clip Alpha (bool), Clip threshold.

Shader code
shader_type canvas_item;

// A shader by The Gingerjam, I used this page https://godotshaders.com/snippet/random-value/ for the pseudo random value, rest of the code by me :)

// Colours
uniform vec4 colour1 : source_color;
uniform vec4 colour2 : source_color;
uniform int gradientType : hint_range(1, 5, 1);
uniform float proportion : hint_range(0.0, 10.0, 0.001);
uniform float noise : hint_range(0.0, 1.0, 0.01);
// Alpha clipping
uniform bool clipAlpha = false;
uniform float clipThreshold : hint_range(0.0, 1.0, 0.01);

float random (vec2 uv) {
	// Generate pseudo random value
	return (fract(sin(dot(uv.xy,vec2(12.9898,78.233))) * 43758.5453123) - 0.5) * 2.0;
}

float calculate_distance(vec2 v1, vec2 v2) {
	// Calculate the distance between 2 vectors (used in the radial gradient)
	return sqrt(pow((v1.x - v2.x), 2.0) + pow((v1.y - v2.y), 2.0));
}

vec4 lerp_colour(vec4 c1, vec4 c2, float ratio) {
	// Lerp between 2 vec4s with the given ratio
	return c1 + (c2 - c1) * clamp(ratio, 0.0, 1.0);
}

void fragment() {
	float ratio = proportion; // Kind of weirdly coded, the ratio should be multiplied by proportion, I just set the ratio here and multiply everything else
	if(gradientType == 1){
		ratio = clamp(calculate_distance(UV, vec2(0.5,0.5)) * (proportion * 2.0) + random(UV) * noise, 0.0, 1.0); // Apart from here lol
		COLOR = lerp_colour(colour1, colour2, ratio);
	} else if(gradientType == 2){
		ratio *= UV.x + random(UV) * noise;
		COLOR = lerp_colour(colour1, colour2, ratio);
	} else if(gradientType == 3){
		ratio *= abs(UV.x - UV.y) + random(UV) * noise;
		COLOR = lerp_colour(colour1, colour2, ratio);
	} else if(gradientType == 4){
		ratio *= abs(((UV.x * -1.0) + 1.0) - UV.y) + random(UV) * noise;
		COLOR = lerp_colour(colour1, colour2, ratio);
	} else {
		ratio *= (abs(((UV.x * -1.0) + 1.0) - UV.y) + abs(UV.x - UV.y)) + random(UV) * noise;
		COLOR = lerp_colour(colour1, colour2, ratio);
	}
	
	if(clipAlpha) {
		if(COLOR.a > clipThreshold) {
			COLOR.a = 1.0;
		} else {
			COLOR.a = 0.0;
		}
	}
}
Tags
gradient, interpolation
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 The Gingerjam

Edge detection without depth texture (so you can use it in 2D)

Image opacity

Related shaders

Extensible Color Palette (Gradient Maps) Now with Palette Blending!

Ripple Gradient Shader

2d sprite based vfx gradient shader

Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments