DEV Community

Cover image for Stripes in Shaders
Manish
Manish

Posted on

3

Stripes in Shaders

Arguments to the frag fn

the frag fn takes 4 arguments:

  1. red value,
  2. green value,
  3. blue value, and
  4. opacity value.

All these values lie in the range [0.0, 1.0].
Any value above 1.0 is treated the same as 1.0
and any value below 0.0 is treated the same as 0.0.

eg:

fragColor = vec4(1.0, 0.0, 0.0 ,1.0);
will produce the following result:

Image description

fragColor = vec4(0.0, 1.0, 0.0 , 1.0);
will produce the following result:

Image description

fragColor = vec4(0.0, 0.0, 1.0 , 1.0);
will produce the following result:

Image description

You can mix the 4 fields with different values to generate any other colour or effect.

Normalizing the coordinates to screen coordinates (uv)

// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;

Enter fullscreen mode Exit fullscreen mode

now uv will store a vec2 with values from 0 to 1 with the leftmost coordinate value 0 and rightmost value with value 1.

Simple X-Gradient

// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;


// Output to screen
fragColor = vec4(uv.x, 0.0, 0.0 , 1.0);

Enter fullscreen mode Exit fullscreen mode

this will give the following result

Image description

Simple Y-Gradient

doing the same but with uv.y:

// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;


// Output to screen
fragColor = vec4(uv.y, 0.0, 0.0 , 1.0);
Enter fullscreen mode Exit fullscreen mode

output:

Image description

Combining colors

We can combine the 3 fields to get different colours such as:
fragColor = vec4(0.3, 0.0, 0.5 , 1.0);
output:

Image description

Stripes

to create stripes,
we start from a basic gradient:

fragColor = vec4(uv.x, 0.0, 0.5 , 1.0);
Enter fullscreen mode Exit fullscreen mode

output:

Image description

right now the red value is varying linearly along the x-direction.

Lets start by choosing a function which oscillates unlike a linear function.

eg: sine function

fragColor = vec4(sin(uv.x), 0.0, 0.5 , 1.0);

output:

Image description

you may not be able to tell a lot of difference, but wait until we scale the input to the function:

for a linear func: fragColor = vec4(uv.x * 20.0, 0.0, 0.5 , 1.0);

output:

Image description

but for the sine func: fragColor = vec4(sin(uv.x * 20.0), 0.0, 0.5 , 1.0);

output:

Image description

as we see the red value for linear fn reaches 1 faster and then above 1 it behaves as 1, but for the oscillatory fn reaches 1 very fast and then again goes to -1, which is why we see the darker region more as values < 0 are treated as 0.

to get a more equal width strip pattern, we need to oscillate the values from 0 to 1 not -1 to 1.

for this lets try using the following trick
remove the -1 part by adding 1 to the func , ie, sin(uv.x) + 1.

but this will get us the answer from 0 to 2.

to manage this, we can halve this, ie, 0.5 * (sin(uv.x * 20.) + 1.)

output:

Image description

increasing the argument to sine func increases the frequency of the stripes and reduces the width:

eg: changing the scale from 20. to 40.
fragColor = vec4(0.5 * (sin(uv.x * 40.) + 1.), 0.0, 0.5 , 1.0)

output:

Image description

to make the strips sharp and not dissolving naturally, we can ceil the sine func which will give us values in sharp 0 and 1.

fragColor = vec4(ceil(sin(uv.x * 40.)), 0.0, 0.5 , 1.0);
Enter fullscreen mode Exit fullscreen mode

Image description

Y-stripes

replacing uv.x in the above expression with uv.y gives us stripes along the y-direction

fragColor = vec4(0.5 * (sin(uv.y * 40.) + 1.), 0.0, 0.5 , 1.0);

output:

Image description

fragColor = vec4(ceil(sin(uv.x * 40.)), 0.0, 0.5 , 1.0);
Enter fullscreen mode Exit fullscreen mode

Image description

combining the x and y expressions:
fragColor = vec4(0.5 * (sin(uv.y * 40.) + 1.) + 0.5 * (sin(uv.x * 40.) + 1.), 0.0, 0.5 , 1.0);

output:

Image description

sharpening the values:

fragColor = vec4(ceil(sin(uv.y * 40.)) + ceil(sin(uv.x * 40.)), 0.0, 0.5 , 1.0);
Enter fullscreen mode Exit fullscreen mode

Image description

keeping the red stripes in x and blue stripes in y, we get:
fragColor = vec4(0.5 * (sin(uv.x * 40.) + 1.), 0.0, 0.5 * (sin(uv.y * 40.) + 1.) , 1.0);

Image description

fragColor = vec4(ceil(sin(uv.x * 40.)), 0.0, ceil(sin(uv.y * 40.)) , 1.0);

Image description

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up