Question

我试图在p5.js中绘制一个Perlin噪声图像。我跟着Daniel Shiffman的教程，他给出了一个关于如何设置2D Perlin噪声的例子here（为方便起见，我将其加载到this JSFiddle sketch）。

现在我不需要整个画布充满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

有谁知道，为什么它会被扭曲，虽然噪音算法没有改变，我可以做些什么呢？

谢谢！

Answer 1

width和height变量分别针对整个校园，分别为640和360。您可以使用这些变量遍历该空间中的每个像素，但之后您需要设置仅200 200像素的图像的像素阵列。（或者在您的JSFiddle中，300按300像素。）

造成失真的原因是：您正在将640x360 Perlin噪音绘制为200x200图像。这会导致一些未定义的行为，这表现为您所看到的失真。

要解决问题，只需遍历图像的边界，而不是草图本身。

如何将未经失真的2D Perlin噪声作为p5.js中的图像？

1 个答案: