P5.js技术问询：如何用get()获取蓝色像素位置并绘制椭圆

直接操作img.pixels数组是最高效的实现方式，先明确这个数组的核心结构：它是一维数组，每个像素对应连续4个元素，顺序为[R, G, B, A]，像素坐标(x,y)对应的数组索引计算公式为：index = (x + y * img.width) * 4。以下是完整的实现步骤和代码：

核心实现步骤 #

• 预加载图片后，调用img.loadPixels()初始化像素数组
• 遍历图片的每个像素坐标(x,y)，计算对应数组索引
• 提取该像素的B通道值（索引+2的位置），结合R、G值判断是否为蓝色（可根据你的实际图片调整阈值）
• 在符合条件的像素位置绘制椭圆

示例代码 #

let img;

function preload() {
  // 替换为你的图片路径
  img = loadImage('your-image.png');
}

function setup() {
  createCanvas(img.width, img.height);
  img.loadPixels();
  noLoop(); // 只执行一次绘制逻辑
}

function draw() {
  background(255);
  image(img, 0, 0); // 先绘制原图作为底

  // 遍历所有像素
  for (let y = 0; y < img.height; y++) {
    for (let x = 0; x < img.width; x++) {
      const index = (x + y * img.width) * 4;
      const r = img.pixels[index];
      const g = img.pixels[index + 1];
      const b = img.pixels[index + 2];

      // 判断是否为蓝色：这里采用B值远高于R、G的逻辑，可根据你的图片调整阈值
      if (b > 200 && r < 50 && g < 50) {
        fill(255, 0, 0); // 用红色椭圆标记蓝色像素
        noStroke();
        ellipse(x, y, 8, 8); // 椭圆大小可按需调整
      }
    }
  }
}

关键细节说明 #

• 避免循环中使用get(x,y)：get()每次调用都会从pixels数组提取数据，在大图片上会导致性能大幅下降，直接操作数组效率提升明显
• 灵活调整蓝色判断逻辑：如果你的蓝色不是纯蓝，可放宽R、G的阈值范围，或者用颜色距离公式计算与标准蓝色RGB(0,0,255)的相似度来判断
• 必须调用loadPixels()：加载图片后必须执行该方法，才能让img.pixels数组填充有效像素数据

内容的提问来源于stack exchange，提问作者Sue