## DEV Community

Manish

Posted on

### 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:

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

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

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;

``````

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

``````// 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);

``````

this will give the following result

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);
``````

output:

### 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:

### Stripes

to create stripes,
we start from a basic gradient:

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

output:

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:

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:

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

output:

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:

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:

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);
``````

#### 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:

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

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:

sharpening the values:

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

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);`

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