为什么这个柏林噪声图像比另一个更平滑？

Question

希夫曼 Nature of Code asks me to create Perlin Noise using Processing's noise() 函数中的一个练习。这是我创建 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();
}

当我运行我的代码时，它会创建这样的图像

看了课本上的解法。教科书的解决方案和我的解决方案几乎相同，只是教科书在每次外循环迭代时将 ySpace 重新初始化为 0。

// 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 ;
      }

然而，当我运行教科书的代码时，代码创建了一个像这样更平滑的图像

为什么在外循环中重新初始化 ySpace 时，图像会比不初始化时平滑得多？换句话说，为什么教科书的代码比我的代码创建的图像更流畅？

我注意到一旦 for 循环完成，我代码中的 ySpace 将明显大于教科书代码中的 ySpace。但我不确定这是否是我的代码图像不那么流畅的原因。根据我的理解，noise(x,y) 会产生 2d Perlin Noise。当应用于像素时，该像素应该与其周围的像素具有相似的颜色，但它看起来不像我的代码中发生的那样。

Answer 1

noise() 函数本质上采用 2D 坐标（或 3D 坐标，或单个数字，但在您的情况下是 2D 坐标）和 returns 基于该坐标的随机数。靠得更近的坐标会生成靠得更近的随机数。

考虑到这一点，想想你的代码在做什么，教科书在做什么。教科书根据 window 中的位置输入 x,y 坐标，这是有道理的，因为这是绘制结果随机值的地方。

但是您的代码无论如何都会增加 y 坐标。如果您只有一列不断下降的像素，但您正试图遍历屏幕上的像素，这可能有意义。

为什么这个柏林噪声图像比另一个更平滑？

Why is this Perlin Noise image smoother than the other?

java

processing

visualization

noise

perlin-noise