Unexpected behavior from a shader in p5

p5.js Coding Questions
1

I’ve got a shader that I’m trying to run in p5, but it doesn’t work as expected. If I copy this fragment shader into editor.thebookofshaders.com, it generates a gradient that’s black on the left and red on the right. When I run it in p5, the entire screen is red.

Can anybody help me understand what I’m doing wrong? It seems as though the value of uv is 1 across the whole image rather than changing from 0 to 1.

function setup() {
  createCanvas(400, 400, WEBGL);
  
  
  
  let s = `#ifdef GL_ES
        precision mediump float;
#endif
`;
  let fs =
`uniform vec2 u_resolution;

void main(void)
{
   vec2 uv = gl_FragCoord.xy/u_resolution.xy;   
    gl_FragColor = vec4(uv.x,0.,0.,1.);
}`
  let vs =
      `attribute vec3 aPosition;
      attribute vec2 aTexCoord;
      varying vec2 vTexCoord;
      void main() {
        vTexCoord = aTexCoord;
        vec4 positionVec4 = vec4(aPosition, 1.0);
        positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
        gl_Position = positionVec4;}`;
  gs = createShader(s+vs,s+fs);
}

function draw() {
  shader(gs);
  rect(0,0,400,400);
}
2

Hi @neel,

you missed out to set the u_resolution correct …

look here which is imho the example from the book of shaders you are refering…

Cheers
— mnse

1 Like
3

You’re absolutely right. I feel so silly. Thanks for the help.

I sometimes prototype in the book of shaders, sometimes in kodelife, and rarely in p5. As such, I often make silly mistakes when porting to p5, especially when I haven’t run a shader from p5 in a while.

Thanks again.