Add grey to a shader

Question

This shader has gone a long way, and I don't know how to start learning shader scrpting right now, I ask this, I am trying to make a sketch shader like from this link,
Godot Engine: Sketch (Fragment Shader) https://www.youtube.com/watch?v=s6b24MqKYT8
and even asked on Redditon this link,
A Sketch Shader for 2D https://www.reddit.com/r/godot/comments/mh027v/a_sketch_shader_for_2d/
My problem is that the colors under the shader are in color not black and white. How do I the alter the true texture and keep the rest of the sketch? Here is my code.

shadertype canvasitem;

float rand(float x) { return fract(sin(x) * 43758.5);}
float triangle(float x) { return abs(1.0 - mod(abs(x), 2.0)) * 2.0 - 1.0;}

void fragment(){
float time = floor(TIME * 14.0) / 14.0;
vec2 uv = SCREEN_UV; vec2 p = uv;
p += vec2(triangle(p.y * rand(time) *2.0) * rand(time * 0.3) * 0.005,
triangle(p.x * rand(time * 0.1) * 1.0) * rand(time * 0.5) * 0.015);
p += vec2 (rand(p.x * 1.1 + p.y * 4.7) * 0.005,
rand(p.x * 0.1 + p.y * 0.1) * 0.001);

COLOR = texture(SCREEN_TEXTURE, SCREEN_UV);
float avg = (COLOR.r + COLOR.g + COLOR.b) / 3.0;
COLOR.rgb = vec3(avg);
vec4 baseColor = vec4(texture(SCREEN_TEXTURE, uv).rgb, 1.0);
vec4 darkEdges = vec4(texture(SCREEN_TEXTURE, p).rgb,1.0);
vec4 reg = vec4(baseColor) - (baseColor * vec4(texture(TEXTURE,uv).rgb,0.5));
vec4 edges = vec4(darkEdges) - (darkEdges / vec4(texture(SCREEN_TEXTURE,p).rgb,100.0));
edges.rgb = vec3(edges.r);
baseColor.rgb = vec3(darkEdges.r);
COLOR = texture(SCREEN_TEXTURE, SCREEN_UV);
COLOR = edges / vec4(length(darkEdges));

}

I hope someone can see this and answer. Thanks!

Answer 1

You need to learn about combining colours. Let's simplify the situation and say we have vec3 red = vec3(1.0, 0.0, 0.0) and we want to mix it with vec3 grey=vec3(0.5, 0.5, 0.5)

There are numerous ways of doing this that yield different results. You can do maths operations on them; multiply, add, subtract. The simplest here is just to linearly interpolate between them which is inbuilt. Something like this (verboseness for clarity):

shader_type canvas_item;

uniform float slider = 0.0;

void fragment(){
    vec3 red = vec3(1.0, 0.0, 0.0);
    vec3 grey = vec3(0.5, 0.5, 0.5);
    vec3 final_colour = mix(red, grey, slider);
    COLOR = vec4(final_colour, 1.0);
}

So when you're slider is 0 it's red. When it's 1 it's grey.

I'd recommend you google "the book of shaders" and find the YT channel "the art of code". Hope this helps.

EDIT: forgot to say, to specifically make things monochrome to just need to take the mean of each colour. So COLOR = vec4(vec3(COLOR.r, COLOR.g, COLOR.b) / 3.0, 1.0);