Moving Rainbow Gradient

Here is a simple rainbow gradient shader to use in your projects! It moves and has a rotation based on uniform values. (The recorded gif thumbnail is bad, the actual shader is a lot smoother than that.)

Shader code
// HSV to RBG from https://www.rapidtables.com/convert/color/hsv-to-rgb.html
// Rotation matrix from https://en.wikipedia.org/wiki/Rotation_matrix

shader_type canvas_item;

const float PI = 3.1415926535;

uniform float strength: hint_range(0., 1.) = 0.5;
uniform float speed: hint_range(0., 10.) = 0.5;
uniform float angle: hint_range(0., 360.) = 0.;

void fragment() {
	float hue = UV.x * cos(radians(angle)) - UV.y * sin(radians(angle));
	hue = fract(hue + fract(TIME  * speed));
	float x = 1. - abs(mod(hue / (1./ 6.), 2.) - 1.);
	vec3 rainbow;
	if(hue < 1./6.){
		rainbow = vec3(1., x, 0.);
	} else if (hue < 1./3.) {
		rainbow = vec3(x, 1., 0);
	} else if (hue < 0.5) {
		rainbow = vec3(0, 1., x);
	} else if (hue < 2./3.) {
		rainbow = vec3(0., x, 1.);
	} else if (hue < 5./6.) {
		rainbow = vec3(x, 0., 1.);
	} else {
		rainbow = vec3(1., 0., x);
	}
	vec4 color = texture(TEXTURE, UV);
	COLOR = mix(color, vec4(rainbow, color.a), strength);
}
Tags
gradient, moving, rainbow, rotation

More from Exuin

Screentone – Black spaced pixels

Gaussian Blur

Square Pixelation

Related shaders

Rainbow Outline

Gradient Color Fog

Dither Gradient Shader

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.
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
meme man
meme man
7 days ago

kewl rainbow~~