Question about the pixels[] array

Tngabor

In this little program, why does pixels[y * width + x] equate to assign a random color to every pixel? My first reaction was to do pixels[x*y] but that gives a strange result.

void setup() { size(700,700); }
void draw() {
  background(0);
  randomSeed(42);
  loadPixels();
  for (int x = 0; x < width; x++) {
    for (int y = 0; y < height; y++) {
      float randomValue = random(255);
      pixels[y*width + x] = color(randomValue);
    }
  }
  updatePixels();
}

quark

Assume the screen is 5 pixels wide and 4 pixels high the the pixels array will be of length 20 with index values 0-19 inclusive. Mapping the indices for X and Y position gives

          X
     0  1  2  3  4
     -------------
  0|  0  1  2  3  4
  1|  5  6  7  8  9
Y 2| 10 11 12 13 14
  3| 15 16 17 18 19

You can see that the array index ihas the formula

index = y * width + x

KevinWorkman

Get out a piece of paper and a pencil. Draw a grid. That grid shows the pixels on a screen. Number those cells with x, y, and index values. You'll see why the index value equals y*width+x.

For example, here is the start of a grid with a width and height of 4:

I'll leave it as an exercise for the reader to fill out the rest. :p

TfGuy44

[Imagine a third grid example here]

Tngabor

Thanks for the quick answers! It quite clear to me know how the math works here.

After a bit of thinking i guessed that if index = y * width + x works fine then so should: index = x * height + y but after checking the math i realized that while for this case with random numbers it works okay, but for real images this would definitely not work:

     x
     0  1  2  3  4
     -------------
y 0| 0  4  8  12 16
  1| 1  5  9  13 17
  2| 2  6  10 14 18
  3| 3  7  11 15 19

clankill3r

About your [x*y]. Think about this, what if x or y is 0?

1x0 = 0

2x0 = 0

3x0 = 0

4x0 = 0

rapatski

Tngabor, why wouldn't it work? We're only talking about the order/sequence in which we iterate through all pixels? Like you illustrated, one goes horizontal, row by row, where the other goes vertical, column by column?

both
pixels[y*width+x] = color(x/float(width)*255, y/float(height)*255, 0);
and
pixels[x*height+y] = color(x/float(width)*255, y/float(height)*255, 0);
will have the exact same result?

Reason both options look different when assigning random values with your seed is because of the order in which they are assigned, as above. The second way of iterating through the pixels whilst assigning random colours should look the same as the first, but rotated 90 degrees CC.

If you simply wanted to assign a random colour to each pixel, you wouldn't need to bother with a x and y at all. The reason you're doing the conversion is because pixels[] is a one-dimensional array. For random colours you could simply do this:

for (int i = 0; i < pixels.length; i++) { pixels[i] = color(random(255)); }

What are you trying to achieve?