Going further than the tutorial:
- Changed the color
- Added mouse interaction
Live Version:
Try clicking and dragging with your mouse!
GLSL / ShaderToy Code
vec2 GetNormal(float angle) {
return vec2(sin(angle), cos(angle));
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec2 uv = (fragCoord - 0.5 * iResolution.xy)/iResolution.y;
vec2 mouse = iMouse.xy/iResolution.xy;
// Zoom out
uv *= 1.25;
// Start with a black screen
vec3 color = vec3(0.0);
// Reflect on x-axis
uv.x = abs(uv.x);
// Move up to center
uv.y += tan((5.0/6.0) * 3.1415) * 0.5;
// Gets angle to reflect on
vec2 normal = GetNormal((5.0/6.0) * 3.1415);
// Distance from origin
float dist = dot(uv - vec2(0.5, 0.0), normal);
// Reflect/Bend
uv -= normal * max(0.0, dist) * 2.0;
// See reflecting line
//color += smoothstep(0.01, 0.0, abs(dist));
// Gets angle to reflect for "hats"
normal = GetNormal((2.0/3.0) * 3.1415);
float scale = 1.5;
uv.x += 0.5;
for (int i = 0; i < int(mouse.x * 10.0); i++) {
// Reset next segment
uv *= 3.0;
scale *= 3.0;
uv.x -= 1.5;
// Fold over x-coord
uv.x = abs(uv.x);
// Make it 3 points wide (this adds 0.5 units to both sides)
uv.x -= 0.5;
// Bend/reflect
uv -= normal * min(0.0, dot(uv, normal)) * 2.0;
}
dist = length(uv - vec2(clamp(uv.x, -1.0, 1.0), 0));
color += smoothstep(1.0 / iResolution.y, 0.0, dist / scale);
// Visualise the uv coordinates
color.br += uv;
// Output to screen
fragColor = vec4(color,1.0);
}Tutorial I followed:
Resources:
ShaderToy
