Why is this Perlin Noise image smoother than the other?

Question

An exercise in Shiffman's Nature of Code asks me to create Perlin Noise using Processing's noise() function. Here's my code I made to create Perlin Noise

 float xSpace = 0; // Signifies "space" between noise() values on the x coordinate.
 float ySpace = 0; // Signifies "space" between noise() values on the y coordinate. 


void setup(){
  size(500,500);
  background(0);
  loadPixels();

  for(int x = 0; x < width; x++) {
    for(int y = 0; y < height; y++) {
      float bright = map(noise(xSpace,ySpace),0,1,0,255);
      pixels[(y * width) + x] = color(bright);
      //Each pixel in the pixels[] array is a color element.  
      ySpace = ySpace + 0.01; 
    }
    xSpace = xSpace + 0.01 ;
  }
  updatePixels();
}

And when I run my code, it creates an image like this

I looked at the solution in the textbook. The textbook's solution and my solution are almost identical except the textbook reinitializes ySpace back to 0 with every iteration of the outer loop.

// Textbook's solution

       for(int x = 0; x < width; x++) {
          ySpace = 0;
        for(int y = 0; y < height; y++) {
          float bright = map(noise(xSpace,ySpace),0,1,0,255);
          pixels[(y * width) + x] = color(bright);
          ySpace = ySpace + 0.01; 
        }
        xSpace = xSpace + 0.01 ;
      }

However, when I run the textbook's code, the code creates a much smoother image like this

Why, when ySpace is reinitialized in the outer loop, does the image come out much smoother than the when its not? In other words, why is the textbook's code create a much smoother image than my code?

I noticed that the ySpace in my code will be significantly larger than the ySpace in the textbook's code once the for loop is complete. But I'm not sure if that's the reason why my code's image is not as smooth. From my understanding, noise(x,y) creates 2d Perlin Noise. When applied to a pixel, the pixel should be a similar color to the pixels around it, but it doesn't look like its happening in my code.

Not sure what the question is here. You changed a basic parameter of the algorithm and are surprised when the results don't match the unmodified algorithm. Note the book's code does not "initialize `ySpace` within the first loop" -- it ***re***initializes the value to zero on _every_ iteration of the outer loop. — Jim Garrison, Feb 04 '17 at 23:43
Ok, I edited my post to correct my mistake. Is the reinitialization of `ySpace` the reason why the textbook's image much smoother than mine? — Alex Fidel Chen, Feb 04 '17 at 23:56

score 1 · Accepted Answer · answered Feb 04 '17 at 23:46

The noise() function essentially takes a 2D coordinate (or a 3D coordinate, or a single number, but in your case a 2D coordinate) and returns a random number based on that coordinate. Coordinates that are closer together will generate random numbers that are closer together.

With that in mind, think about what your code is doing and what the textbook is doing. The textbook is feeding in an x,y coordinate based on the position in the window, which makes sense since that's where the resulting random value is being drawn.

But your code keeps increasing the y coordinate no matter what. This might make sense if you only had a single column of pixels that just kept going down, but you're trying to loop over the pixels on the screen.

Why is this Perlin Noise image smoother than the other?

1 Answers1