https://twigl.app/?ol=true&ss=-OMLFSdcaiuFEj59jdGu

contour_1d.glsl

precision highp float;
uniform vec2 resolution;
uniform float time;
layout (location = 0) out vec4 outColor;

vec2 aspect(vec2 size) {
  float ma = max(size.x, size.y) / min(size.x, size.y);
  float a = size.x / size.y;
  return vec2(ma * min(a, 1.), max(1. / a, 1.));
}

float saturate(float x) { return clamp(x,0.,1.); }
float norm(float a, float b, float x) { return (x-a)/(b-a); }
float snorm(float a,float b,float x) { return saturate(norm(a,b,x)); }
float triangle(float x) { return .5-abs(fract(x)-.5); }

float vline(vec2 p, float x, float width) {
  float d = dFdx(p.x) * .5 * width;
  return smoothstep(d,d, abs(p.x-x));
}

const float FREQ = 1.;

void main() {
  float px = 2./min(resolution.x,resolution.y);
  vec2 p = (gl_FragCoord.xy / resolution - .5) * aspect(resolution) * 2.;
  
  float x = p.x * FREQ + sin(time)*.0;
  float f = x * x;
  float d = 2. * x;
  // d = dFdx(f)/px;

  float w = 20.;
  float y = abs(triangle(f) / d);
  y = snorm(w-1., w+1., y / (.5 * px * FREQ));
  
  vec3 color = vec3(y);
  color = mix(vec3(1,0,0), color, vline(p, 1./FREQ, 2.));
  color = mix(vec3(1,0,0), color, vline(p, -1./FREQ, 2.));
        
  outColor = vec4(color, 1.);
}