Letter A

The most minimal way to put a real letterform on the screen from GLSL: read it from a font. A shader can’t call fillText, but the host page can. The literate directive // @glyph iGlyph "A" tells the shader engine to render the character into an offscreen 1024×1024 canvas using the site’s monospace webfont — Inconsolata — and upload the result as a sampler2D uniform. What the shader receives is an RGBA texture whose alpha channel is 1.0 inside the glyph and 0.0 outside, with Canvas2D’s own antialiased ramp along the boundary.

The shader remaps its aspect-corrected pixel coordinates into the texture’s [0,1]² domain, samples the alpha with linear filtering, and thresholds at 0.5 with an fwidth-scaled smoothstep. That re-antialiases the edge at output resolution rather than trusting the fixed 1024-pixel source ramp — so the letter stays crisp even as the takeover canvas grows. It still softens under heavy magnification because the source is just a raster; the next letter page will fix that by building a true SDF from the same texture at load time. As before, the fill color comes from iAccent so the glyph tracks the site theme.

// @glyph iGlyph "A"
uniform sampler2D iGlyph;

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
  // aspect-corrected coords centered on the middle; y in <-0.5, 0.5>
  vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;

  // fit the square glyph texture into a 0.9-wide box centered on the screen
  vec2 gUV = uv / 0.9 + 0.5;

  // read the glyph alpha; outside the texture there is no letter
  float mask = 0.0;
  if(gUV.x >= 0.0 && gUV.x <= 1.0 && gUV.y >= 0.0 && gUV.y <= 1.0){
    mask = texture2D(iGlyph, gUV).a;
  }

  // re-antialias at output resolution: threshold the coverage ramp with a
  // pixel-footprint-scaled smoothstep so the edge stays crisp at any zoom
  float aa = fwidth(mask);
  float glyph = smoothstep(0.5 - aa, 0.5 + aa, mask);

  vec3 col = mix(vec3(0.0), iAccent, glyph);
  fragColor = vec4(col, 1.0);
}