Question

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

目的是用像素填充画布，亮度由Perlin Noise功能随机选择。我受到了Processing的Java等效的启发，但我获得的并不是我所期望的，它几乎是黑色的画布。

这是我的代码：

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抽象出像素颜色的设置。要使用set方法，我们只需要像素的坐标和color instance。更改颜色模式还允许我们轻松创建具有给定亮度的颜色对象。

注意：我已经包含了一个到p5.js的CDN链接，因此您可以运行该示例。

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示例

1 个答案: