0
dotPos(density, stageWidth, stageHeight) {
    const imageData = this.ctx.getImageData(0, 0, stageWidth, stageHeight).data;

    const imageData = this.ctx.getImageData(0, 0, stageWidth, stageHeight).data;

    const particles = [];
    let i = 0;
    let width = 0;
    let pixel;

    for (let height = 0; height < stageHeight; height++) {
      ++i;
      const slide = i % 2 === 0;
      width = 0;
      if (slide === 1) {
        width += 6;
      }

      for (width; width < stageWidth; width += density) {
        pixel = imageData[(width + height * stageWidth) * 4 - 1];
        if (pixel !== 0 && width > 0 && width < stageWidth && height > 0 && height < stageHeight) {
          particles.push({
            x: width,
            h: height,
          });
        }
      }
    }

I'm studying the code above but I don't know what the below line means:

pixel = imageData[(width + height * stageWidth) * 4 - 1];

please help me.

jsN00b
  • 3,584
  • 2
  • 8
  • 21
sunub
  • 13
  • 2

1 Answers1

1

The ImageData's data is an Uint8ClampedArray that represents the pixels of the ImageData linearly. Each item of this flat array represents the Red, Green, Blue, and Alpha value of every pixel.
So to walk through each pixels, you actually need to jump 4 items at a time, hence the * 4.
Since this data is flat, to restore a cartesian model, you need to multiply the y value by the width of the ImageData, and add the x value to this.

i: 0 x: 0 y: 0 i: 1 x: 1 y: 0 i: 2 x: 2 y: 0
i: 3 x: 0 y: 1 i: 4 x: 1 y: 1 i: 5 x: 2 y: 1
i: 6 x: 0 y: 2 i: 7 x: 1 y: 2 i: 8 x: 2 y: 2

So (width + height * stageWidth) * 4 corresponds to the point at coords {x: width, y: height}.

The -1 would get the previous pixel's alpha channel, linearly: if width is zero, then it will get the alpha from the last point on the previous row, which to be honest seems very weird since at width: 0 height: 0 then this would return undefined.

const width = x0;
const height = 0;
const stageWidth = 3;
const imageData = new ImageData(stageWidth, stageWidth).data;
console.log(imageData[(width + height * 4) -1]);

Usually we do (x + y * width) * 4 + 3 to get the alpha channel at the coordinate we are actually at in our iteration.
Yes, they do actually avoid this undefined case in the condition && width > 0 but this honestly sounds like a fluke and doesn't change the fact that this code doesn't smell very good.
And this is not the weirdest thing happening here:

      const slide = i % 2 === 0;

will always evaluate to either true or false, never anything else, so the if (slide === 1) condition will never match.

If I were you, I wouldn't try to learn from this and search other examples instead.

And this is without considering the double declaration of the imageData constant, which must be a copy-pasta error since this code would throw a SyntaxError with it.

Kaiido
  • 123,334
  • 13
  • 219
  • 285