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