Going further than the tutorial:

  • Updated color and blur effects

Live Version:


GLSL / ShaderToy Code

// Pseudo-randomness
vec2 N22(vec2 point) {
    vec3 a = fract(point.xyx * vec3(123.45, 234.34, 345.65));
    a += dot(a, a + 34.45);
    return fract(vec2(a.x * a.y, a.y * a.z));
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Zooms out so it goes from -1.0 to 1.0
    vec2 uv = (2.0 * fragCoord - iResolution.xy)/iResolution.y;
	
    float m = 0.0;
    
    float time = iTime * 0.5;
    float cellIndex = 0.0;
    
    // Initialize minDist at a large distance
    float minDist = 100.0;
    
    vec3 color = vec3(0.0);
    
    // Multiply uv
    uv *= 2.0;

    // Make grid
    vec2 gridUv = fract(uv) - 0.5;

    // Determine grid cell
    vec2 id = floor(uv);

    vec2 cellId = vec2(0.0);

    for (float y = -1.0; y <= 1.0; y++) {
        for (float x = -1.0; x <= 1.0; x++) {
            vec2 offset = vec2(x, y);
            vec2 n = N22(vec2(id + offset));
            vec2 point = offset + sin(n * time) * 0.5 ;

            point -= gridUv;
            // Euclidian distance
            float eDist = length(point);

            // Manhattan distance
            float mDist = abs(point.x) + abs(point.y);

            // Interpolate between distances
            //float dist = mix(eDist, mDist, 0.5);
            float dist = eDist;

            if (dist < minDist) { 
                minDist = dist;
                cellId = id + offset;
            }
        }
        
        // Visualize gridUv
        //color.rb = gridUv;
        
        color = vec3(minDist);
        color.rb = cellId * 0.01;
        //color *= vec3(0.75, 0.3, 1.0);
    }
    
    //vec3 color = vec3(minDist);   
 	//vec3 color = vec3(cellIndex/50.0);   

    // Output to screen
    fragColor = vec4(color,1.0);
}

Tutorial I followed:


Resources:
ShaderToy

Leave a Reply

Your email address will not be published. Required fields are marked *