如何在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噪声视为图像？

回答

相关问题