Because an SDF just takes a point as input, you can manipulate space around your object to get unlimited repetition more or less for free!
This is called domain repetition, and is achieved using GLSL's mod()
function.
Because an SDF just takes a point as input, you can manipulate space around your object to get unlimited repetition more or less for free!
This is called domain repetition, and is achieved using GLSL's mod()
function.
{"bannedTokens":[],"prefix":"vec3 draw_line(float d);\nfloat draw_solid(float d);\nvec3 draw_distance(float d, vec2 p);\n","suffix":"vec3 draw_line(float d) {\n const float aa = 3.0;\n const float thickness = 0.0025;\n return vec3(smoothstep(0.0, aa / iResolution.y, max(0.0, abs(d) - thickness)));\n}\n\nfloat draw_solid(float d) {\n return smoothstep(0.0, 3.0 / iResolution.y, max(0.0, d));\n}\n\nvec3 draw_distance(float d, vec2 p) {\n float t = clamp(d * 0.85, 0.0, 1.0);\n vec3 grad = mix(vec3(1, 0.8, 0.5), vec3(0.3, 0.8, 1), t);\n\n float d0 = abs(1.0 - draw_line(mod(d + 0.1, 0.2) - 0.1).x);\n float d1 = abs(1.0 - draw_line(mod(d + 0.025, 0.05) - 0.025).x);\n float d2 = abs(1.0 - draw_line(d).x);\n vec3 rim = vec3(max(d2 * 0.85, max(d0 * 0.25, d1 * 0.06125)));\n\n grad -= rim;\n grad -= mix(vec3(0.05, 0.35, 0.35), vec3(0.0), draw_solid(d));\n\n return grad;\n}\n","question":"uniform vec2 iResolution;\nuniform float iGlobalTime;\n\n//\n// Modify `point` so that we get circles filling the screen.\n// There should be one circle in each direction every 0.5 units,\n// and the original circle should remain in the center of the screen.\n//\nfloat distanceFromCircle(vec2 point, float radius) {\n return length(point) - radius;\n}\n\nvoid main() {\n vec2 uv = 2.0 * gl_FragCoord.xy / iResolution.xy - 1.0;\n float radius = (sin(iGlobalTime * 0.25) * 0.5 + 0.5) * 0.1 + 0.05;\n float dist = distanceFromCircle(uv, radius);\n\n gl_FragColor = vec4(draw_distance(dist, uv), 1);\n}\n","solution":"uniform vec2 iResolution;\nuniform float iGlobalTime;\n\nfloat distanceFromCircle(vec2 point, float radius) {\n point = mod(point + 0.25, 0.5) - 0.25;\n return length(point) - radius;\n}\n\nvoid main() {\n vec2 uv = 2.0 * gl_FragCoord.xy / iResolution.xy - 1.0;\n float radius = (sin(iGlobalTime * 0.25) * 0.5 + 0.5) * 0.1 + 0.05;\n float dist = distanceFromCircle(uv, radius);\n\n gl_FragColor = vec4(draw_distance(dist, uv), 1);\n}\n","name":"10-repeating-space"}