颜色不适用于具有噪音功能的 p5.js 示例

Question

我想实现《代码的本质》一书的 p5.js 示例。

目的是用 Perlin 噪声函数随机选择亮度的像素填充 canvas。我受到了 Processing 的 Java 等价物的启发，但我得到的并不是我所期望的，它几乎是黑色的 canvas。

这是我的代码：

var increment = 0.02

function setup() {
  createCanvas(100, 100)
  noLoop()
}

function draw() {
  background(0)

  loadPixels();

  var xoff = 0

  for (var x = 0; x < width; x++) {
    xoff += increment
    var yoff = 0

    for (var y = 0; y < height; y++) {
      yoff += increment
      var bright = floor(noise(xoff, yoff) * 255)

      console.log('bright', bright, '(', x, ', ', y, ')')

      pixels[x+y*width] = color(bright);
    }
  }
  updatePixels();
}

我的 console.log 显示了一个似乎连贯的明亮值。你在我的代码中看到任何问题吗？

Answer 1

像素数组是扁平的，每 4 个元素创建一个像素。

第一个像素实际上是：

pixels[0] // red value of pixel,   between 0-255
pixels[1] // green value of pixel, between 0-255
pixels[2] // blue value of pixel,  between 0-255
pixels[3] // alpha value of pixel, between 0-255

但是，在查看 p5.js 文档时，我注意到有一个 helper method set which abstracts the setting of a pixel's color. To use the set method all we need is a pixel's coordinates as well as a color instance。改变颜色模式还可以让我们轻松创建具有给定亮度的颜色对象。

注意：我在 p5.js 中包含了一个 CDN link，因此您可以运行这个例子。

const increment = 0.02;

function setup() {
  createCanvas(200, 200);
  noLoop();
}

function draw() {
  background(0);
  
  colorMode(HSB, 255);
  
  let xOff = 0;
  
  for (let x = 0; x < width; x++) {
    let yOff = 0;
    
    xOff += increment;
    
    for (let y = 0; y < height; y++) {
      yOff += increment
      
      const n = noise(xOff, yOff);    //  noise
      const h = 255;                  //  hue
      const s = 126;                  //  saturation
      const b = map(n, 0, 1, 0, 255); //  brightness
      const c = color(h, s, b);       //  color instance
      
      set(x, y, c);                   //  set pixel
    }
  }
  
  updatePixels();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>

颜色不适用于具有噪音功能的 p5.js 示例

Color don't apply on a p5.js example with noise function

javascript

p5.js