Going further than the tutorial:

  • Added color and shape effects

Live Version:


GLSL / ShaderToy Code

// Create a Hash that takes two values (vec2) and generates one output
float hash21(vec2 p) {
    p = fract(p * vec2(310.34, 4315.345));
    p += dot(p, p + 34.23);
    return fract(p.x * p.y);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    // Move origin to the center
    vec2 uv = (fragCoord - 0.5 * iResolution.xy)/iResolution.y;
    vec2 mouse = fragCoord/iMouse.xy;

    // Default color
    vec3 color = vec3(0.0);
    
    // Set speed;
    float speed = 0.25;
    
    // Divide screen into a grid
    
    
    // Controls the size of the grid squares
    // The lower the number, the larger the squares
    uv *= 5.0;
    
    // Make it move
    uv += iTime * speed;
    
    // Equivalent to: uv - floor(uv)
    vec2 griduv = fract(uv);
    
    // Create an id for each using the floor of each
    vec2 id = floor(uv);
    
    // Create a "random" number based on the id
    float n = hash21(id);
    
    // Move the origin of each square to the center
    griduv -= 0.5; 
    
    // Add color (r - red value, g - green value, b - blue value)
    // Comment out or remove to see just the grid
    //color.rb = griduv;
    
    // Create a diagonal mask that goes both ways
    
    // Set line thickness
    float lineThickness = 0.1;
    

    // Swap horizontally (can be used to rotate)
    //griduv.x *= -1.0;
    if (n < 0.5) {
        griduv.x *= -1.0;
    }
    
    float distance = abs(abs(griduv.x + griduv.y) - 0.5);
    vec2 circleuv = griduv-sign(griduv.x + griduv.y + 0.001) * 0.5;
    
    distance = length(circleuv);
    //distance = length(griduv-0.5) - 0.5;
        
    float mask = smoothstep(0.01, -0.01, abs(distance - 0.5) - lineThickness);
    //float mask = smoothstep(0.01, -0.01, abs(griduv.x + griduv.y) - lineThickness);
    
    // Add opposite circle
    //distance = length(griduv+0.5) - 0.5;
    //mask += smoothstep(0.01, -0.01, abs(distance) - lineThickness);
    
    // Get an angle between -pi and pi
    float angle = atan(circleuv.x, circleuv.y);
    
    // Every other id gets its sign flipped
    float checker = mod(id.x + id.y, 2.0) * 2.0 - 1.0;
    float flow = sin(iTime * 2.0 - checker * angle * -26.0);
    
    float x = fract(angle/1.57) * 0.4;
    float y = (distance - (0.5 - lineThickness)) / (2.0 * lineThickness);
    y = abs(y - 0.5) * 0.4;
    
    vec2 tUv = vec2(x, y); 
    color += texture(iChannel0, tUv).rgb * mask * flow * vec3(1.0, 0.0, 0.75);
    //color += x * mask;
    //color.gb += tUv * mask;
    //color += flow * mask;
    //color += checker;
    //color.rb += n;

/*
    // Create 0.02 width outlines of the squares
    if (griduv.x > 0.48 || griduv.y > 0.48) {
        // Draw magenta lines
        color = vec3(1.0, 0., 1.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 *