求助：如何通过按钮修改PoseNet识别人体关键点的圆圈颜色？

问题根源 #

1. draw循环覆盖绘制内容：p5.js的draw()是每秒执行约60次的主循环，你在colourred()里画的圆圈会被下一次draw()调用立刻覆盖——因为draw里每次都固定用fill(255,0,0)重新绘制眼睛和鼻子的圆圈。
2. 按钮事件绑定冲突：start变量和start()函数同名，导致点击Start按钮时触发错误，影响整体逻辑。
3. 无状态管理颜色：没有用变量存储当前填充色，而是直接在点击事件里临时绘制，无法持久生效。

修复步骤 #

1. 新增全局变量存储当前填充色，初始设为默认红色
2. 修改draw()函数，使用这个变量设置填充色，不再硬编码
3. 调整colourred()函数，只修改填充色变量，无需重复绘制圆圈
4. 重命名Start按钮的触发函数，避免和变量名冲突

修改后的完整JavaScript代码 #

let video;
let poseNet;
let leftEye, rightEye;
let nose;
let pose;
let colour_red;
let startBtn; // 重命名变量，避免和函数冲突
let currentFillColor = [255, 0, 0]; // 新增颜色状态变量

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  video.size(width, height);
  poseNet = ml5.poseNet(video, modelReady);
  poseNet.on("pose", gotPoses);
  
  colour_red = createButton("RED");
  colour_red.mousePressed(colourred);
  
  startBtn = createButton("Start");
  startBtn.mousePressed(startPoseDetection); // 绑定到新函数
}

function gotPoses(poses){
  if (poses.length > 0){
    leftEye = poses[0].pose.leftEye;
    rightEye = poses[0].pose.rightEye;
    nose = poses[0].pose.nose;
  }
  pose = poses;
}

function modelReady(){
  console.log("model loaded")
}

function draw() {
  background(220);
  image(video,0,0);
  if(pose){
    fill(...currentFillColor); // 使用状态变量设置填充色
    circle(leftEye.x,leftEye.y, 50);
    circle(rightEye.x,rightEye.y, 50);
    circle(nose.x, nose.y,50);
  }
}

function colourred(){
  currentFillColor = [255, 200, 120]; // 只修改颜色变量
}

function startPoseDetection(){
  // 这里可以添加Start按钮需要执行的逻辑，比如重新加载模型或启动检测
  console.log("Pose detection started");
}

额外说明 #

• 代码片段工具报错的问题，大概率是因为部分在线编辑器对p5.js的DOM元素创建（比如按钮）支持不完善，本地VS Code环境更适配p5.js的运行逻辑。
• 现在点击RED按钮后，currentFillColor会被更新，draw循环会自动使用新颜色绘制圆圈，不会再被覆盖。

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