Overview

Shader that takes two colors and an angle. It divides the target in 4, according to the angle parameter, and fills each quadrant with one of the colors

Params

first_color -> the color in which, with the default angle value, will be in the top-right and bottom-left corners

second_color -> the color in which, with the default angle value, will be in the bottom-right and top-left corners

angle_radius ->  the angle, in radius, of one of the “dividing” segments

Explanation of implementation

With the angle provided (and a second one, that comes from adding PI/2 to this first one) we can calculate both boundaries that separate each color section.

– `calculateVectorFromAngle`

We then use those boundaries and UVs to fill each section

– `getEqualOrLessThanBoundary`

– `getGreaterThanBoundary`

Extra

If any math savvy people come up with cool equations to use to calculate the quadrants, feel free to suggest some XD

Godot Version: 3.5.1

``````shader_type canvas_item;

uniform vec4 first_color : hint_color;
uniform vec4 second_color : hint_color;

const float PI = 3.14159265358979323846;

vec2 calculateVectorFromAngle(float targetAngle) {
return vec2(cos(targetAngle), sin(targetAngle));
}

bool getEqualOrLessThanBoundary(float x, float y, vec2 boundary) {
return (x - 0.5) * boundary.x <= (y - 0.5) * boundary.y;
}

bool getGreaterThanBoundary(float x, float y, vec2 boundary) {
return (x - 0.5) * boundary.x > (y - 0.5) * boundary.y;
}

void fragment() {
vec2 line_2 = calculateVectorFromAngle(angle_radians + PI/2.0);

if (getEqualOrLessThanBoundary(UV.x, UV.y, line_1) &&
getEqualOrLessThanBoundary(UV.x, UV.y, line_2)) {
COLOR = first_color;
} else if (getGreaterThanBoundary(UV.x, UV.y, line_1) &&
getGreaterThanBoundary(UV.x, UV.y, line_2)) {
COLOR = first_color;
} else if (getEqualOrLessThanBoundary(UV.x, UV.y, line_1) &&
getGreaterThanBoundary(UV.x, UV.y, line_2)) {
COLOR = second_color;
} else if (getGreaterThanBoundary(UV.x, UV.y, line_1) &&
getEqualOrLessThanBoundary(UV.x, UV.y, line_2)) {
COLOR = second_color;
}
}``````
###### Tags
2d, background
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.