accessing pixels[ ] array in p5.js (javascript)

Question

I'm trying to loop through each pixel in the canvas, check and store its colour. If not white, (something happens), else, (nothing). There will be a nested loop, but I am confused with the 'idx' value, as written in the reference :

var d = pixelDensity;
  for (var i = 0; i < d; i++) {
    for (var j = 0; j < d; j++) {
      // loop over
      idx = 4*((y * d + j) * width * d + (x * d + i));
      pixels[idx] = r;
      pixels[idx+1] = g;
      pixels[idx+2] = b;
      pixels[idx+3] = a;
    }
  }

I guess it has to do with reading pixel matrix using (x,y) but I am not even sure it's necessary. I'm trying to make a target-based particle system, following this tutorial that uses text.

help?

Answer 1

This is my calculation:

index = 4 * ((this.y0 + j) * this.W + this.x0 + i)

Not sure about your pixeldensity. You are also squaring it.

I have noticed different behaviour on Windows and (ios+linux)

My code works on Windows only.