Pourquoi cette image Perlin Noise est-elle plus lisse que les autres?

Question

Un exercice dans Nature of Code de Shiffman me demande de créer Perlin Noise en utilisant la fonction noise() de Processing. Voici mon code que je fait pour créer 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(); 
} 

Et quand je lance mon code, il crée une image comme celle

Je regardais la solution dans le manuel. La solution du manuel et ma solution sont presque identiques, sauf que le manuel réinitialise ySpace à 0 à chaque itération de la boucle externe.

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

Cependant, quand je lance le code du manuel, le code crée une image beaucoup plus lisse comme celui-ci

Pourquoi, quand ySpace est réinitialisée dans la boucle extérieure, ne l'image sortir beaucoup plus lisse que quand ce n'est pas? En d'autres termes, pourquoi le code du manuel crée-t-il une image beaucoup plus lisse que mon code?

J'ai remarqué que le ySpace dans mon code sera significativement plus grand que le ySpace dans le code du manuel une fois que la boucle for est terminée. Mais je ne suis pas sûr si c'est la raison pour laquelle l'image de mon code n'est pas aussi lisse. D'après ce que je comprends, le bruit (x, y) crée 2d Perlin Noise. Lorsqu'il est appliqué à un pixel, le pixel doit avoir une couleur similaire aux pixels qui l'entourent, mais il ne semble pas que cela se passe dans mon code.

Answer 1

La fonction noise() prend essentiellement une coordonnée 2D (ou une coordonnée 3D, ou un seul nombre, mais dans votre cas une coordonnée 2D) et renvoie un nombre aléatoire basé sur cette coordonnée. Les coordonnées plus rapprochées génèreront des nombres aléatoires plus proches les uns des autres. Dans cette optique, pensez à ce que fait votre code et à ce que fait le manuel. Le manuel fournit une coordonnée basée sur la position dans la fenêtre, ce qui est logique car c'est là que la valeur aléatoire résultante est dessinée.

Mais votre code ne cesse d'augmenter la y coordonnée, peu importe quoi. Cela pourrait avoir du sens si vous n'aviez qu'une seule colonne de pixels qui continuait de descendre, mais vous essayez de faire une boucle sur les pixels de l'écran.