如何将未失真的2D柏林噪声作为p5中的图像。js?

我试图在p5中绘制柏林噪声图像。js。我遵循了Daniel Shiffman的教程,他给出了一个关于如何设置2D柏林噪声的示例 here (为了方便起见,我已将此加载到 this JSFiddle sketch

现在我不需要整个画布充满柏林噪声,但我只需要柏林噪声的(较小)图像,我可以像画布中的图像文件一样使用。所以,在我使用的设置函数中 createImage() 然后使用完全相同的算法将柏林噪声加载到图像中。然而,当我现在显示它时,噪声看起来完全失真。

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

有人知道为什么它是扭曲的,虽然噪声算法没有改变,我可以做什么呢?