A p5.js filter shader reads the canvas via tex0 and vTexCoord to apply per-pixel post-processing

A p5.js filter shader needs only a fragment shader; createFilterShader(src) supplies the vertex shader automatically. The canvas content arrives as uniform sampler2D tex0, and the current pixel’s normalized coordinate (0 to 1) as varying vec2 vTexCoord. Calling texture2D(tex0, vTexCoord) returns that pixel’s color, which you then modify and write to gl_FragColor. Applying filter(myShader) after drawing runs the shader as a post-process over everything drawn so far — blur, color shift, distortion — without slow CPU pixel access. vTexCoord is a varying because it must be interpolated per-pixel across the quad.

Examples

// invert colors uniform sampler2D tex0; varying vec2 vTexCoord; void main() { vec4 col = texture2D(tex0, vTexCoord); gl_FragColor = vec4(1.0 - col.rgb, col.a); }

Assessment

Write a filter shader that converts the canvas to greyscale via a luminance dot product. Explain why vTexCoord is a varying rather than a uniform.