Shaders Exercise 2

Source Code

Enlarge

Algorithm Explanation

I started this visual exercise with the concept of the distance field. 

While the basic implementation of the distance field is drawing a simple circle. 

vec2 dist = distance(st - vec2(.5));

Enlarge

However, as in the book of shaders, when we transpose the original point to the center of the screen, we can take abs() of both X and Y coordinates, we multiply the shape by 4. 

If we take a step further, we can implement more complicated shapes by using max() or min() functions if two distance functions. 

Enlarge

This is my modified version of the fractioned measure of the distance field. 

If we remove the fraction, we get a grayscale contour of the distance value.

Enlarge

When we animate certain parameters using sin() and other animating functions, we get this looped moving pattern.

Enlarge

If I apply a step function, we get a sharp contrast animated shape.

Enlarge

Finally, if I assign different color channels with different values, we can get this shape that resembles 🍀. 

color.g += d*1.5;
color.rb += abs(st.xy);
color += .15;
gl_FragColor = vec4(color, 1.0);