# Unexpected behavior from a shader in p5

**URL:** https://discourse.processing.org/t/unexpected-behavior-from-a-shader-in-p5/38041
**Category:** Coding Questions
**Created:** [July 21, 2022, 2:52am UTC](https://discourse.processing.org/t/unexpected-behavior-from-a-shader-in-p5/38041 "2022-07-21T02:52:12Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)
#### Post date: [July 21, 2022, 2:52am UTC](https://discourse.processing.org/t/unexpected-behavior-from-a-shader-in-p5/38041/1 "2022-07-21T02:52:12Z")

</div>

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](http://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.

```auto
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);
}

```

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [July 21, 2022, 7:59am UTC](https://discourse.processing.org/t/unexpected-behavior-from-a-shader-in-p5/38041/2 "2022-07-21T07:59:00Z")

</div>

Hi @neel,

you missed out to set the u\_resolution correct …

look [here](https://itp-xstory.github.io/p5js-shaders/#/./docs/examples/basic_gradient) which is imho the example from the book of shaders you are refering…

Cheers  
— mnse

---

<div class="post-metadata">

### Author: ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)
#### Post date: [July 21, 2022, 12:41pm UTC](https://discourse.processing.org/t/unexpected-behavior-from-a-shader-in-p5/38041/3 "2022-07-21T12:41:28Z")

</div>

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.