# Texture as data in shader has odd behavior

**URL:** <https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197>\
**Category:** Coding Questions\
**Created:** [October 31, 2021, 6:13pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197 "2021-10-31T18:13:01Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![altitudinem](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@altitudinem](https://discourse.processing.org/u/altitudinem)\
**Post date:** [October 31, 2021, 6:13pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/1 "2021-10-31T18:13:01Z")

</div>

Dear community,

I’m learning how to use a shader, especially within p5js.  
I’ve learned from this post how to pass a set of data as a texture and use it in the shader program.

> [@Fragment shader too many uniforms error](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/4):
>
> [https://editor.p5js.org/abe/sketches/H8K7bY5s](https://editor.p5js.org/abe/sketches/H8K7bY5s) [canvas] Here something done very quickly and without much thinking slight_smile I hope the code is not too bad. I’m curious about performance on mobile, as for-loops are not recommended in shaders. For each pixel in the screen it checks the distance to all particles to calculate brightness. The brute force approach.

I appreciate that @hamoid and @myselfhimself has shared their code for it 😉

But after trying some variation with these codes, I found an odd behaviour from this.

This odd behaviour is visible at most in this sketch.

> [@Fragment shader too many uniforms error](https://discourse.processing.org/t/fragment-shader-too-many-uniforms-error/17603/10):
>
> I now managed to to something with mouse tracking, thank you: [https://editor.p5js.org/myselfhimself/sketches/uVNEF5Ktz](https://editor.p5js.org/myselfhimself/sketches/uVNEF5Ktz)

If you run this sketch, you might found that one from the 50 particles isn’t following the coordinate it gets. This one particle is somehow wandering and driven into a different way.

I’ve found that there is nothing wrong in the javascript part.  
The most suspicious part for me is the shader, especially where the data is taken from the sampler2D by the texcoord. (line 29 of the sketch)

```auto
vec4 data = texture2D(tex, vec2(x, 0.0));

```

Could the texture coordinate be the problem, as this is somehow interpolated in a wrong way?  
I honestly couldn’t find from where to start to debug this problem.  
I’m still trying to write different versions of codes by using the same technique, but always resulting in the same problem.

I wonder how this problem could be sorted out.  
Any tips would be appreciated! 🙂

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 3, 2021, 4:40pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/2 "2021-11-03T16:40:14Z")

</div>

Hi 🙂

I looked into it but I can’t figure out why the oddness.

I wrote a slightly simplified version:

```javascript
let img;
let fx;
let NUM_PARTICLES = 50;

function setup() {
  createCanvas(300, 300, WEBGL);  
  fx = createShader(`
    precision highp float; 
    attribute vec3 aPosition;
    void main() { 
      gl_Position = vec4(aPosition, 1.0); 
    }`, `
    precision highp float;
    uniform sampler2D tex;
    void main() {
      float bri = 0.0;
      float maxBri = 0.0009;
      vec2 pos = gl_FragCoord.xy / 300.0;
      for(int i=0; i<${NUM_PARTICLES}; i++) {
        vec2 data = texture2D(tex, vec2(float(i) / ${NUM_PARTICLES}.0, 0.0)).rg;
        bri += maxBri / distance(pos, data);
      }
      gl_FragColor = vec4(vec3(bri), 1.0);
    }`);
  noStroke();
  shader(fx);

  img = createImage(NUM_PARTICLES, 1);
}

function draw() {
  quad(-1, -1, 1, -1, 1, 1, -1, 1);
  img.loadPixels();
  let i = frameCount % NUM_PARTICLES;
  img.pixels[i*4+0] = int(255.0 * mouseX / width);
  img.pixels[i*4+1] = int(255.0 * (height-mouseY) / height);
  img.pixels[i*4+2] = 0;
  img.pixels[i*4+3] = 255; // alpha seems to affect R G and B (RGB multiplied by alpha?)
  img.updatePixels();
  fx.setUniform('tex', img);
}

```

It doesn’t make sense that one particle seems to move, as there’s no code to move particles: they are recycled and the mouse position is used to update one of the them. It would be interesting to rewrite it in Processing to see if the issue is still there.

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 3, 2021, 5:18pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/3 "2021-11-03T17:18:26Z")

</div>

The same issue is present in Processing:

### color.frag

```glsl
#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

uniform sampler2D tex;

void main() {
  float bri = 0.0;
  float maxBri = 0.0009;
  vec2 pos = gl_FragCoord.xy / 300.0;
  for(int i=0; i<50; i++) {
    vec2 data = texture2D(tex, vec2(float(i) / 50.0, 0.0)).rg;
    bri += maxBri / distance(pos, data);
  }
  gl_FragColor = vec4(vec3(bri), 1.0);
}

```

### sketch.pde

```auto
PShader fx;
PImage img;
int NUM_PARTICLES = 50;

void settings() {
  size(300, 300, P2D);
}
void setup() {
  fx = loadShader("color.frag");
  shader(fx);
  img = createImage(NUM_PARTICLES, 1, ARGB);
  noStroke();
}

void draw() {
  img.loadPixels();
  img.pixels[frameCount % NUM_PARTICLES] = color(
    255.0 * mouseX / width, 
    255.0 * (height-mouseY) / height, 
    0, 
    255);
  img.updatePixels();
  fx.set("tex", img);
  rect(0, 0, width, height);
}

```

Very interesting… a particle with personality… 🙂

---

<div class="post-metadata">

**Author:** ![noahbuddy](https://avatars.discourse-cdn.com/v4/letter/n/73ab20/32.png) [@noahbuddy](https://discourse.processing.org/u/noahbuddy)\
**Post date:** [November 3, 2021, 8:14pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/4 "2021-11-03T20:14:44Z")

</div>

Appears to be texture filtering.

Using Hamoid’s example, add `((PGraphicsOpenGL)g).textureSampling(POINT);` into the setup function.  
I have used that before to preserve “blockyness” of an image (in other words, the texture is not filtered).

I am not sure how to do the same in p5js.  
Possibly with `gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);` or something like it. (I have not tried this)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [November 3, 2021, 8:55pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/5 "2021-11-03T20:55:43Z")

</div>

Nice! Thanks for sharing 🙂

In p5.js this seems to fix the funny particle:

```javascript
function setup() {
  let canvas = createCanvas(300, 300, WEBGL);
  
  // ... unrelated code not shown ...
  
  img = createImage(NUM_PARTICLES, 1);
  
  tex = canvas.getTexture(img);
  tex.setInterpolation(NEAREST, NEAREST); // <--- this
}

```

I found it [here](https://github.com/processing/p5.js/blob/374acfb44588bfd565c54d61264df197d798d121/test/manual-test-examples/webgl/texture/textureFilter/sketch.js).

Interesting that the odd behavior is present with `LINEAR` but not with `NEAREST` (in p5.js).

---

<div class="post-metadata">

**Author:** ![altitudinem](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@altitudinem](https://discourse.processing.org/u/altitudinem)\
**Post date:** [November 4, 2021, 2:37pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/6 "2021-11-04T14:37:03Z")

</div>

Hey, @noahbuddy @hamoid Big thanks for the help! 😉

I didn’t knew that the interpolation mode could be adjusted 🙃

This really opens the the door wide into using shader!

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [February 18, 2022, 5:14pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/7 "2022-02-18T17:14:08Z")

</div>

Any idea why i get an error that say: cant find variable nearest ? Using the same code in my computer. It works fine in p5.editor

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 18, 2022, 5:29pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/8 "2022-02-18T17:29:23Z")

</div>

Hi! The forum says it was +2 years since you posted last time so welcome back 🙂

So the code is identical in both cases? (same CASE?) If yes, maybe they are different versions of p5.js? The editor seems to be using v1.4.0.

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [February 18, 2022, 5:31pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/9 "2022-02-18T17:31:58Z")

</div>

Hello Hamoid! Yes! Thanks!  
Im using the last version of p5. i think is 1.4.1. Any idea how can i make this work?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 18, 2022, 5:35pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/10 "2022-02-18T17:35:28Z")

</div>

Could you maybe try if it works with 1.4.0? You can get it at the bottom of [Release v1.4.0 · processing/p5.js · GitHub](https://github.com/processing/p5.js/releases/tag/v1.4.0)

Just to know if the version makes a difference or not. Also if you have more than one web browser you could try in all of them see if that has an effect.

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [February 18, 2022, 5:58pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/11 "2022-02-18T17:58:22Z")

</div>

I also test it in version 1.4.0 and same effect…Where i can find the reference of that function "tex.setInterpolation() ?

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 18, 2022, 6:07pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/12 "2022-02-18T18:07:26Z")

</div>

There seems to be no documentation for `p5.Texture`. I can try it here if you send me a zip file. E-mail at [aBe. Contact](https://hamoid.com/contact/)

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [February 18, 2022, 6:42pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/13 "2022-02-18T18:42:01Z")

</div>

Thanks. I think is some problem with my computer…

but hey, look at this example

> **[p5.js Web Editor](https://editor.p5js.org/juanproton/sketches/tArQWTEh5)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

Im trying to do the same but with a pg.Graphics, but it seems that it doesnt work the nearest interpolation. Any idea? Notice that i need to get the EXACT values that i send to the shader, and i cant use arrays…

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [February 18, 2022, 6:42pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/14 "2022-02-18T18:42:24Z")

</div>

If i use the nearest interpolation i get the right values but i dont know how can i make it work with a graphic

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [February 19, 2022, 8:55am UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/15 "2022-02-19T08:55:45Z")

</div>

I tried drawing to a pg.Graphics but unfortunately I couldn’t figure out why it’s all white ☹

---

<div class="post-metadata">

**Author:** ![scudly](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/scudly/32/5597_2.png) [@scudly](https://discourse.processing.org/u/scudly)\
**Post date:** [February 20, 2022, 1:05am UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/16 "2022-02-20T01:05:51Z")

</div>

Try using texelFetch() with integer coordinates instead of texture2D() using texture coordinates. texelFetch doesn’t interpolate the texture data.

[https://www.khronos.org/registry/OpenGL-Refpages/es3.0/html/texelFetch.xhtml](https://www.khronos.org/registry/OpenGL-Refpages/es3.0/html/texelFetch.xhtml)

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [February 21, 2022, 9:17am UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/17 "2022-02-21T09:17:05Z")

</div>

I believe `texelFetch()` was introduced in ES 3.0 which requires WebGL 2.0 and currently p5.js uses WebGL 1.0. I don’t think `setInterpolation()` is going to help you in this case. There were numerous things wrong with your example, here’s what I think is a working version including the proper discrete pixel sampling:

https://editor.p5js.org/Kumu-Paul/full/8CujrVuRV

---

<div class="post-metadata">

**Author:** ![vjjv](https://avatars.discourse-cdn.com/v4/letter/v/df705f/32.png) [@vjjv](https://discourse.processing.org/u/vjjv)\
**Post date:** [February 23, 2022, 4:46pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/18 "2022-02-23T16:46:17Z")

</div>

Thanks, i notice that it doest return the EXACT value, Although I access the array correctly, there is a slight distance between the value it sends and the value it receives. If it were a color it would be almost imperceptible, but if I send integer values ​​to receive angles for example, it becomes something visible. Does anyone know how I can correct it to receive the EXACT value?

> **[p5.js Web Editor](https://editor.p5js.org/juanproton/sketches/U1rUfk6H6)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [February 23, 2022, 8:20pm UTC](https://discourse.processing.org/t/texture-as-data-in-shader-has-odd-behavior/33197/19 "2022-02-23T20:20:17Z")

</div>

Dealing with floating points it’s common to have to deal with small precisions errors. Checking for equality with floating points, other than perhaps 0.0, is almost always a mistake. If you are using colors to indicate discrete integer values I suggest you convert them to integers by multiplying and rounding.

```auto
int num = int(floor(255.0 * data.r + 0.5));

```

https://editor.p5js.org/Kumu-Paul/full/iIvfhyjXk