Simple Transition Effect

CamiXes

this is my first shader!

I was messing around with some trigonometry functions and some other functions and accidentally made this effect. 

Shader code
shader_type canvas_item;
uniform float Speed = 1f; // movement speed

uniform float Intensity = 2f; // higher numbers add a second color
uniform float Hardness = 500f; // circle sizes
uniform vec2 Scale = vec2(1f,1f); // scale
uniform float RotationSpeed = 1f; // rotation speed
uniform vec3 Color = vec3(1f,1f,1f); //attempt at color changing, doesn't really work, only barely noticeable when hardness is at 1f

// one thing that may happen is that the second color may match your theme for some reason, but it should go back to being black when running the game.

void fragment()
{
	float coolEffect = pow(sin((sin(UV.x*(100f)*Scale.x)*cos(UV.y*(100.f*Scale.y)))+(sin(UV.x+TIME*RotationSpeed)+cos(UV.y+TIME*RotationSpeed))+TIME*Speed)*Intensity,Hardness);

	vec4 offsetColor = vec4(coolEffect+Color.r,coolEffect+Color.g,coolEffect+Color.b,coolEffect);
	COLOR = offsetColor;
}
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.

Related shaders

Canvas item110

Simple Circle Transition

Canvas item218

Simple 2d transition

Canvas item23

Simple Menu Transition

guest

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
SamWise
SamWise
4 years ago

Very cool shader! 😀
also I found that by weakening the offset color then adding a vector four with a rgba value the color becomes changeable. I’m not very good with shaders though, so there’s probably a better way.

Last edited 4 years ago by SamWise
1
Reply
Joyless
Joyless
8 months ago

I made an improved version for Godot 4.4:

shader_type canvas_item;


uniform float time = 0; // custom progress
uniform float speed = 1; // engine progress multiplier
uniform float intensity : hint_range(1, 2) = 2; // weird effect
uniform float hardness = 10; // circle aliasing
uniform vec2 scale = vec2(1); // effect scale
uniform float movement_speed = 1; // movement speed
uniform float rotation_speed = 1; // rotation speed
uniform vec4 color : source_color = vec4(1); // color multiplier


void fragment() {
	float result_progress = ((time * 6.2) - 1.5) + (TIME * speed);
	
	float result = pow(sin((sin(UV.x * 100.0 * scale.x) * cos(UV.y * 100.0 * scale.y))
		+ (sin(UV.x + (result_progress * rotation_speed)) + cos(UV.y + (result_progress * rotation_speed)))
		+ (result_progress * movement_speed)
	) * intensity, hardness);
	result = clamp(result, 0, 1);
	
	COLOR *= vec4(result) * color;
}
1
Reply