GLSL shader example
Marching Ants Selection Border
Accumulate arc length along all four edges and use one perimeter coordinate so the dash phase continues through each corner.
Live example
Edit the code and the preview updates as you type.
What to observe
Marching Ants Selection Border.
Mechanism
Accumulate arc length along all four edges and use one perimeter coordinate so the dash phase continues through each corner.
The controlling code
vec2 q=abs(p);vec2 halfSize=vec2(.65,.4);float d=box(p,halfSize);float t=q.y>halfSize.y-aa?(p.y>0.?p.x+halfSize.x:3.*halfSize.x+2.*halfSize.y-p.x):(p.x>0.?2.*halfSize.x+halfSize.y-p.y:4.*halfSize.x+3.*halfSize.y+p.y);float dash=step(.5,fract(t*(8.+u_parameter*15.)-u_time));c=mix(c,mix(vec3(.1),vec3(1.),dash),1.-smoothstep(.012,.012+aa,abs(d)));
Experiment
Change the phase term -u_time in dash to -u_time*2.. The black and white dashes travel twice as fast around the rectangle without changing its size or the dash count.
Debugging and cost
The piecewise perimeter coordinate t joins all four edges before fract creates the pattern. Set halfSize=vec2(.65,.4) to vec2(.4,.4) to inspect corner continuity on a square; no history texture is needed to move the dashes.