p5.jsで歪みのない2Dパーリンノイズを画像として取得するにはどうすればよいですか？

Question

私はp5.jsでPerlinノイズ画像を描画しようとしています。私はDaniel Shiffmanのチュートリアルに続き、彼は2D Perlinノイズhereを設定する方法の例を示しています（便宜上これをthis JSFiddle sketchにロードしました）。

今、私はPerlinノイズで満たされたキャンバス全体を必要としませんが、私はキャンバス内の画像ファイルのように使うことができるパーリンノイズの（より小さな）画像が必要です。ですから、セットアップ機能では、私はcreateImage()を使って、まったく同じアルゴリズムを使ってPerlinノイズを画像にロードしました。しかし、これを表示すると、ノイズは完全に歪んで見えます。ここで

は私のコードです：

// noise code originally by 
// Daniel Shiffman 
// http://codingtra.in 
// http://patreon.com/codingtrain 
// Code for: https://youtu.be/ikwNrFvnL3g 

var inc = 0.01; 
var noiseImg; 

function setup() { 
    createCanvas(640, 360); 
    pixelDensity(1); 
    background("red"); 

    var yoff = 0; 
    noiseImg = createImage(200, 200); 
    noiseImg.loadPixels(); 
    for (var y = 0; y < height; y++) { 
    var xoff = 0; 
    for (var x = 0; x < width; x++) { 
     var index = (x + y * width) * 4; 
     var r = noise(xoff, yoff) * 255; 
     noiseImg.pixels[index + 0] = r; 
     noiseImg.pixels[index + 1] = r; 
     noiseImg.pixels[index + 2] = r; 
     noiseImg.pixels[index + 3] = 255; 
     xoff += inc; 
    } 
    yoff += inc; 
    } 
    noiseImg.updatePixels(); 
} 

function draw() { 
    image(noiseImg, 0, 0); 
} 

JSFiddle

ノイズアルゴリズムが変更されていないと私はそれについて何を行うことができますが、それが歪んでいる理由は、誰も知っていますか？

ありがとうございます！

Answer 1

とheightの変数は、キャンパス全体のもので、お客様のケースではそれぞれ640と360です。これらの変数を使用して、その領域内のすべてのピクセルをループしますが、200と200ピクセルだけの画像のピクセル配列を設定しています。 （またはあなたのJSFiddleで、300300ピクセル。）

歪みを引き起こしているものです：あなたが200x200画像にパーリンノイズの640x360図面を描いています。これは、あなたが見ている歪みとして現れるいくつかの未定義の動作を引き起こしています。

問題を解決するには、スケッチ自体ではなく、イメージの境界をループするだけです。