Texture as data in shader has odd behavior

p5.js Coding Questions
2

Hi :slight_smile:

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

I wrote a slightly simplified version:

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.