Understanding code from NatureOfCode book, nested loops in noise()

marciokoko

Im looking through the introduction of the book: http://natureofcode.com/book/introduction/

and we are looking at 2D Noise and the author presents this code:

loadPixels();
for (int x = 0; x < width; x++) {
  for (int y = 0; y < height; y++) {
    float bright = random(255);
    pixels[x+y*width] = color(bright);
  }
}
updatePixels();

The author then goes on to show how we can use noise() instead of random. But Im confused as to the code snippet and how it creates noise. So this is what I do understand:

1. it loads all pixels?
2. then the first for loop checks if x is < width and moves over by 1. So if the pixel was (5,5), x=6.
3. then the next loop checks if y is < height and moves over by 1. So y=6, thus (6,6)
4. it creates a random brightness value
5. finally sets that brightness to an array called pixel at the element [5+5*width] ?

Chrisir

1 yes

2&3

the screen is 2D grid

since both for-loops are nested, we adress all pixels in the screen:

first we can have x=0 then the first column goes all the way down with y ...

then x= 1 column 1 down with a new y from 0 to height

then x= 2 column 2 down etc.

it's a nested for loop for a grid.

4

yes

5

it sets the value at all pixels as described

kfrajer

When you use color(int), it is working with a gray scale, from black at 0 to white at 255, and a shades of gray between these two limits. Because he is calling the random function, then you are going to get random shades of gray for every pixel.

In regards to the for loops, that is the code to access each pixel in your 2D array storing your original image data. A 2D array, or a table, in programming can be represented by a single array of length width*height. Here in your example, you are accessing every pixel by columns. When y finish a loop, the next x value is taken, meaning you are accessing the next column.

The best way to understand this is to work with smaller values, width=4 and height=6. If you interact over the loops, you will see the output. Or check this other way, by printing values:

    loadPixels();
    for (int x = 0; x < width; x=x+20) {
      for (int y = 0; y < height; y=y+20) {
        //float bright = random(255);
        //pixels[x+y*width] = color(bright);
        print(x+y*width+" ");
      }
      println("");
    }
updatePixels();

A better example, coloring every column:

    loadPixels();
   float bright = 0;
    for (int x = 0; x < width; x++) {
      bright=map(x,0,width,0,255); //updated only per column
      for (int y = 0; y < height; y++) {       
        pixels[x+y*width] = color(bright);
      }
    }
    updatePixels();

Check this, working with a single for loop:

    int npix=width*height;
    loadPixels();
   float bright = 0;
    for (int z = 0; z < npix; z++) {            
        pixels[x+y*width] = color(bright);      
    }
    updatePixels();

Kf

GoToLoop

// forum.Processing.org/two/discussion/17219/
// understanding-code-from-natureofcode-book-nested-loops-in-noise

size(400, 400);
noLoop();

loadPixels();

for (int p = -1; ++p < pixels.length; ) {
  color grey = (color) random(0400);
  pixels[p] = #000000 | grey << 020 | grey << 010 | grey;
}

updatePixels();