p5.js访问独立像素值

Question

我需要访问实时画布的各个像素值，该画布具有从用户输入绘制的图案(形状)。

就像下面这样，

function draw(){
stroke(255);
if (mouseIsPressed == true) {
   if(mouseX != old_mX || mouseY != old_mY)
      {
        obstacle[obstacle.length] = [mouseX, mouseY];
        //line(mouseX, mouseY, pmouseX, pmouseY);
        old_mX = mouseX;
        old_mY = mouseY;
      }
 }
      fill(255);
      beginShape();
      for(i = 0; i < obstacle.length;i++){
        vertex(obstacle[i][0],obstacle[i][1]);
      }
    endShape();
}

绘图完成后，需要访问各个像素值

function keyTyped() {

    if ( key == 'n')
      {
      obstacle = []
      }

    if( key == 'd'){
      loadPixels();
      //rest of the action
      updatePixels();
    }}

问题是loadPixels()；没有用正确的值加载数组，加载的数组更像是包含随机模式的随机数组

有没有正确的方法访问像素？

Answer 1

我测试了你的代码，它看起来像是正常地将像素加载到pixels[]中。我认为问题可能是你对“正常”的期望。

根据https://p5js.org/reference/#/p5/pixels的说法

数组中的前四个值(索引0-3)将是像素在(0，0)处的R、G、B、A值。后四个值(索引4-7)将包含像素在(1，0)处的R、G、B、A值。

因此，如果您在完全黑色的画布上运行loadPixels()，您将得到以下数组：

console.log(pixels);
-> [0, 0, 0, 255, 0, 0, 0, 255, 0, 0, 0, 255...]

0红色，0绿色，0蓝色，255 alpha在第一个像素，然后

0红色，0绿色，0蓝色，255阿尔法在第二个像素，然后...

Alpha是像素透明度的度量标准。255表示完全不透明，0表示完全透明。