p5.js - 在 p5 草图中显示和隐藏图像

Question

当noseX 位置（使用网络摄像头和ml5poseNet 模型检测到）碰到画布的某个部分（例如noseX > 50）时，我正在画布上绘制图像。但是，当鼻子X 位置不在触发该特定图像出现的画布区域中时，我希望绘制的图像再次消失。同样的故事也适用于noseX 位置指示器（黑色椭圆），它最终绘制了noseX 位置所在的路径/线，但我只希望它是一个跟随noseX 而不留下痕迹的点。这是我的 p5 草图：https ://editor.p5js.org/saskiasmith/sketches/Z57YsGRsH非常感谢！

Answer 1

如果您在每个 draw() 循环的开头添加另一个 background() 函数调用，那么它将每帧清除画布并获得您想要的效果

如果您考虑一下，您将这些图像和圆圈输出到屏幕上，但从不告诉屏幕清除，这就是每帧调用 background() 会做的事情

function draw() {
  background(245); // <-- Here is the new background call
  push();
  translate(width, 100);
  image(webcam, 0, 0, 0, 0);
  pop()
    
  let d = dist(noseX, noseY, eyelX, eyelY);
  let pX = (noseX);
  let pY = (noseY);
  ...