step and smoothstep functions, drawing a line

float f =step(0.3, uv.x);

this will return 0 where uv.x is less than 0.3 and will return 1 where uv.x is greater than 0.3

graphically this would produce a black rectangle taking up 30% of the horizontal. (or a white rectangle taking up 70% of it on the other side)


The smoothstep function provides a nice blend between two values.

float g=smoothstep (0.2,0.8,uv.x);

now if you assign this to a colour output, you'll see a nice gradient, starting black from roughly 20% to white at 80% along the horizontal.


With this in mind, it is possible to plot a line using smoothsteps.


float plot(vec2 uv, float line){

  return  smoothstep( line-0.02, line, uv.y) -

          smoothstep( line, line+0.02, uv.y);

}

looking at the code you might be able to guess that we're just taking the areas slightly above and below the line's function and subtracting. The 0.02 would define the thickness of said line.
In the main function of our shader, we'd call plot like this - 

float f=plot(uv,g);
then assign f to a colour output (or whatever).
The plot function is giving us the 0-1 values across the y axis. A bit like when you'd plot y=x^2 at school. In fact if you wanted to do that- you'd use this line - 
float square =uv.x*uv.x;
float f=plot(uv,square);



Comments

Popular posts from this blog

kodelife/glsl drawing a circle (sdf)

OSL - simple UV things and frac fract alternative