在 p5 sketch 中显示和隐藏图像

Question

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

Answer 1

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

如果您考虑一下，您正在将这些图像和圆圈输出到屏幕上，但从未告诉屏幕清除，这就是每帧调用 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);
  ...

在 p5 sketch 中显示和隐藏图像

Showing and hiding images in p5 sketch

p5.js

ml5.js