There's a whole collection of tricks you can use to manipulate SDFs and create complex geometry. We'll start out simple, and try moving our circle around the screen.
Hint: you might want to check back to a previous exercise.
There's a whole collection of tricks you can use to manipulate SDFs and create complex geometry. We'll start out simple, and try moving our circle around the screen.
Hint: you might want to check back to a previous exercise.
{"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// Time to move the distance field away from the center.\n//\n// Place the circle such that its center is at `origin`\n// every frame.\n//\nfloat distanceField(vec2 point, vec2 origin, float radius) {\n return length(point) - radius;\n}\n\nvoid main() {\n vec2 uv = 2.0 * gl_FragCoord.xy / iResolution.xy - 1.0;\n vec2 origin = vec2(sin(iGlobalTime * 0.3) * 0.3);\n float radius = (sin(iGlobalTime * 0.25) * 0.5 + 0.5) * 0.5 + 0.3;\n float dist = distanceField(uv, origin, radius);\n\n gl_FragColor = vec4(draw_distance(dist, uv), 1);\n}\n","solution":"uniform vec2 iResolution;\nuniform float iGlobalTime;\n\nfloat distanceField(vec2 point, vec2 origin, float radius) {\n return length(point - origin) - radius;\n}\n\nvoid main() {\n vec2 uv = 2.0 * gl_FragCoord.xy / iResolution.xy - 1.0;\n vec2 origin = vec2(sin(iGlobalTime * 0.3) * 0.3);\n float radius = (sin(iGlobalTime * 0.25) * 0.5 + 0.5) * 0.5 + 0.3;\n float dist = distanceField(uv, origin, radius);\n\n gl_FragColor = vec4(draw_distance(dist, uv), 1);\n}\n","name":"08-moving-shapes"}