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

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] ?
Tagged:

Answers

  • Answer ✓

    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

  • Answer ✓

    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

  • // 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();
    
Sign In or Register to comment.