p5.js结合ml5库开发眼动追踪作品 无法单独调用眼部追踪数据问题

ml5人脸追踪接口默认仅返回整脸外接矩形，未直接提供五官独立追踪框字段，眼部区域可通过模型输出的人脸关键点计算外接范围实现，具体步骤如下：

• 先明确模型点位对应规则：基于facemesh的点位定义，左右眼轮廓对应固定的关键点索引，无需额外训练模型：
  • 左眼轮廓索引组：33, 7, 163, 144, 145, 153, 154, 155, 133, 173, 157, 158, 159, 160, 161, 246
  • 右眼轮廓索引组：362, 382, 381, 380, 374, 373, 390, 249, 263, 466, 388, 387, 386, 385, 384, 398
• 替换原有只读取整脸外框的逻辑，在预测回调里遍历对应眼部的关键点，计算眼部的最小外接矩形，参考代码如下：

// 传入关键点数组、对应眼部的索引列表，返回眼部区域的坐标和宽高
const getEyeBounds = (keypoints, eyeIndices) => {
  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
  for (const idx of eyeIndices) {
    const point = keypoints[idx];
    minX = Math.min(minX, point.x);
    minY = Math.min(minY, point.y);
    maxX = Math.max(maxX, point.x);
    maxY = Math.max(maxY, point.y);
  }
  // 增加10px内边距，避免裁剪时切掉眼部边缘
  const pad = 10;
  return {
    x: minX - pad,
    y: minY - pad,
    width: (maxX - minX) + pad * 2,
    height: (maxY - minY) + pad * 2
  }
}

// 模型预测结果回调
const handlePrediction = (err, results) => {
  if (err) {
    console.error(err);
    return;
  }
  if (results.length > 0) {
    // scaledMesh是适配当前p5画布尺寸的关键点坐标，可直接使用无需额外换算
    const faceKeypoints = results[0].scaledMesh;
    // 分别获取左右眼的追踪框，调用方式和原有整脸外框完全一致
    const leftEyeBound = getEyeBounds(faceKeypoints, [33, 7, 163, 144, 145, 153, 154, 155, 133, 173, 157, 158, 159, 160, 161, 246]);
    const rightEyeBound = getEyeBounds(faceKeypoints, [362, 382, 381, 380, 374, 373, 390, 249, 263, 466, 388, 387, 386, 385, 384, 398]);

    // 后续直接调用p5的get()、image()方法，即可截取眼部画面实现多重展示效果
    // 如果发现眼部画面左右翻转，在绘制前加 scale(-1, 1) 做镜像校正即可
  }
}

注意：不要尝试从返回结果的boundingBox或alignedRect字段里读取眼部框数据，这两个字段仅返回整脸范围，没有拆分五官区域的坐标，必须通过关键点计算外接矩形，这是ml5 facemesh接口本身的设计逻辑。

• 多重展示效果实现：拿到眼部区域的像素数据后，可以按预设的网格、随机偏移、缩放比例重复绘制到画布不同位置，也可以给每一层眼部画面加不同的透明度、滤镜参数，实现创意视觉效果。

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