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