# How this function from "Book of Shaders" does what it does?

My question relates to the first example of “Book of Shaders” (see here https://thebookofshaders.com/05/?lan=en):

``````#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

// Plot a line on Y using a value between 0.0-1.0
float plot(vec2 st, float pct){
return  smoothstep( pct-0.02, pct, st.y) -
smoothstep( pct, pct+0.02, st.y);
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution;

float y = st.x;

vec3 color = vec3(y);

// Plot a line
float pct = plot(st,y);
color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

gl_FragColor = vec4(color,1.0);
}
``````

I have difficulties in understanding the combination of the “float pct” variable and the “float plot” function. I can see it works but I do not understand why.

While saving the results of the plot function,why “float pct” can be part of the plot funtion itself as parameter?

I am also stumpling upon the “y” of the “float pct” – does not “st” itself has “st.x” and “st.y” and therefore “float pct” could simply be “plot(st)”?

The code is not super clear. Rewriting it like so makes it maybe less confusing:

``````#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;

float plot(vec2 st){
return  smoothstep( st.x-0.02, st.x, st.y) -
smoothstep( st.x, st.x+0.02, st.y);
}

void main() {
vec2 st = gl_FragCoord.xy/u_resolution;
vec3 color = vec3(st.x);

// Plot a line
float pct = plot(st);
color = (1.0-pct)*color+pct*vec3(0.0,1.0,0.0);

gl_FragColor = vec4(color,1.0);
}
``````

However, this simplification does not work in the subsequent examples since `y` will be different than `st.x`.

Awesome, @Mugen87!
Is there anything, you have no answer to? Now, I understand every single character.
(So, the original code contains preparations for the following examples which are not necessary for the one above.)

Thank you so much.

1 Like