p5.j​​s访问单个像素值

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，然后...

阿尔法（Alpha）衡量像素的透明度。 255表示完全不透明，0表示完全透明。