p5js，需要帮助使用 get() 来检测像素的颜色作为 RGBA 数组以查看鼠标是否悬停在它上面

Question

目前正在学习和从事一个项目，对于这个特殊情况，我试图通过使用 get() 获取像素的颜色来模拟碰撞检测。在控制台日志中，我可以看到鼠标悬停的像素的颜色数组对应于我在颜色数组中的颜色，但我似乎无法比较它们。好像我看不透一些基本原理，我已经尝试了几个小时没有找到解决方案。

function setup() {
  createCanvas(400, 400);
  
colors = [[255, 165, 0, 255], [61, 145, 64, 255], [204, 0, 0, 255], [31, 117, 254, 255], 
    [160, 32, 240, 255], [0, 128, 128, 255], [244, 0, 161, 255]];
}

function draw() {
  background(220);

  for(var i = 0; i < colors.length; i++){
    fill(colors[i]);
    ellipse(120, 40 + 45 * i, 40);
    
  let c = get(mouseX, mouseY);
  // console.log(c);
  if(c == colors[i]){
    console.log(colors[i]);
  }
  
  }
  
  
}

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

Answer 1

你可以使用我在底部添加的功能

function setup() {
    

createCanvas(400, 400);
  
colors = [[255, 165, 0, 255], [61, 145, 64, 255], [204, 0, 0, 255], [31, 117, 254, 255], 
    [160, 32, 240, 255], [0, 128, 128, 255], [244, 0, 161, 255]];
}

function draw() {
  background(220);

  for(i = 0; i < colors.length; i++){
    fill(colors[i]);
    ellipse(120, 40 + 45 * i, 40);
    
    
  }
  for(i = 0; i < colors.length; i++){
  let c = get(mouseX, mouseY);
  
  if(arrayEquals(c,colors[i])){
    console.log(colors[i]);
  }
  }

}

function arrayEquals(a, b) { //define a function with arguments a,b
  return Array.isArray(a) && //true if 'a' is an array, '&&' checks if all arguments are true to return true otherswise false
    Array.isArray(b) && //true if 'b' is an array
    a.length === b.length && //true if 'a' is the same length as 'b'
    a.every((val, index) => val === b[index]); //true if 'a' value is the same as the 'b' value at the same position for all positions
}

p5js，需要帮助使用 get() 来检测像素的颜色作为 RGBA 数组以查看鼠标是否悬停在它上面

p5js, need help using get() to detect the color of a pixel as a RGBA array to see if the mouse is hovering over it

p5.js