如何在p5.js中將未失真的二維Perlin噪聲視爲圖像？

我想在p5.js中繪製一個Perlin噪聲圖像。我遵循Daniel Shiffman的教程，他舉例說明如何設置2D Perlin噪音here（爲了方便，我已將其加載到this JSFiddle sketch中）。如何在p5.js中將未失真的二維Perlin噪聲視爲圖像？

現在我不需要整個畫布充滿了Perlin噪音，但我只需要一個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

有誰知道，爲什麼會被扭曲，雖然噪聲算法沒有改變，我能做些什麼呢？

謝謝！

來源

2017-08-14 mdomino

您的'width'和'height'變量永遠不會被初始化。設置它們使其工作。 – DarthJDG

@DarthJDG'width'和'height'變量由P5.js庫設置。 –

width和height變量是針對整個校園的，分別是640和360。您可以使用這些變量來遍歷該空間中的每個像素，但是然後您將圖像的像素數組設置爲200，像素數爲200。（或者在你的jsfiddle，300通過300像素）。

這是什麼引起的失真：你畫的柏林噪聲的640x360圖紙到200x200圖像。這導致了一些未定義的行爲，這表現爲你看到的失真。

要解決這個問題，只需循環遍歷圖像的邊界，而不是草圖本身。

來源

2017-08-14 16:09:47

噢，我的，當你爲我拼出來，這很明顯，但很難弄清楚我自己。感謝凱文，這回答了我的問題。 – mdomino

如何在p5.js中將未失真的二維Perlin噪聲視爲圖像？

回答

相關問題